Debre Markos University

Faculty of Technology
Department of Computer Science
CoSc 3072 – Computer Graphics
Chapter 4 – Handout –Transformations
In this chapter we will review the mathematics of
matrix transformations, and see how matrices can be
used to perform different types of transformation:
translations, rotations and scaling.
We will introduce the important topic of
homogeneous coordinates – a variation on the
standard Cartesian coordinate system that is widely
employed in computer graphics.
Finally we will consider how transformations can be
defined in OpenGL.

12/17/2025
 Geometric Transformation

Operations that are applied to the geometric description of

an object to change its position, orientation, or size are
called geometric transformations.
Sometimes geometric-transformation operations are also
referred to as modeling transformation, but some graphics
packages make a distinction between the two.
Therefore, some graphics packages provide two sets of
transformation routines, while other packages have a
single set of functions that can be used for both geometric
trans formations and modeling transformations .

12/17/2025
 con…
2-D Matrix Transformations
First of all let us review some basics of matrices. 2x2
matrices can be multiplied according to the following
equation.

12/17/2025
 Con……
Matrices of other sizes can be multiplied in a similar way,
provided the number of columns of the first matrix is
equal to the number of rows of the second.
Matrix multiplication is not commutative. In other words,
for two matrices A and B, AB≠BA. We can see this from
the following example.

12/17/2025
 Con….
However, matrix multiplication is associative.
This means that if we have three matrices A, B and
C, then (AB) C = A (BC).
We can see this from the following example.

12/17/2025
 Con…..

In the following sections we will consider how to perform

certain common types of coordinate transformations using
matrices.
 We will start off by looking only at 2-D points, i.e. points
that have an x and a y coordinate.
Later in this chapter we will extend our discussion to 3-D
points.
BASIC TWO-DIMENSIONAL GEOMETRIC TRANSFORMATIONS
The geometric-transformation functions that are available
in all graphics packages are those for translation, rotation,
and scaling.
Other useful transformation routines that are sometimes
included in a package are reflection and shearing
operations.

12/17/2025
 *Con...
* 2-D Translation
The translation transformation shifts all points by the
same amount.
Therefore, in 2-D, we must define two translation
parameters: the x-translation tx and the y-translation ty.
To translate a point P to P’ we add on a vector T:

12/17/2025
 Con….
*Therefore, from Eq. (5) we can see that the
relationship between points before and after
the translation is:

2-D Translation

12/17/2025
 Con….
2-D Rotation
The rotation transformation rotates all points about a
center of rotation.
Normally this center of rotation is assumed to be at the
origin (0,0), although as we will see later on it is possible
to rotate about any point.
The rotation transformation has a single parameter: the
angle of rotation, θ.
A sample rotation in 2-D about the origin is illustrated
below.
To rotate a point P anti-clockwise by θo, we apply the
rotation matrix R:

12/17/2025
 Con….
2-D Rotation

12/17/2025
 Con….
2-D Rotation
cos  =x/r =>x=rcos 
sign =y/r =>y=rsign 
Cos(+)=x/r =>x=rcos(+)
 =>x=r(coscos-signsign)
 =>x=xcos-ysign
Sign(+)=y/r =>y=rsign(+)
 y =>rcossign+rcossign
 y=ycos+xsign

12/17/2025
 Con…

Therefore, from Eq. (9) we can see that the relationship between
points before and after the rotation is:

12/17/2025
 Con….

2-D Rotation about the Origin

2-D Scaling
 The scaling transformation multiplies each coordinate of each point
by a scale factor.
 The scale factor can be different for each coordinate (e.g. for the x
and y coordinates).
 If all scale factors are equal we call it uniform scaling, whereas if
they are different we call it differential scaling. A sample scaling is
shown below

12/17/2025
 Con….
*To scale a point P by scale factors Sx and Sy we
apply the scaling matrix S:

Therefore, from Eq. (13) we can see that the relationship

between points before and after the scaling is:

12/17/2025
 Con..

2-D Scaling

Homogeneous Coordinates
When we will look at the viewing pipeline for
computer graphics: every primitive undergoes a
sequence of transformations before being displayed.
As we must perform a sequence of transformations
in this pipeline, it is essential that we have an
efficient way to execute these transformations.
12/17/2025
 Con….

One answer is to compose the series of transformations

into a single matrix, and then apply the composed matrix
to every primitive.
This would be efficient because we perform the
composition once only (the transformation will be the
same for all primitives), leaving only a single matrix
multiplication for each primitive.
Since matrix multiplications are often executed in
dedicated hardware on the video card this will be very
fast.
* There is a problem with this solution, however. We can
illustrate this problem by looking at the following two
examples.

