1|Page

Chapter 3: 2D Transformations
Introduction                                                                                          
The term Transformation is generally referred to as converting a graphic into another graphic by
applying some rules or algorithms. Sometimes an image or picture can be a combination of lines,
rectangle, circle, and triangle. If we draw the basic and combination of pictures, then there
should be a need to transform these images. Now we can perform the following actions to
transform the images-

 We can change the position of an image.

 We can increase or decrease the size of an image.
 We can change the angle of the image.

By using the above actions, we will find a new image; this process is called Transformation. We
can use some algorithms to produce new pictures.
 The object transformation includes two important points-

 Geometric Transformation: When we are moving the picture, and the background is

fixed, then it is a Geometric Transformation.
 Coordinate Transformation: When we are moving the background, and the picture is
fixed, then it is Coordinate Transformation.

Types of Transformation

CPU College Chapter 3 Computer Graphics

2|Page

There are two basic kinds of Translation.

1.Two-Dimensional(2D) Transformation:
“When we translate, rotate, and scale object in the two-dimensional plane, then it is called
a Two-Dimensional Transformation.” A two-dimensional plane consists of the x and y-axis.
The Two-Dimensional Transformation includes-

 2D Translation: “Translation is a mechanism used to move the object from one position
to another position on the screen.”
 2D Rotation: “Rotation is a process used to rotate the object from origin to a particular
angle.”
 2D Scaling: “Scaling is a process or technique used to resize the object in two-
dimensional plane.”
 2D Reflection: “Reflection is a mechanism or process in which we can rotate the object
at the angle of 180°”.
 2D Shearing: “Shearing is a process that is used to perform slanting on the object.” It is
also called “Skewing.”

2.Three-Dimensional Transformation:
“When we translate, rotate, and scale object in the three-dimensional plane then, it is
called Three-Dimensional(3D) Transformation”. A three-dimensional plane consists of x, y,
and z-axis. The Three-Dimensional Transformation includes-

 3D Translation: “Translation is a mechanism used to move the object from one position
to another position on the three-dimensional plane.”
 3D Rotation: “Rotation is a process used to rotate the object from origin to a particular
angle in three-dimensional plane.”
 3D Scaling: “Scaling is a process or technique used to resize the object in three-
dimensional plane”.
 3D Reflection: “Reflection is a mechanism or process in which we can rotate the object
at the angle of 180° in three-dimensional plane.”
 3D Shearing: “Shearing is a process that is used to perform slanting on the object.” It is
also called “Skewing”. It also includes z-axis.

CPU College Chapter 3 Computer Graphics

3|Page

1. 2D Translation
It is the straight-line movement of an object from one position to another is called
Translation. Here the object is positioned from one coordinate location to another.
Translation of point:
To translate a point from coordinate position (x, y) to another (x 1 y1), we add
algebraically the translation distances Tx and Ty to original coordinate.

x1=x+Tx
y1=y+Ty
The translation
pair (Tx,Ty) is called as shift vector. Translation is a movement of objects without deformation.
Every position or point is translated by the same amount. When the straight line is translated,
then it will be drawn using endpoints.

For translating polygon, each vertex of the polygon is converted to a new position. Similarly,
curved objects are translated. To change the position of the circle or ellipse its center coordinates
are transformed, then the object is drawn using new coordinates.

Let P is a point with coordinates (x, y). It will be translated as (x1 y1).

Consider a point object O has to be moved from one position to another in a 2D plane.

Let-

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

 New coordinates of the object O after translation = (Xnew, Ynew)

CPU College Chapter 3 Computer Graphics

4|Page

 Translation vector or Shift vector = (Tx, Ty)

 Given a Translation vector (Tx, Ty)-

 Tx defines the distance the Xold coordinate has to be moved.

 Ty defines the distance the Yold coordinate has to be moved.

This translation is achieved by adding the translation coordinates to the old coordinates of the
object as-

 Xnew = Xold + Tx (This denotes translation towards X axis)

 Ynew = Yold + Ty (This denotes translation towards Y axis)

 In Matrix form, the above translation equations may be represented as-

 The homogeneous coordinates representation of (X, Y) is (X, Y, 1).

 Through this representation, all the transformations can be performed using matrix /
vector multiplications.
 The above translation matrix may be represented as a 3 x 3 matrix as-

