CHAPTER-5

Geometric Transformation
Bensa Daye Campus Compiled by: Kassawmar M.
1

Contents
 Transformation
 Types of transformation
 Matrix representation
 Transformation in opengl
 What is Transformation?
2

 Transformation means changing some graphics into something else by applying

rules.
 A Cartographer can change the size of charts and topographical maps.
 So if graphics images are coded as numbers, the numbers can be stored in
memory.
 These numbers are modified by mathematical operations called as
Transformation.
 Operations that are applied to the geometric description of an object to change
its position, orientation, or size are called geometric transformations.
 Preimage Transform to Image.
 Cont…
3

 Transformations play an important role in computer

graphics to reposition the graphics on the screen and change
their size or orientation.
 The purpose of using computers for drawing is
 To provide facility to user
 To view the object from different angles,

 Enlarging or reducing the scale or shape of object

 Cont…
4

Categories of Geometric Transformation

 Rigid Transformation: Does not change the size and shape of
preimage. Translation, Rotation, Reflection.
 Non-Rigid Transformation: Change the size but not the shape
of the preimage. Scaling
 2D Matrix Transformations
5

 2x2 matrices can be multiplied according to the following equation:

 For example,

 Matrix multiplication is not commutative. In other words, for two

matrices A and B,AB≠BA.
 We can see this from the following example.
 Cont….
6

• 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.
 2-D Translation
7

 Moving an object in space without changing its size, shape or

orientation is called Translation.
 Translation is a movement of objects without deformation.
 Translation is a mechanism used to move the object from one
position to another position on the screen.
 For translating polygon, each vertex of the polygon is converted to a
new position then objects drawn in new coordinates.
 To translate a point from coordinate position (x, y) to another (x1, y1)
 Cont…
8

 We add algebraically the translation distances Tx and Ty to original coordinate.

 Therefore, in 2-D, we must define two translation parameters:
 The x-translation tx

 The y-translation ty

 Therefore, we can see that the relationship between points

before and after the translation is:

 The pair (tx, ty) is called the translation vector or shift vector.
 Cont…
9

 For example,

Figure: 2-D Translation

 Given a Point with coordinates (2, 4). Apply the translation with
distance 4 towards x-axis and 2 towards the y-axis. Find the new
coordinates without changing the radius?
 Cont…
10

The translation pair (Δ X, ΔY) is called as shift vector.

 2D Scaling
11

 Scaling is a process or technique used to resize the object in 2-D plane.

 Expanding or contracting an object without change its shape or orientation.
 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.

 Cont…
12

 To scale a point P by scale factors Sx and Sy we apply the scaling matrix S:

 Therefore, we can see that the relationship between points before and
after the scaling is:
 Cont…
13

For example,
 Scaling transform can be used to make objects bigger or smaller.
 Cont…
14
 Cont…
15
 Cont…
16

 If the picture to be enlarged to twice its original size then λx = λy =2.

 If scaling factors are one, then the size of the object will not be reduced or
enlarged .
 If λx and λy are not equal then scaling will occur but it will elongate or distort
the picture.
 If scaling factors are less than one, then the size of the object will be reduced.
 If scaling factors are higher than one, then the size of the object will be
enlarged.
 If scaling factors with values less than one will move the object closer to
coordinate origin,
 while a value higher than one will move coordinate position farther from
origin.
 2D Rotation
17

 Rotation is a process of rotating an object about a fixed point without

change its size and shape.
 It is a process of changing the angle of the object which can be
clockwise or anticlockwise, while we have to specify the angle of
rotation and rotation point.
 A rotation point is also called a pivot point.
 The positive value of the rotation angle rotates an object in an anti-
clockwise direction
 while the negative value of the rotation angle rotates an object in a
clockwise direction.
 Cont…
18

 Initial co-ordinates of the object O = (Xold,Yold)

 Initial angle of the object O with respect to origin = Φ
 Rotation angle = θ
 New co-ordinates of the object O after rotation = (Xnew, Ynew)
 Cont…
19
 Cont…
20
 Cont…
21

 Problem Statement: Given a triangle with corner coordinates (0,

0), (1, 0) and (1, 1). Rotate the triangle by 90 degrees anti-
clockwise direction and find out the new coordinates.
 Solution:
We always rotate a polygon by rotating each of its vertexes with the
same rotation angle.
 Given,
 Old corner coordinates of the triangle = A (0, 0), B (1, 0), C (1, 1)
 Rotation angle = θ = 90º
 Cont…
22

 For the Co-ordinate A (0, 0)