12/17/2025
 Con…
Example 1
 We want to transform a large number of points by the same
sequence of three matrix transformations: a rotation R1,
followed by a scaling S1 and finally another rotation R2.
 In this case, the overall transformation is P = R2 S1R1P.
Therefore we can implement this by composing R2, S1 and
R1 into a single composite matrix C, and then multiplying
each point by C.
*Example 2
* We want to transform a large number of points by the same
sequence of four matrix transformations: a translation T1, a
rotation R1, another translation T2 and finally a scaling S1.
*In this case, the overall transformation can be expressed as
P = S1 (R1 (P + T1 ) + T2 ) = S1R1P + S1R1T1 + S1T2 .
12/17/2025
Con……
*Clearly this is significantly more complex than the previous
example.
* Even if we combined S1R1, S1R1T1 and S1T2 into composite
matrices we would still have to apply two extra matrix
additions for every point we wanted to transform.
* Therefore the operation of the graphics pipeline would be
much slower in this second example compared to the first.
*The reason is that this second sequence of transformations
included translations, whereas the first sequence consisted
of only rotations and scaling.
* Using the definitions we have seen so far rotations and
scaling are performed using matrix multiplications, whereas
translations are performed using matrix additions.
*We could improve the efficiency of the graphics pipeline if we
could find a way to express translations as matrix
multiplications.
12/17/2025
 Con…..
*Homogeneous coordinates allow us to do just this.
*With homogeneous coordinates we add an extra
coordinate, the homogenous parameter, to each point in
Cartesian coordinates.
*So 2-D points are stored as three values: the x-coordinate,
the y-coordinate and the homogeneous parameter.
*Normally the homogenous parameter is given the value 1,
in which case homogenous coordinates are the same as
Cartesian coordinates but with an extra value which is
always 1.
* In the following sections we will see how adding this extra
homogeneous parameter helps us to express translation
transformations using matrix multiplications.

12/17/2025
 Con….
*2-D Translation with Homogenous Coordinates
*Now we can express a translation transformation
using a single matrix multiplication, as shown below.

Therefore p x= px + tx , instead of an addition.

p y = py + ty , exactly the same as before, but we used a matrix

multiplication
12/17/2025
 Con…
* 2-D Rotation with Homogenous Coordinates
*Rotations can also be expressed using homogenous
coordinates.
*The following equations are similar to the form of the
2-D rotation given in Eqs.
*(8)-(11),with the exception that the rotation matrix R
has an extra row and extra column.

12/17/2025
 Con…..
*Therefore before.
*px =px cos - pysin
*
and p y =pycos + pxsin , which is the same outcome as
2-D Scaling with Homogenous Coordinates
Finally, we can also express scaling using homogeneous
coordinates, as shown by the following equations.

12/17/2025
 Con…..
*Therefore
*px = Sx px and py = Sy py , exactly the same as before.
Matrix Composition
*As we saw in Section 2, the use of homogenous
coordinates allows us to compose a sequence of
transformations into a single matrix.
*This can be very useful in the graphics viewing pipeline
(see next chapter), but also allows us to define different
types of transformation from those we have already seen.
*For example, the rotation matrix we introduced only
rotates about the origin, but often we may want to apply a
rotation about a different point (a pivot point).
*Using matrix composition, we can achieve this using the
following sequence of transformations:
12/17/2025
Con….
*Translate from pivot point to origin
*Rotate about origin
*Translate from origin back to pivot point
*An example of this sequence of transformations is shown
above.
*Here we perform a rotation about the pivot point (2,2) by
translating by (-2,-2) to the origin, rotating about the
origin and then translating by (2,2) back to the pivot
point.
*Let us denote our transformations as follows:
*T1 is a matrix translation by (-2,-2)
*R is a matrix rotation by θo about the origin
*T2 is a matrix translation by (2,2)
12/17/2025
 con…..

*Therefore, using homogenous coordinates we can

compose all three matrices into one composite
transformation, C:
*C = T2RT1
………………………………………………………………….. (24)
*The composite matrix C can now be computed from the
three constituent matrices T2, R and T1, and represents a
rotation about the pivot point (2,2) by θo.
*Note from Eq. (24) that T1 is applied first, followed by R
and then T2.
*For instance, if we were to apply the three
transformations to a point P the result would be
*P’ = T2RT1P.
*Therefore because T1 is right next to the 12/17/2025
point P it gets
applied first, followed by the next transformation to the
 Con…

