INTRODUCTION

Computer graphics is a computing field that involves the

creating, storing and processing of image content via
computer. It has a wide application in science, engineering,
art and especially in the field of entertainment, movies and
video games. Computer graphics began to progress in the
1960s when the first interactive creation of graphic content
was enabled, and since then it has been developing
incredibly quickly . It is important to note that computer
graphics applications are used for various educational
purposes. For example, computer graphics applications can,
in the education process, help people with learning
difficulties , assist students in understanding computer
science algorithms as well as increasing students' interest in
programming and computer graphics .
2D TRANSFORMATION
The fundamental part of computer graphics are geometric
transformations that can change the position, size, orientation and
shape of an object. Basic geometric transformations in a 2D plane
are called 2D transformations and those are translation, rotation,
scaling, reflection and shear. Furthermore, each of the well-known
transformations is briefly explained in [11], [9]. Before considering
the above mentioned transformations, it should be noted that for
any point 𝑇𝑇(𝑥𝑥, 𝑦𝑦) in a 2D plane, a column vector or row
vector representation can be used.
In this article,
column vector
representation is
used, i.e. point 𝑇𝑇 is
represented as 𝑇𝑇
= 𝑥𝑥 𝑦𝑦.
 TRANSITION
Translation is a geometric transformation that
moves the current point 𝑇 = [𝑥 𝑦] to the point 𝑇
′ = [𝑥 ′ 𝑦 ′ ] for a given vector 𝑡⃗ = 𝑡𝑥 𝚤⃗ + 𝑡𝑦 𝚥⃗ =
[tx ,𝑡𝑦 ]. Translation is shown in Fi. 1.

Therefore, point 𝑇′ can be written as: 𝑇′ = 𝑇 +⃗ 𝑡

and in matrix notation as: [ 𝑥′ 𝑦′] = [ 𝑥 𝑦] + [ 𝑡𝑥
𝑡𝑦 ]
 ROTATION
Let 𝑂(0,0) and 𝜃 be a point and an angle given
respectively. Rotation around the point 𝑂𝑂(0,0)
by the angle 𝜃 is a transformation that maps
every point 𝑇 in the plane to the point 𝑇′ in
such a manner that the following properties are
true
|𝑂T| = |𝑂𝑇′| and ∠𝑇O𝑇′= 𝜃
By convention, rotation by the positive angle 𝜃𝜃 goes counter-clockwise (Fig. 2a), while
rotation by the negative angle 𝜃𝜃 goes clockwise (Fig. 2b). Rotation of the point 𝑇𝑇( 𝑥𝑥, 𝑦𝑦)
located at the angle 𝜙𝜙 from the horizontal 𝑥𝑥 coordinate with a distance 𝑟𝑟 from the
origin of the coordinate system leads to a new point T′ (𝑥′ , 𝑦′ ). By using standard
trigonometry, coordinates of the point 𝑇(𝑥, 𝑦) can be expressed as:
𝑥= 𝑟 cos phi
y= 𝑟 sin phi
Similarly, coordinates of the point 𝑇𝑇′ (𝑥𝑥′ , 𝑦𝑦′ ) can be expressed as:
𝑥′ = 𝑟 cos(𝜙 + 𝜃)
𝑦′ = 𝑟 sin(𝜙 + 𝜃).
By using the equations (3) and (4), as well as addition formulas, the following formulas
can be obtained:
𝑥′ = 𝑟 cos 𝜙 cos 𝜃 − 𝑟 sin𝜙 sin 𝜃 = 𝑥 cos 𝜃 − 𝑦 sin 𝜃
𝑦′ = 𝑟 cos 𝜙 sin 𝜃 + 𝑟 sin 𝜙 cos 𝜃 = 𝑥 sin 𝜃 + 𝑦 cos 𝜃
which can be, in a matrix form
 SCALIN
G that expands or
Scaling is a mapping
compresses each point coordinate. The scaling
of each coordinate is determined by the scaling
factor 𝑆. If the scaling factors for each
coordinate are different, scaling is
disproportionate. If the scaling factors are the
same for all coordinates, scaling is proportional.
For the point 𝑇(𝑥, 𝑦) and the scaling factor 𝑆𝑥
and 𝑆𝑦 that scales the point 𝑇(𝑥, 𝑦) in the 𝑥
and 𝑦𝑦 direction respectively, the following
coordinates of the point 𝑇′ are obtained:
𝑥′ = 𝑆𝑥 ∙ 𝑥,
𝑦′ = 𝑆𝑦 ∙ 𝑦.
In the matrix form, equations (10) and (11) can
be written as:
For example, for the scaling
factors 𝑆𝑥 = 𝑆𝑦 = 2, the
scaling process of the
square is shown in Fig. 3.
 REFLECTIO