Let the new coordinates of corner A after rotation = (Xnew,Ynew).
When we apply the rotation equation, we get-
Xnew = Xold x cosθ –Yold x sinθ
= 0 x cos90º – 0 x sin90º
=0-0
=0
Ynew = Xold x sinθ + Yold x cosθ
= 0 x sin90º + 0 x cos90º
=0+0
=0
 Thus, the new co-ordinates of corner A we get after rotation is = (0, 0).
 Cont…
23

 For the Coordinate B (1, 0)

Let the new coordinates of corner B after rotation = (Xnew,Ynew).
Xnew = Xold x cosθ –Yold x sinθ
= 1 x cos90º – 0 x sin90º
=0–0
=0
Ynew = Xold x sinθ + Yold x cosθ
= 1 x sin90º + 0 x cos90º
=1+0
=1
Thus, the new co-ordinates of corner B that we get after rotation are = (0, 1).
 Cont…
24

 For the Coordinate C (1, 1)

Let the new coordinates of corner C after rotation = (Xnew,Ynew).
Xnew = Xold x cosθ –Yold x sinθ
= 1 x cos90º – 1 x sin90º
=0–1
= -1
Ynew = Xold x sinθ + Yold x cosθ
= 1 x sin90º + 1 x cos90º
=1+0
=1
Thus, the new co-ordinates of corner C we get after rotation is = (-1, 1).
Thus, the new co-ordinates of the triangle after rotation are = A (0, 0), B (0, 1), C (-1, 1).
 2D Shearing
25

 A transformation that slants the shape of an object is called the shear transformation.
 There are two shear transformations X-Shear and Y-Shear.

 One shifts X coordinates values and other shiftsY coordinate values.

 However; in both the cases only one coordinate changes its coordinates and other
preserves its values.
 Shearing is also termed as Skewing.
X-Shear
 In 2D, the X-Shear preserves the Y coordinate and changes are made to X coordinates,
which causes the vertical lines to tilt right or left.
 Shearing in X-axis is achieved by using the following shearing equations-

Xnew = Xold + Shx x Yold

Ynew = Yold
 Cont…
26
 Cont…
27

Y-Shear
 In 2D, the Y-Shear preserves the X coordinates and changes the Y coordinates
which causes the horizontal lines to transform into lines which slopes up or down.
 Shearing in Y axis is achieved by using the following shearing equations-
 Xnew = Xold
 Ynew = Yold + Shy x Xold
 Examples
28

 Given a triangle with points (1, 1), (0, 0) and (1, 0). Apply
shear parameter 2 on X axis and 2 on Y axis and find out
the new coordinates of the object.
 2D-Reflection
29

 Flipping an object across a line without changing its size or

shape.
 The mirror image can be either about x-axis or y-axis.
 Types of Reflection:
 Reflection about the x-axis
 Reflection about the y-axis
 Reflection about an axis perpendicular to xy plane and passing
through the origin
 Reflection about line y=x
 Reflection about line y=-x
 Cont…
30

1. Reflection about x-axis: The object can be reflected about x-axis

with the help of the following matrix

In this transformation value of x will remain same whereas the value of y will become negative.
 Cont…
31

2. Reflection about y-axis: The object can be reflected about y-axis with
the help of following transformation matrix.

Here the values of x will be reversed, whereas the value of y will remain the same. The
object will lie another side of the y-axis.
 Cont…
32

3. Reflection about an axis perpendicular to xy plane and passing

through origin:
In the matrix of this transformation is given below

The value of x and y both will be reversed. This is also called as half revolution about the
origin.
 Cont…
33

4. Reflection about line y=x:

 The object may be reflected about line y = x with the help of following

transformation matrix

5. Reflection about line y=-x: use the above matrix by replacing 1 with -1
 Cont…
34

 Example: A triangle ABC is given. The coordinates of A, B, C

are given as
A (3, 4)
B (6, 4)
C (4 8)
 Find reflected position of triangle i.e., to the x-axis.
a (3, 4) becomes a1 (3, -4)
b (6, 4) becomes b1 (6, -4)
c (4, 8) becomes c1 (4, -8)
 Homogenous Coordinates
35

 Introduce an extra homogeneous parameter to standard Cartesian

coordinates.
 The homogenous parameter normally has the value 1.
 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.
 Cont…
36

 In short, we have to use 3×3 transformation matrix instead of 2×2 transformation

matrix.
 The relationship between homogeneous points and their corresponding Cartesian
points is:

 In this system, we can represent all the transformation equations in matrix

multiplication.
 Any Cartesian point P(X,Y) can be converted to homogenous coordinates by P’ (X/h,
Y/h, 1).
 Cont…
37

2-D Translation with Homogenous Coordinates

 Now we can express a translation transformation using a single