Fig: Composing Transformations to Achieve Rotation about an

Arbitrary Pivot Point

12/17/2025
 Con…
*Matrix composition example:
*There is triangle ABC A(0,0),B(1,1) and C(5,2).scale the
image twice as large and the translate it one unit to the
left.
*Solution: we have to
*Scale S(sx,sy)
*and translate T(tx,ty)
*Move right => tx is positive, Move left => tx is negative
*Move upward =>ty is positive, move downward =>ty is
negative
*Sx=2,sy=2
*tx=-1,ty=0

12/17/2025
 Con…
*Object matrix
* x1 x2 x3 0 1 5
* 0= y1 y2 y3= 0 1 2
* 1 1 1 1 1 1
*Scale matrix
*S= Sx 0 0 2 0 0
* 0 Sy 0 = 0 2 0
* 0 0 1 0 0 1
*Translation matrix
*T=1 0 tx 1 0 -1
* 0 1 ty = 0 1 0
* 0 0 1 0 0 1

12/17/2025
 Con…
*Solution:
*o= 1 0 -1 2 0 0 0 1 5
* 0 1 0 0 2 0 0 1 2
* 0 0 1 0 0 1 1 1 1

o= 2 0 -1 0 1 5
0 2 0 0 1 2
0 0 1 1 1 1

o= -1 1 9 A(-1,0)
0 2 4 B(1,2)
1 1 1 C(9,4)

12/17/2025
 Con…..
*3-D Matrix Transformations
*The concept of homogenous coordinates is easily extended
into 3-D: we just introduce a fourth coordinate in addition
to the x, y and z-coordinates.
*In this section we review the forms of 3-D translation,
rotation and scaling matrices using homogeneous
coordinates.
* 3-D Translation with Homogenous Coordinates
*The 3-D homogeneous coordinate’s translation matrix is
similar in form to the 2-D matrix, and is given by:

12/17/2025
 Con…
We can see that 3-D translations are defined by three
translation parameters: tx, ty and tz.
We apply this transformation as follows:

Therefore px = px + tx , p y = py + ty and p z =

pz + tz .
3-D Scaling with Homogeneous Coordinates

12/17/2025
 Con……
Similarly, 3-D scaling are defined by three scaling
parameters, Sx, Sy and Sz. The matrix is:

We apply this transformation as follows:

Therefore px = Sx px , py = Sy py and pz = Sz pz .

12/17/2025
 Con…..
3-D Rotation with Homogenous Coordinates
*For rotations in 3-D we have three possible axes of rotation:
the x, y and z axes.
*(Actually we can rotate about any axis, but the matrices are
simpler for x, y and z axes).
*Therefore the form of the rotation matrix depends on which
type of rotation we want to perform.
*For a rotation about the x-axis the matrix is:
*

12/17/2025
 Con…
Other transformation
*Shearing
*A transformation that distorts the shape of an
object such that the transformed shape
appears as if the object were composed of
internal layers that had been caused to slide
over each other is called a shear.
*Two common shearing transformations are
those that shift coordinate x values and those
that shift y values.
*x- direction shear relative to the x axis is
produced with the transformation matrix
12/17/2025
 Con……

Which transforms coordinate positions as

x’ = x + shx .y and y’ = y

12/17/2025
 Con…..
*A y-direction shear relative to the y axis is produced with
the transformation matrix

Which transforms the coordinate positions as

x’ = x and y’ = shy . x + y

Reflection

12/17/2025
 Con…..

*A reflection is a transformation that produces a mirror

image of an object.
* The mirror image for a two- dimensional reflection is
generated relative to an axis of reflection by rotating the
object 180̊ about the reflection axis.
*We can choose an axis of reflection in the xy plane or
perpendicular to the xy plane.
*When the reflection axis is a line in the xy plane, the
rotation path about this axis is in a plane perpendicular to
the xy plane.
*For reflection axes that are perpendicular to the xy plane,
the rotation path is in the xy plane.
* Following are examples of some common reflections.

12/17/2025
 Con….

*A reflection about the x axis flips y coordinates while

keeping x coordinates the same.
*The matrix for this transformation is

12/17/2025
 Con….
A reflection about the y axis flips x coordinates while
keeping y coordinates the same. The matrix for this
transformation is

12/17/2025
 Con….