Example 1: An object is placed with respect to origin on (2,1). Now move the object away from the
origin by 2 steps in x and 3 steps in y. What would be new coordinates to the moved object.

I. The old coordinates of the object are x=2 and y =1. Translation coordinate in x direction (tx) = 2
and Translation coordinate in y direction (ty) =3. Let’s call the new coordinates as x’ and y’.

CPU College Chapter 3 Computer Graphics

5|Page

II. Since the translated object is moving away from origin, hence it is a positive translation and new
coordinates could be obtained in simple arithmetic as x’=x+tx and y’=y+ty.
III. Computer Graphics only deal with matrix calculations because all the transformation would not
be as simple as in translation. Translation transformation of a single element at (x,y) coordinate is
displayed as follows.
IV. Just substitute the values of x, y as (2,1) with tx=2 and ty=1. Multiply all the matrices to get the
result. This will give you new coordinates (x’,y’) of point (x,y).

S-5: After Multiplication we would get the new element x’=2+2 = 4 and y’=1+3=4. The new element is
also displayed in last figure.

Example 2: Giv en a square with coordinate points A(0, 3), B(3, 3), C(3, 0), D(0, 0). Apply the
translation with distance 1 towards X axis and 1 towards Y axis. Obtain the new coordinates of
the square.
Given-
 Old coordinates of the square = A (0, 3), B(3, 3), C(3, 0), D(0, 0)
 Translation vector = (Tx, Ty) = (1, 1)

For Coordinates A(0, 3) : Let the new coordinates of corner A = (Xnew, Ynew). Applying the translation
equations, we have-

CPU College Chapter 3 Computer Graphics

6|Page

 Xnew = Xold + Tx = 0 + 1 = 1

 Ynew = Yold + Ty = 3 + 1 = 4 ::Thus, New coordinates of corner A = (1, 4).

For Coordinates B(3, 3) : Let the new coordinates of corner B = (Xnew, Ynew). Applying the translation
equations, we have-

 Xnew = Xold + Tx = 3 + 1 = 4

 Ynew = Yold + Ty = 3 + 1 = 4 ::Thus, New coordinates of corner B = (4, 4).

For Coordinates C(3, 0): Let the new coordinates of corner C = (Xnew, Ynew). Applying the translation
equations, we have-

 Xnew = Xold + Tx = 3 + 1 = 4

 Ynew = Yold + Ty = 0 + 1 = 1 ::Thus, New coordinates of corner C = (4, 1).

For Coordinates D(0, 0) : Let the new coordinates of corner D = (Xnew, Ynew). Applying the translation
equations, we have-

 Xnew = Xold + Tx = 0 + 1 = 1

 Ynew = Yold + Ty = 0 + 1 = 1 ::Thus, New coordinates of corner D = (1, 1).

Thus, New coordinates of the square = A (1, 4), B(4, 4), C(4, 1), D(1, 1).

2. 2D Rotation
2D Rotation is a process of rotating an object with respect to an angle in a two-dimensional
plane. Consider a point object O has to be rotated from one angle to another in a 2D plane. Let-
Initial coordinates of the object O = (Xold, Yold) Initial angle of the object O with respect to origin
=Φ

The Rotation of any object depends upon the two points.

CPU College Chapter 3 Computer Graphics

7|Page

Rotation Point: It is also called the Pivot point and the Rotation Angle: It is denoted by Theta ( ).

We can rotate an object in two ways-

 Clockwise: An object rotates clockwise if the value of the Rotation angle is negative (-).
 Anti-Clockwise: An object rotates anti-clockwise if the value of the Rotation angle is positive
(+).

We can apply Rotation on following objects-

 Straight Lines  Polygon

 Curved Lines  Circle

For Example-
Rotation of a Point: If we want to Rotate a point A (P0, Q0) that has a Rotation angle   with
distance r from origin to A` (P1, Q1) that has a Rotation angle  . Then, we can rotate by
following Rotation equation-

We can represent the coordinates of point A (P0, Q0) by using standard trigonometry-

We can also define point A` (P1, Q1) in the same way-

By using equation (1) (2) (3) (4), we will get-

CPU College Chapter 3 Computer Graphics

8|Page

We can also represent the Rotation in the form of matrix-

Homogeneous Coordinates Representation: The Rotation can also be represented in the form

of 3 x 3 Rotation matrix-