N case of a scaling where the
Reflection is a special
size of the object does not change. For the scaling
factors 𝑆𝑆𝑥 = −1 and 𝑆𝑦= 1, reflecting is about
the 𝑦𝑦 axis. If the scaling factors are 𝑆𝑥 = 1 and 𝑆𝑦
= −1, there is a reflection about the 𝑥 axis. For the
scaling factors 𝑆𝑥 = 𝑆𝑦 = −1, reflection is about
the 𝑥 and 𝑦𝑦 axes. In Fig. 4, reflections about the 𝑥
and 𝑦 axes of Super Mario, the main character in
the Super Mario video games as an original object,
are shown.
 SHEAR
Skewing the object with respect to the 𝑥
or 𝑦 axis is called shear transformation.
Skewing by the angle 𝛼 with respect to
the 𝑥 axis and by the angle 𝛽 with
respect to the 𝑦 axis is illustrated in Fig.

Coordinates of the point 𝑇′ (𝑥′ , 𝑦′ ) can be defined

as:
𝑥′ = 𝑥 + 𝑦 ∙ tan 𝛽,
𝑦′ = 𝑦 + 𝑥∙ tan 𝛼.
In the matrix form, point 𝑇′ can be
represented as:
 HOMOGENEOUS COORDINATE
The process of implementing severalSYSTEM
successive transformations is, by using Cartesian
coordinates, computationally more extensive. Namely, it can be noticed that to perform
translation, matrix addition is carried out, while to perform other transformations, only
matrix multiplication is carried out. In order to treat all transformations in the same
manner, i.e. to reduce them to matrix multiplication, homogeneous coordinates are
introduced. Thus, each Cartesian point 𝑇( 𝑥, 𝑦) can be converted into homogeneous
coordinates 𝑇(𝑥, 𝑦, 𝑤), and a coordinate system with this point representation is called
a homogeneous coordinate system.

Although triples of coordinates commonly display a point in space, here they represent
a point in the plane or 2D point. Two sets of homogeneous coordinates, ( 𝑥, 𝑦, 𝑤) and ( 𝑥
′, 𝑦′,𝑤′), represent the same point if one is a multiple of the other. For example,
coordinates (1,2,3) and (2,4,6) represent the same point. It can be concluded that one
point in homogeneous coordinates can be displayed in infinitely many ways, that is, one
whole class of triples of coordinates represents the same point in the plane.
 This class of triples of coordinates which
represent one point in the plane (𝑡𝑥,𝑡𝑦,𝑡𝑤),
where 𝑡 ≠ 0, actually represents a line in the
3D space. It should be noted that at least one
homogeneous coordinate must be different
from zero, meaning that the point (0,0,0) is not
allowed. If the coordinate 𝑤 ≠ 0, each of them
can be divided by 𝑤𝑤, which is why the
point 𝑇 can be written as:

All such points form a plane with the equation 𝑤𝑤 = 1 in the 3D space. In
the case of 𝑤𝑤 = 0, it is a point in infinity, which will not be considered in
more detail.
The usage of homogeneous coordinates is of great importance in computer
graphics. Homogeneous coordinates provide a uniform mathematical tool
for all transformations, where matrix transformation through homogeneous
coordinates must be in the 3 × 3 form [8]. In that sense
homogeneous translation matrix becomes: homogeneous rotation matrix:

where translation is reduced to a matrix homogeneous scaling matrix:

multiplication:

Furthermore, the homogeneous homogeneous shear matrix:

translation matrix is:
In order to conduct several sequences of the transforms,
all these transformations must be compound. After the
implementation of all transformations, for example
scaling, rotation and translation over the point 𝑇 in this
original order, and the coordinates of the point 𝑇′ could
be calculated in the following way
𝑇′ = 𝑀𝑡r ∙ 𝑀𝑟o ∙ 𝑀sc
∙T
they could be calculated by multiplying the homogeneous
scaling matrix, homogeneous rotation matrix and
homogeneous translation matrix, respectively, into a
single matrix.
MATRIX-COMPUTER
GRAPHIC
In high school or at the faculty level education,
matrix calculus is an integral and significant
part of the mathematics curriculum for
students. One of the possible ways of matrix
operation implementation is computer graphics
In order to better illustrate the relations between
geometric transformations and the matrix
calculus described in the previous section, the
"Matrix - Computer Graphics" application
software that provides a simple interface for
studying 2D graphics is created. This
application software is written in 𝐶𝐶#, an
object-oriented programming language. One
can find more about 𝐶𝐶#, for example, in [5,7].
Using the "Matrix - Computer Graphics" application
you can easily apply one of the abovementioned
transformations on the desired object. Students can
easily draw the desired object in the coordinate system
and optionally, by using the determined matrices,
apply the corresponding geometric transformations.
One of the possibilities is to optionally enter data in
the upper matrices for the corresponding
transformation (translation, rotation, scaling or shear)
of the drawn object, or to directly insert only the
rotation angle or shear angles of the drawn object
with respect to the 𝑥 or 𝑦 axis in the two lower
matrices as shown in Fig
THANK YOU