Affine transformations
* Affine transformations (in two dimensions, three dimensions, or
higher dimensions) have the general properties that parallel
lines are transformed in to parallel lines and finite points map to
finite points.
* Translation, rotation, scaling, reflection, and shear are examples
of affine transformations.
* We can always express any affine transformation as some
composition of these five transformations.
* An affine transformation involving only translation, rotation, and
reflection preserves angles and lengths, as well as parallel lines.
* For each of these three transformations, line lengths and the
angle between any two lines remain the same after the
transformation.

12/17/2025
 Con….
Right-Handed vs. Left-Handed Coordinate Systems
 When referring to 3-D coordinate systems, we can distinguish
between right-handed and left-handed coordinate systems.
 For a right-handed coordinate system, if we extend the
thumb and first two fingers of our right-hand so that they are
perpendicular to each other, then the first finger represents
the direction of the x-axis, the second finger the y-axis and
then thumb points in the direction of the z-axis.
 Contrast to this a left-handed coordinate system in which we
do the same thing with our left hand.
 In this case, if we align the x and y axes of the right-handed
and left-handed coordinate systems, the z-axes will point in
opposite directions.
 The most common type of coordinate system used in
computer graphics is the right-handed coordinate system,
but when using a general purpose graphics package it is
12/17/2025
important to know which type of coordinate system it uses.
Con….
Right-Handed vs. Left-Handed Coordinate Systems

Fig: Right-handed Coordinate System

12/17/2025
Con….
Right-Handed vs. Left-Handed Coordinate Systems
Before we look at how to define matrix transformations in
OpenGL we must introduce the concepts of premultiplying
and postmultiplying.
Whenever a matrix is multiplied by another existing matrix
we can either premultiply or postmultiply.
Often, when using a general purpose graphics package we
need to specify a sequence of transformations, so we need
to know whether the package will compose these
transformations by premultiplying or postmultiplying.

12/17/2025
 Con….
Right-Handed vs. Left-Handed Coordinate Systems
*This is very important because which of these two techniques
the package uses determines the order in which we should
specify our transformations.
* For example, suppose we specify a sequence of matrix
transformations A, B and C (in this order). Using
premultiplying, the composite transformation will be ABC,
whereas using postmultiplying it will be CBA.
*We have already seen in the above discussion that matrix
multiplication is not commutative, so these two results will be
different.
*We can see from this example that when postmultiplying we
must define our sequence of transformations in the reverse
order to that in which we want them to be applied.
* The result of postmultiplying the matrices A, B and C is CBA,
so A is applied first, followed by B and then12/17/2025
C.
Con….
Whenever we apply a transformation in OpenGL it is applied
to a current matrix.
In fact, as we will see, in OpenGL we have several current
matrices, but for the moments just remember that there is a
current matrix.
Almost all transformations in OpenGL is postmultiply by this
current matrix.
Therefore when applying a sequence of transformations we
must define them in reverse order.
We will see an example of this later. OpenGL always uses a
right-handed coordinate system.

12/17/2025
 Con….
* Now let us look at OpenGL functions for defining transformations. In
total, there are six functions that affect the current matrix:
* glTranslate*(tx,ty,tz): Postmultiply the current matrix by a translation
matrix formed from the translation parameters tx, ty and tz.
* glRotate*(θ,vx,vy,vz): Postmultiply the current matrix by a rotation
matrix that rotates by
* θo about the axis defined by the direction of the vector (vx,vy,vz).
* glScale*(Sx,Sy,Sz): Postmultiply the current matrix by a scaling matrix
formed from the scale factors Sx, Sy and Sz.
* glLoadMatrix*(elements16): Replaces the current matrix with the 16-
element array. The array should be defined in column-major order (i.e.
the first four elements represent the first column; the next four
represent the second column, etc.).
* glMultMatrix*(elements16): Postmultiplies the current matrix with the
16-element array
* element16. The array should be defined in column-major.
* glLoadIdentity(elements16): Replaces the current matrix with a 4x4
12/17/2025
identity matrix.
 Con….
*Each current matrix in OpenGL has an associated matrix
stack. This is a standard FIFO stack that can be used to
‘remember’ different transformations.
*In fact, the current matrix is actually just the top matrix on
the matrix stack.
*let us introduce the two functions for manipulating the stack:
*glPushMatrix: Copy the current matrix to the next position
down in the stack, push all other matrices down one position.
*The current matrix (i.e. the top matrix on the stack) is left
unchanged.
*glPopMatrix: Destroy the current matrix, and move all other
matrices on the stack up one position.
*
*To finish this chapter, let us look at an example of using these
OpenGL routines to define a composite transformation.
12/17/2025
Con….

Thank you!!!!!!!!!!

12/17/2025