matrix multiplication, as shown below.

 Therefore 2-D Translation with homogenous coordinates exactly the

same as before, but we used a matrix multiplication instead of an
addition.
 Cont…
38

2-D Scaling with Homogenous Coordinates

 We can also express scaling using homogeneous coordinates, as
shown by the following equations.

 Therefore 2-D Scaling with Homogenous coordinates exactly the

same as before.
 Cont….
39

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
before, with the exception that the rotation matrix R has an extra
row and extra column.

 Therefore 2-D Rotation with Homogenous coordinates, which is the same

outcome as before.
 Cont…
40
 3D Transformation
41

 Going to 3D, means adding one more coordinate, the z direction

 All 3D vectors are now expressed as 4-element columns in
homogeneous coordinates
 All transformations become 4x4 matrixes

 Nothing else changes

Transformations can change the object’s

o Position(translation)

o Size(scaling)

o Orientation(rotation)

o Shape(shear)
 3D Translation
42

 Given a 3D object with coordinate points A(0, 3, 1), B(3, 3, 2), C(3, 0, 0),
D(0, 0, 0). Apply the translation with the distance 1 towards X axis, 1
towards Y axis and 2 towards Z axis and obtain the new coordinates of the
object.
 New coordinates of the object = A (1, 4, 3), B(4, 4, 4), C(4, 1, 2), D(1, 1, 2).
 3D Scaling
43

 Initial coordinates of the object O = (Xold, Yold, Zold)

 Scaling factor for X-axis = Sx
 Scaling factor for Y-axis = Sy
 Scaling factor for Z-axis = Sz
 New coordinates of the object O after scaling = (Xnew, Ynew, Znew)
 This scaling is achieved by using the following scaling equations-
 Xnew = Xold x Sx
 Ynew = Yold x Sy
 Znew = Zold x Sz
 Cont…
44

Example Given a 3D object with coordinate points A(0, 3, 3), B(3, 3, 6), C(3, 0, 1), D(0, 0,
0). Apply the scaling parameter 2 towards X axis, 3 towards Y axis and 3 towards Z axis and obtain
the new coordinates of the object.
 3D Shearing
45

Shearing in X Axis- 1. Given a 3D triangle with points (0, 0, 0),

 Xnew = Xold
 Ynew = Yold + Shy x Xold
(1, 1, 2) and (1, 1, 3). Apply shear
 Znew = Zold + Shz x Xold parameter 2 on X axis, 2 on Y axis and 3
Shearing in Y Axis- on Z axis and find out the new coordinates
 Xnew = Xold + Shx x Yold of the object in X Axis.
 Ynew = Yold
 Znew = Zold + Shz x Yold
Shearing in Z Axis-
 Xnew = Xold + Shx x Zold
 Ynew = Yold + Shy x Zold
 Znew = Zold
 3D Rotation
46

 Consider a point object O has to be rotated from one angle to another in a 3D

plane.
 Let-
 Initial coordinates of the object O = (Xold,Yold, Zold)
 Initial angle of the object O with respect to origin = Φ
 Rotation angle = θ
 New coordinates of the object O after rotation = (Xnew,Ynew, Znew)
 In 3 dimensions, there are 3 possible types of rotation-
 X-axis Rotation
 Y-axis Rotation
 Z-axis Rotation
 Cont..
47

For X-Axis Rotation-

Example Given a homogeneous point (1, 2, 3).
 Xnew = Xold

 Ynew = Yold x cosθ – Zold x sinθ

Apply rotation 90 degree towards X,Y and Z
 Znew = Yold x sinθ + Zold x cosθ
axis and find out the new coordinate points.
For Y-Axis Rotation-  New coordinates after rotation (1, -3, 2) in
 Xnew = Zold x sinθ + Xold x cosθ the X direction
 Ynew = Yold
 Thus, New coordinates after rotation = (3,
 Znew = Zold x cosθ – Xold x sinθ

For Z-Axis Rotation

2, -1) in the Y direction
 Xnew = Xold x cosθ – Yold x sinθ  New coordinates after rotation = (-2, 1,
 Ynew = Xold x sinθ + Yold x cosθ 3). in the Z direction
 Znew = Zold
 Rotation in homogenies coordinate form
48
 Matrix composition
49

 To perform a sequence of transformation such as translation followed

by rotation and scaling, we need to follow a sequential process −
 Translate the coordinates
 Rotate the translated coordinates, and then
 Scale the rotated coordinates to complete the composite transformation.
 Ex: find out the coordinates s figure bounded by the coordinates