Example- A line segment with the starting point (0, 0) and ending points (5, 5). Apply
30-degree rotation anticlockwise direction on the line. Find the new coordinates of the
line?
Solution- We can rotate the straight line by its endpoints with the same angle.

We have, (P0, Q0) = (0, 0)

Rotation Angle () = 30°
Let the new coordinates of line = (P1, Q

CPU College Chapter 3 Computer Graphics

9|Page

We can apply the rotation matrix, then, Thus, the new endpoint coordinates of the line are
= (P1, Q1) = (1.83, 6.83)

Problem-01: Given a line segment with starting point as (0, 0) and ending point as (4, 4). Apply
30 degree rotation anticlockwise direction on the line segment and find out the new coordinates
of the line.
Problem-02: Given a triangle with corner coordinates (0, 0), (1, 0) and (1, 1). Rotate the triangle
by 90 degree anticlockwise direction and find out the new coordinates.

3. 2D Scaling
In scaling, we can expend or compress the size of any object. We can apply scaling on the object
by multiplying the original coordinates with scaling factors. The term scaling factor is used to
define whether the size of an object is increased or decreased.

 Scaling may be used to increase or reduce the size of object.

 Scaling subjects the coordinate points of the original object to change.
 Scaling factor determines whether the object size is to be increased or reduced.
 If scaling factor > 1, then the object size is increased.
 If scaling factor < 1, then the object size is reduced.
We can represent the scaling factor by ‘Sx’ for the x- axis and ‘Sy’ for the y-axis. For Example-
If we want to scale an object that has R (P0, Q0) coordinate and the new coordinates of an object
are R` (P1, Q1) then the equation will be-

P1 = P0. Sx
Q1 = Q0. Sy

CPU College Chapter 3 Computer Graphics

10 | P a g e

We can also represent Scaling in the form of Matrix-

Homogeneous Coordinates Representation: The scaling is also represented in the form of 3 x 3 matrix-

Example: A Square object with the coordinate points P (1, 4), Q (4, 4), R (4, 1), T (1,1).
Apply the scaling factor 3 on the X-axis and 4 on the Y-axis. Find out the new
coordinates of the square?
Solution: We have,
Coordinates Points for Square = P (1, 4), Q (4, 4), R (4, 1), S (1, 1)
Scaling factor along with X axis (Sx) = 3
Scaling factor along with Y axis (Sy)= 4
Applying the equation to find the new coordinates-
For Coordinate P (1, 4)- Let the new Coordinate for P = (P1, Q1)
P1 = P0. Sx = 1 x 3 = 3
Q1 = Q0. Sy = 4 x 4 = 16 :The new Coordinates = (3, 16)
For Coordinate Q (4, 4)- Let the new Coordinate for Q = (P,1 Q1)
P1 = P0. Sx = 4 x 3 = 12
Q1 = Q0. Sy = 4 x 4 = 16 :The new Coordinates = (12, 16)
For Coordinate R (4, 1)- Let the new Coordinate for R = (P1, Q1)
P1 = P0. Sx = 4 x 3 = 12
Q1 = Q0. Sy = 1 x 4 = 4 The new Coordinates = (12, 4)
For Coordinate S (1, 1)- Let the new Coordinate for S = (P1, Q1)
P1 = P0. Sx = 1 x 3 = 3
Q1 = Q0. Sy = 1 x 4 = 4 The new Coordinates = (3, 4)

CPU College Chapter 3 Computer Graphics

11 | P a g e

 
Thus, the new coordinates for square after scaling = P (3, 16), Q (12, 16), R (12, 4), S (3,
4).
Problem-01: Given a square object with coordinate points A(0, 3), B(3, 3), C(3, 0),
D(0, 0). Apply the scaling parameter 2 towards X axis and 3 towards Y axis and obtain
the new coordinates of the object.

4. 2D Reflection
The Reflection is a mirror image of the original object. In the Reflection process, the size of the
object does not change.
We can represent Reflection by using four ways-
A. Reflection along X-axis: In this kind of Reflection, the value of X is positive, and the value
of Y is negative. We can represent the Reflection along x-axis by following equation-
X1 = X0
Y1 = -Y0
We can also represent Reflection in the form of matrix-

Homogeneous Coordinate Representation: We can also represent the Reflection along x-axis
in the form of 3 x 3 matrix-

CPU College Chapter 3 Computer Graphics

12 | P a g e

B. Reflection along Y-axis: In this kind of Reflection, the value of X is negative, and the value
of Y is positive. We can represent the Reflection along y-axis by following equation-
 X1 = -X0
 Y1 = Y0
We can also represent Reflection in the form of matrix-

Homogeneous Coordinate Representation: We can also represent the Reflection along

x-axis in the form of 3 x 3 matrix-

C. Reflection perpendicular to XY plane: In this kind of Reflection, the value of both X and
Y is negative. We can represent the Reflection along y-axis by following equation-
 X1 = -X0
 Y1 = -Y0

CPU College Chapter 3 Computer Graphics

13 | P a g e

We can also represent Reflection in the form of matrix-

Homogeneous Coordinate Representation: We can also represent the Reflection along with x-
axis in the form of 3 x 3 matrix-

D. Reflection along with the line: In this kind of Reflection, the value of X is equal to the
value of Y. We can represent the Reflection along y-axis by following equation-
 Y=X, then the points are (Y, X)
 Y= -X, then the points are (-Y, -X)
We can also represent Reflection in the form of matrix-

Homogeneous Coordinate Representation: We can also represent the Reflection along with x-
axis in the form of 3 x 3 matrix-

CPU College Chapter 3 Computer Graphics

14 | P a g e

 
Example-01: Given a triangle with coordinate points A(3, 4), B(6, 4), C(5, 6). Apply the
reflection on the X axis and obtain the new coordinates of the object. 
Given-
 Old corner coordinates of the triangle = A (3, 4), B(6, 4), C(5, 6)
 Reflection has to be taken on the X axis
For Coordinates A(3, 4) Let the new coordinates of corner A after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = Xold = 3
 Ynew = -Yold = -4 : Thus, New coordinates of corner A after reflection = (3, -4).
 For Coordinates B(6, 4) :Let the new coordinates of corner B after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = Xold =
6
 Ynew = -Yold = -4: Thus, New coordinates of corner B after reflection = (6, -4).
 For Coordinates C(5, 6) :Let the new coordinates of corner C after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = Xold =
5
 Ynew = -Yold = -6: Thus, New coordinates of corner C after reflection = (5, -6).
 Thus, New coordinates of the triangle after reflection = A (3, -4), B(6, -4), C(5, -6).
 

CPU College Chapter 3 Computer Graphics

15 | P a g e

Problem-02: Given a triangle with coordinate points A(3, 4), B(6, 4), C(5, 6). Apply the
reflection on the Y axis and obtain the new coordinates of the object.
Given-
 Oldcorner coordinates of the triangle = A (3, 4), B(6, 4), C(5, 6)
 Reflection has to be taken on the Y axis
For Coordinates A(3, 4): Let the new coordinates of corner A after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = -Xold = -3
 Ynew = Yold = 4 : Thus, New coordinates of corner A after reflection = (-3, 4).
 For Coordinates B(6, 4):Let the new coordinates of corner B after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = -Xold = -6
 Ynew = Yold = 4: Thus, New coordinates of corner B after reflection = (-6, 4).
 For Coordinates C(5, 6): Let the new coordinates of corner C after reflection = (Xnew, Ynew).
 Applying the reflection equations, we have-
 Xnew = -Xold = -5
 Ynew = Yold = 6 :Thus, New coordinates of corner C after reflection = (-5, 6).
 Thus, New coordinates of the triangle after reflection = A (-3, 4), B(-6, 4), C(-5, 6).
 

CPU College Chapter 3 Computer Graphics

16 | P a g e

5. 2D Shearing
Shearing deals with changing the shape and size of the 2D object along x-axis and y-axis. It is
similar to sliding the layers in one direction to change the shape of the 2D object. It is an ideal
technique to change the shape of an existing object in a two dimensional plane.

We can denote shearing with ‘SHx’ and ‘SHy.’ These ‘SHx’ and ‘SHy’ are called “Shearing

factor.” We can perform shearing on the object in two ways-

 Shearing along x-axis: In this, we can store the y coordinate and only change the x
coordinate. It is also called “Horizontal Shearing.”

We can represent Horizontal Shearing by the following equation-

X1 = X0 + SHx. Y0

Y1 = Y0

We can represent Horizontal shearing in the form of matrix-

Homogeneous Coordinate Representation: The 3 x 3 matrix for Horizontal Shearing is given

below-

CPU College Chapter 3 Computer Graphics

17 | P a g e

 Shearing along y-axis: In this, we can store the x coordinate and only change the y
coordinate. It is also called “Vertical Shearing.”

We can represent Vertical Shearing by the following equation-

X1 = X0

Y1 = Y0 + SHy. X0

We can represent Vertical Shearing in the form of matrix-

Homogeneous Coordinate Representation: The 3x3 matrix for Vertical Shearing is given

below-

Example: A Triangle with (2, 2), (0, 0) and (2, 0). Apply Shearing factor 2 on X-axis and 2 on
Y-axis. Find out the new coordinates of the triangle?     

CPU College Chapter 3 Computer Graphics

18 | P a g e

Solution: We have, The coordinates of triangle = P (2, 2), Q (0, 0), R (2, 0)

 Shearing Factor for X-axis = 2

 Shearing Factor for Y-axis = 2 Now, apply the equation to find the new coordinates.

Shearing for X-axis: For Coordinate P (2, 2)- Let the new coordinate for P = (X1, Y1)

 X1 = X0 + SHx. Y0 = 2 + 2 x 2 = 6

 Y1 = Y0 = 2 The New Coordinates = (6, 2)

For Coordinate Q (0, 0)- Let the new coordinate for Q = (X1, Y1)

 X1 = X0 + SHx. Y0 = 0 + 2 x 0 = 0

 Y1 = Y0 = 0

The New Coordinates = (0, 0) For Coordinate R (2, 0)-

Let the new coordinate for R = (X1, Y1) ,

 X1 = X0 + SHx. Y0 = 2 + 2 x 0 = 2

 Y1 = Y0 = 0

The New Coordinates = (2, 0) , The New coordinates of triangle for x-axis = (6, 2), (0, 0), (2, 0)

Shearing for y-axis:  For Coordinate P (2, 2)-

Let the new coordinate for P = (X1, Y1)

CPU College Chapter 3 Computer Graphics

19 | P a g e

 X1 = X0 = 2
 Y1 = Y0 + Shy.X0 = 2 + 2 x 2 = 6

The New Coordinates = (2, 6) , For Coordinate Q (0, 0)- Let the new coordinate for Q = (X1,
Y1)

 X1 = X0 = 0
 Y1 = Y0 +Shy. X0 = 0 + 2 x 0 =0

The New Coordinates = (0, 0), For Coordinate R (2, 0)- Let the new coordinate for R = (X1,
Y1)

 X1 = X0 = 2
 Y1 = Y0 + Shy. X0 = 0 +2 x 2 = 4

The New Coordinates = (2, 4) , The New coordinates of triangle for y-axis = (2, 6), (0, 0), (2, 4)

CPU College Chapter 3 Computer Graphics

20 | P a g e

Review Exercise
1. Find the coordinates of the vertices of triangle TRI with T (2, −1), R (4,3) and I (−3, −2) if it is to

be moved 5 units to the left and 2 units up.

2. Translate the point P (4,3), 3-unit the X-Direction and 5-unit Y-Direction.
3. Rotate triangle ABC by an angle 30 degree of Anti-clockwise direction where the co-ordinates
triangle are A (0,0), B (10,2), and C (7,4). Calculate the new co-ordinate of triangle.
4. Scale the triangle with the vertices A (0,0), B (2,4) and C (4,4) to twice of its size so that point C
(4,4) remain fixed.
5. Consider a triangle ABC whose co-ordinate are A (10,20), B (30,40) and C (50,20). Perform the
following transformation. Specify the matrices that are used.
I. Translate the given triangle by 30 unit to x-direction and -2 units in y-direction.
II. Rotate the given triangle by 30 degrees.
III. Reflect the given triangle about X=Y.
IV. Scale the given triangle uniformly by 2 units.
6. Write the exact transformation matrix for each basic transformation in 2Dhomogeneous
coordinate system.
7. A polygon is identified by the following positions. Identify the new positions after the polygon is
scaled by a scaling factor of 2 at the reference point (2,2), (3,3), (4,6),(8,3)(9,6). Show your
workings.

8. We rotate a point P (2, 5) by 60° about a pivot point (1, 2). The new transformed point P’ would be:

A. (– 4, 1) C. (-1, 4)
B. (1, – 4) D. (1, 4)

CPU College Chapter 3 Computer Graphics