(1,1)(3,4),(5,7), (10,3) when rotated about a point (8,8) by 30
degree in clockwise direction and scaled 2 unit in the x direction and
3 unit in the y direction
 Geometric Transformation in openGL
50

There are two ways to specify a geometric transformation:

 Pre-defined transformations: glTranslate, glRotate and glScale.

 Arbitary transformations by direct specification of matrices:

glLoadMatrix, glMultMatrix
 Parameters

 Translation: translation amount in x, y, z axes

 Rotation: angle, orientation of the rotation axis that passes through
the origin
 Scaling: scaling factors for three coordinates
 Basic OpenGL Transformations
51

glTranslate {f,d}(dx, dy, dz)

 Causes subsequently defined coordinate positions to be translated by the vector
(dx,dy,dz), where dx, dy, dz are either floating-point or double precision
numbers.
 Objects drawn after this call are translated
 For 2D applications set dz = 0
 Eg.
glTranslatef(-0.4, -0.1, 0.0);
glRectf(0.1,0.2,0.4,0.3);
 Cont…
52

glRotate {f,d}(angle, vx, vy, vz)

 Causes subsequently defined coordinate positions to be rotated by angle degrees
about the axis (vx,vy,vz) through the origin. The angle parameter specifies the
angle of rotation in degrees.
 Exmple
glRotatef(90, 0.0, 0.0,1.0);
glRectf(0.1,0.2,0.4,0.3);
 The effect of the above rotation shows the rectangle rotate 90 degrees about the z-
axis
 Cont…
53

glScale {f,d}(sx, sy, sz)

 Multiplies the current matrix by a matrix that stretches, shrinks,
or reflects an object along the axes.
 Each x, y, and z coordinate of every point in the object is
multiplied by the corresponding argument x, y, or z.
 With the local coordinate system approach, the local coordinate

axes are stretched, shrunk, or reflected by the x, y, and z

factors, and the associated object is transformed with them.
 Cont…
54

 glScale*() is the only one of the three modeling transformations

that changes the apparent size of an object
 Scaling with values greater than 1.0 stretches an object, and
using values less than 1.0 shrinks it.
 Scaling with a -1.0 value reflects an object across an axis.
 The identity values for scaling are (1.0, 1.0, 1.0).
 Eg.
 glScalef(-0.5, 1.0, 1.0);
 glRectf(0.1,0.2,0.4,0.3);
 Transformation order
55

 Order of transformation dependent upon position of call in a

code.
 Example:
glTranslatef (1.0,0.0,0.0);
glRotatef (45.0,0.0,1.0,0.0);
glScalef (2.0,2.0,2.0)
glBegin ()
glVertex2f (x,y);
glVertex2f(x,f);
glEnd
Transformation element to the object gets scale first then Rotate FinallyTranslated.
 Cont…
56

 Generally, the following six routines can be used in OpenGL to

define transformations:
 glTranslate*(tx,ty,tz)

 glRotate*(θ,vx,vy,vz)

 glScale*(Sx,Sy,Sz)

 glLoadMatrix*(elements16)

 glMultMatrix*(elements16)

 glLoadIdentity(elements16)
 Cont…
57

 glTranslate*(tx,ty,tz) – a translation matrix formed from the

translation parameters tx, ty and tz.
 glRotate*(θ,vx,vy,vz) – a rotation matrix that rotates by θ about the
axis defined by the direction of the vector (vx,vy,vz).
 glScale*(Sx,Sy,Sz) – a scaling matrix formed from the scale factors
Sx, Sy and Sz.
 OpenGL Matrix Stacks
58

 OpenGL has the following basic stack operations

 glLoadIdentity(): Sets the current matrix to the identity matrix

 glLoadMatrix*(M): Loads a given matrix over the current matrix

 glMultMatrix*(M): Multiplies the current matrix by a given matrix and

replaces the current matrix with this result.
 glPushMatrix(): Pushes a copy of the current matrix on top the stack

 glPopMatrix(): Pops the current matrix off the stack

 Destroy the current matrix, and move all other matrices on the stack
up one position.
 Cont…
59
 Example: Draw a rotated triangle
60

glBegin(GL_TRIANGLES)
glPushMatrix(); // save the current matrix
glRotatef(45, 0, 0, 1); // rotate by 45 degrees
glVertex2i(2, 2); //first vertex
glVertex2i(50, 2); // second vertex
glVertex2i(50, 50); //third vertex
glPopMatrix(); // restore the old matrix
glEnd();
glMatrixMode(GL_PROJECTION); // set projection matrix
glLoadIdentity(); // initialize to identity
gluOrtho2D(left, right, bottom top); // set the drawing area
glMatrixMode(GL_MODELVIEW); // restore Model view mode
61

45