UNIT-III

TWO DIMENSIONAL GRAPHICS TRANSFORMATIONS

Geometric Transformations
Changes in size, shape are accomplished with geometric transformation. It alter the
coordinate descriptions of object.
The basic transformations are Translation, Roatation, Scaling. Other transformations are
Reflection and shear.Basic transformations used to reposition and resize the two dimentional
objects.

Two Dimensional Transformations

Translation
A Translation is applied to an object by repositioning it along a straight line path from one
co-ordinate location to another. We translate a two dimensional point by adding translation
distances tx and ty to the original position (x,y) to move the point to a new location (x’,y’)
X’=x+tx Y’=y+ty
triangle = { p1=(1,0), p2=(2,0), p3=(1.5,2) }

The translation distance pair (tx,ty) is called a translation vector or shift vector.
P= X1 P’= X1’ T= tx
X2 X2’ ty

P’=P+T p’ = X1+tx
X2+ty

It moves objects without deformation. (ie) Every point on the objet is translated by the
same amount. It can be applied to lines, polygons.
Rotation
A two dimensional rotation is applied to an object by repositioning it along a circular path in
the xy plane. To generate a rotation, we specify a rotation angle theta and the position (xr,yr)
of the rotation point ( or pivot point) about which the object is to be rotated.
Positive value of the rotation angle defines counter clock wise rotation.
Negative value of the rotation angle defines the clock wise rotation.
X’=xcosθ – y sinθ
Y’=xsinθ + y cosθ

Using column vector P’=P*R R= Cosθ -Sinθ

Sinθ Cosθ

Rotation of an arbitary pivot point

Rotation of a point about any specified rotation position (xr,yr)
X’= Xr +(X-Xr)Cosθ –(Y-Yr)Sinθ
Y’=Yr+(X-Xr)Sinθ +(Y-Yr)Cosθ

It moves objects without deformations. Every point on an object is rotated through the same
angle.

Scaling
A scaling transformation alters the size of an object. This operation can be carried out for
polygon by multiplying the coordinate values (x,y) of each vertex by scaling factors sx and sy
to produce the transformed coordinates (x’,y’).
X’=x.sx
Y’=y.sy
P= X1 P’= X1’ S= sx 0
X2 X2’ 0 sy
 P’=P*S
If sx=sy , then it produces the uniform scaling
Sx<> sy , different scaling.
If sx,sy<0, then it produces the reduced object size
If sx,sy > 0, then it produces the enlarged size objects.

By choosing the position called fixed point, we can control the location of the scaled
object. This point is remain unchanged after the scaling transformation.
X’= Xf +(X-Xf)sx => X’= X.sx +(Xf(1-sx))
Y’=Yf+(Y-Yf)sy => Y’= Y.sy +Yf(1-sy)

Matrix representations and homogeneous coordinates

Graphics applications involves sequences of geometric transformations. The basic
transformations expressed in terms of

P’=M1 *P +M2
P, P’ --> Column vectors.
M1 --> 2 x 2 array containing multiplicative factors
M2 --> 2 Element column matrix containing translation terms

For translation --> M1 is the identity matrix

For rotation or scaling -->M2 contains transnational terms associated with the pivot
point or scaling fixed point.
For coordinate positions are scaled, then rotated then translated, these steps are
combined together into one step, final coordinate positions are obtained directly from the
initial coordinate values.
To do this expand the 2 x 2 matrix into 3 x 3 matrix.
To express 2 dimensional transformation as a multiplication, we represent each cartesion
coordinate position (x,y) with the homogeneous co ordinate triple (Xh,Yh, h) where
 X= xh/h, Y=Yh/h
So we can write (h.x, h.y,h), set h=1. Each two dimensional position is represented
with homogeneous coordinates(x,y,1). Coordinates are represented with three element
column vector. Transformation operations are written as 3 by 3 matrices.
For translation
X’ 1 0 tx X
Y’ 0 1 ty Y
1 0 0 1 1

P’=T(tx,ty)*P

Inverse of the translation matrix is obtained by replacing tx, ty by –tx, -ty Similarly
rotation about the origin
X’ Cosθ -Sinθ 0 X
Y’ Sinθ Cosθ 0 Y
1 0 0 1 1
P’= R(θ)*P

We get the inverse rotation matrix when θ is replaced with (-θ)

Similarly scaling about the origin
X’ Sx 0 0 X
Y’ 0 Sy 0 Y
1 0 0 1 1
P’= S(sx,sy)*P

Composite transformations
- sequence of transformations is called as composite transformation. It is obtained by forming
products of transformation matrices is referred as a concatenation (or) composition of
matrices.
Translation: -
Two successive translations
1 0 tx1 1 0 tx2 1 0 tx1+tx2
0 1 ty 1 . 0 1 ty2 = 0 1 ty1+ty2
001 001 001

T(tx1,ty1) + T(tx2,ty2) = T(tx1+tx2, ty1+ty2)

Two successive translations are additive.

Rotation
Two successive rotations are additive.
 R(θ1)* R(θ2)= R(θ1+ θ2)
P’=P. R(θ1+ θ2)

Scaling
Sx1 0 0 Sx2 0 0 Sx1.x2 0 0
0 Sy1 0 0 Sy2 0 0 Sy1.y2 0
0 0 1 0 0 1 0 0 1

S(x1,y1).S(x2,y2) = S(sx1.sx2 , sy1.sy2)

1. the order we perform multiple transforms can matter
 eg. translate + scale can differ from scale + translate
 eg. rotate + translate can differ from translate + rotate
 eg. rotate + scale can differ from scale + rotate (when scale_x differs from scale_y)

2. When does M1 + M2 = M2 + M1?

M1 M2
translate translate
scale scale
rotate rotate
scale (sx = sy) rotate

General pivot point rotation

Rotation about any selected pivot point (xr,yr) by performing the following sequence of
translate – rotate – translate operations.
1. Translate the object so that the pivot point is at the co-ordinate origin.
2. Rotate the object about the coordinate origin
3. Translate the object so that the pivot point is returned to its original position

1 0 xr Cosθ -Sinθ 0 1 0 -xr

0 1 yr Sinθ Cosθ 0 0 1 –yr
001 0 0 1 00 1

Concatenation properties
T(xr,yr).R(θ).T(-xr,-yr) = R(xr,yr, θ)
Matrix multiplication is associative. Transformation products may not be commutative.
Combination of translations, roatations, and scaling can be expressed as
X’ rSxx rSxy trSx X
Y’ rSyx rSyy trSy Y
1 0 0 1 1
Other transformations
Besides basic transformations other transformations are reflection and shearing

Reflection :
Reflection is a transformation that produces the mirror image of an object relative to an axis
of reflection. The mirror image is generated relative to an axis of reflection by rotating the
object by 180 degree about the axis.
Reflection about the line y=0 (ie about the x axis), the x-axis is accomplished with the
transformation matrix.
100
0 -1 0
001
It keeps the x values same and flips the y values of the coordinate positions.
Reflection about the y-axis
-1 0 0
010
001
It keeps the y values same and flips the x values of the coordinate positions.
Reflection relative to the coordinate origin.
-1 0 0
0 -1 0
001
Reflection relative to the diagonal line y=x , the matrix is
010
100
001
Reflection relative to the diagonal line y=x , the matrix is
0 -1 0
-1 0 0
001
Shear
A transformation that alter the shape of an object is called the shear transformation.
Two shearing transformations
1. Shift x coordinate values ( X- shear)
2. Shifts y coordinate values. (Y-shear)

In both cases only one coordinate ( x or y ) changes its coordinates and other preserves its
values.

X –Shear
It preserves the y value and changes the x value which causes vertical lines to tilt right or left
1 0 0
X-sh = shx 1 0
0 01

X’= X+shx*y
Y’=Y
Y –Shear
It preserves the x value and changes the y value which causes vertical lines to tilt right or left
1shy 0
Y-sh = 0 1 0
00 1
Y’= Y+shy*X
X’=X
Shearing Relative to other reference line
We can apply x and y shear transformations relative to other reference lines. In x shear
transformation we can use y reference line and in y shear we can use x reference line.
The transformation matrices for both are given below.
1 shx -shx*yref
X shear with y reference line 0 1 0
0 0 1
x’=x+shx(y-yref) , y’= y
1 0 0
Y shear with x reference line shy 1 -shy*xref
0 0 1
which generates transformed coordinate positions.
x’=x , y’= shy(x-xref)+y
This transformation shifts a coordinate position vertically by an amount proposal to its
distance from the reference line x=x ref.
Transformations between coordinate systems
Transformations between Cartesian coordinate systems are achieved with a sequence of
translate-rotate transformations. One way to specify a new coordinate reference frame is to
give the position of the new coordinate origin and the direction of the new y-axis. The
direction of the new x-axis is then obtained by rotating the y direction vector 90 degree
clockwise. The transformation matrix can be calculated as the concatenation of the translation
that moves the new origin to the old co-ordinate origin and a rotation to align the two sets of
axes. The rotation matrix is obtained from unit vectors in the x and y directions for the new
system

TWO DIMENSIONAL GRAPHICS TRANSFORMATIONS

Composite transformations
- sequence of transformations is called as composite transformation. It is obtained by forming
products of transformation matrices is referred as a concatenation (or) composition of
matrices.

Tranlation : -
Two successive translations
1 0 tx 1 0 tx 1 0 tx1+tx2
0 1 ty 0 1 ty 0 1 ty1+ty2
001 001 001

T(tx1,ty1) + T(tx2,ty2) = T(tx1+tx2, ty1+ty2)

Two successive translations are additive.
Rotations
Two successive rotations are additive.
R(θ1)* R(θ2)= R(θ1+ θ2)
P’=P. R(θ1+ θ2)
Scaling

Sx1 0 0 Sx2 0 0 Sx1.x2 0 0

0 Sy1 0 0 Sy2 0 0 Sy1.y2 0
0 0 1 0 0 1 0 0 1
 S(x1,y1).S(x2,y2) = S(sx1.sx2 , sy1.sy2)

the order we perform multiple transforms can matter

eg. translate + scale can differ from scale + translate
eg. rotate + translate can differ from translate + rotate
eg. rotate + scale can differ from scale + rotate (when scale_x differs from
scale_y)
When does M1 + M2 = M2 + M1?

M1 M2
Translate translate
Scale Scale
Rotate Rotate
Scale(sx=sy) Rotate
General pivot point rotation
Rotation about any selected pivot point (xr,yr) by performing the following sequence of
translate – rotate – translate operations.
1 0 xr Cosθ -Sinθ 0 1 0 -xr
0 1 yr Sinθ Cosθ 0 0 1 -yr
001 0 0 1 001

T(xr,yr).R(θ).T(-xr,-yr) = R(xr,yr, θ)

Concatenation properties
Matrix multiplication is associative. Transformation products may not be commutative.
Combination of translations, roatations, and scaling can be expressed as
X’ rSxx rSxy trSx X
Y’ rSyx rSyy trSy Y
1 0 0 1 1

Affine transformations
Two dimensional geometric transformations are affine transformations. Ie they can be
expressed as a linear function of co-ordinates x and y . Affine transformations transform the
parallel lines to parallel lines and transform finite points to finite points . Geometric
transformations that do not include scaling or shear also preserve angles and lengths.
Numerical Problems:

Numerical Problems on 2D Shearing

Problem-01:
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.
Solution-
Given-
 Old corner coordinates of the triangle = A (1, 1), B(0, 0), C(1, 0)
 Shearing parameter towards X direction (Shx) = 2
 Shearing parameter towards Y direction (Shy) = 2

Shearing in X Axis-

For Coordinates A(1, 1)

Let the new coordinates of corner A after shearing = (Xnew, Ynew).

Applying the shearing equations, we have

 Xnew = Xold + Shx x Yold = 1 + 2 x 1 = 3

 Ynew = Yold = 1

Thus, New coordinates of corner A after shearing = (3, 1).

For Coordinates B(0, 0)

Let the new coordinates of corner B after shearing = (Xnew, Ynew).

Applying the shearing equations, we have-

 Xnew = Xold + Shx x Yold = 0 + 2 x 0 = 0
 Ynew = Yold = 0

Thus, New coordinates of corner B after shearing = (0, 0).

For Coordinates C(1, 0)

Let the new coordinates of corner C after shearing = (Xnew, Ynew).

Applying the shearing equations, we have-
 Xnew = Xold + Shx x Yold = 1 + 2 x 0 = 1
 Ynew = Yold = 0

Thus, New coordinates of corner C after shearing = (1, 0).

Thus, New coordinates of the triangle after shearing in X axis = A (3, 1), B(0, 0), C(1, 0).

Shearing in Y Axis-

For Coordinates A(1, 1)

Let the new coordinates of corner A after shearing = (Xnew, Ynew).

Applying the shearing equations, we have-

 Xnew = Xold =1
 Ynew = Yold + Shy x Xold = 1 + 2 x 1 = 3

Thus, New coordinates of corner A after shearing = (1, 3).

For Coordinates B(0, 0)

Let the new coordinates of corner B after shearing = (Xnew, Ynew)

Applying the shearing equations, we have-

 Xnew = Xold =0
 Ynew = Yold + Shy x Xold = 0 + 2 x 0 = 0

Thus, New coordinates of corner B after shearing = (0, 0).

For Coordinates C(1, 0)

Let the new coordinates of corner C after shearing = (Xnew, Ynew).

Applying the shearing equations, we have-

 Xnew = Xold =1
 Ynew = Yold + Shy x Xold = 0 + 2 x 1 = 2

Thus, New coordinates of corner C after shearing = (1, 2).

Thus, New coordinates of the triangle after shearing in Y axis = A (1, 3), B(0, 0), C(1, 2).
Numerical Problems on 2D Reflection
Problem-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.

Solution-

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).
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.

Solution-

Given-
 Old corner 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).
Numerical Problems on 2D Scaling
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.
Solution-
Given-
 Oldcorner coordinates of the square = A (0, 3), B(3, 3), C(3, 0), D(0, 0)
 Scaling factor along X axis = 2
 Scaling factor along Y axis = 3
For Coordinates A(0, 3)
Let the new coordinates of corner A after scaling = (Xnew, Ynew).
Applying the scaling equations, we have-
 Xnew = Xold x Sx = 0 x 2 = 0
 Ynew = Yold x Sy = 3 x 3 = 9

Thus, New coordinates of corner A after scaling = (0, 9).

For Coordinates B(3, 3)

Let the new coordinates of corner B after scaling = (Xnew, Ynew).
Applying the scaling equations, we have-
 Xnew = Xold x Sx = 3 x 2 = 6
 Ynew = Yold x Sy = 3 x 3 = 9
Thus, New coordinates of corner B after scaling = (6, 9).

For Coordinates C(3, 0)

Let the new coordinates of corner C after scaling = (Xnew, Ynew).
Applying the scaling equations, we have-
 Xnew = Xold x Sx = 3 x 2 = 6
 Ynew = Yold x Sy = 0 x 3 = 0
Thus, New coordinates of corner C after scaling = (6, 0).

For Coordinates D(0, 0)

Let the new coordinates of corner D after scaling = (Xnew, Ynew).
Applying the scaling equations, we have-
 Xnew = Xold x Sx = 0 x 2 = 0
 Ynew = Yold x Sy = 0 x 3 = 0
Thus, New coordinates of corner D after scaling = (0, 0).
Thus, New coordinates of the square after scaling = A (0, 9), B(6, 9), C(6, 0), D(0, 0).

Numerical problems on 2D Rotation

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.

Solution-

We rotate a straight line by its end points with the same angle. Then, we re-draw a line between the
new end points.

Given-
 Old ending coordinates of the line = (Xold, Yold) = (4, 4)
 Rotation angle = θ = 30º

Let new ending coordinates of the line after rotation = (Xnew, Ynew).
Applying the rotation equations, we have-
Xnew= Xold x cosθ – Yold x sinθ
= 4 x cos30º – 4 x sin30º
= 4 x (√3 / 2) – 4 x (1 / 2)
= 2√3 – 2
= 2(√3 – 1)
= 2(1.73 – 1)
= 1.46

Ynew
= Xold x sinθ + Yold x cosθ
= 4 x sin30º + 4 x cos30º
= 4 x (1 / 2) + 4 x (√3 / 2)
= 2 + 2√3
= 2(1 + √3)
= 2(1 + 1.73)
= 5.46
Thus, New ending coordinates of the line after rotation = (1.46, 5.46).
Alternatively,
In matrix form, the new ending coordinates of the line after rotation may be obtained as-
Thus, New ending coordinates of the line after rotation = (1.46, 5.46).

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.

Solution-

We rotate a polygon by rotating each vertex of it with the same rotation angle.

Given-
 Old corner coordinates of the triangle = A (0, 0), B(1, 0), C(1, 1)
 Rotation angle = θ = 90º

For Coordinates A(0, 0)

Let the new coordinates of corner A after rotation = (Xnew, Ynew).

Applying the rotation equations, we have-

Xnew
= Xold x cosθ – Yold x sinθ
= 0 x cos90º – 0 x sin90º
=0

Ynew
= Xold x sinθ + Yold x cosθ
= 0 x sin90º + 0 x cos90º
=0
Thus, New coordinates of corner A after rotation = (0, 0).

For Coordinates 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
Ynew
= Xold x sinθ + Yold x cosθ
= 1 x sin90º + 0 x cos90º
=1+0
=1
Thus, New coordinates of corner B after rotation = (0, 1).
For Coordinates 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, New coordinates of corner C after rotation = (-1, 1).
Thus, New coordinates of the triangle after rotation = A (0, 0), B(0, 1), C(-1, 1).

Numerical Problems on 2D Translation

Problem-01:
Given a circle C with radius 10 and center coordinates (1, 4). Apply the translation with distance 5
towards X axis and 1 towards Y axis. Obtain the new coordinates of C without changing its radius.
Solution-
Given-
 Oldcenter coordinates of C = (Xold, Yold) = (1, 4)
 Translation vector = (Tx, Ty) = (5, 1)
Let the new center coordinates of C = (Xnew, Ynew).
Applying the translation equations, we have-
 Xnew = Xold
+ Tx = 1 + 5 = 6
 Ynew = Yold + Ty = 4 + 1 = 5
Thus, New center coordinates of C = (6, 5).
Alternatively,
In matrix form, the new center coordinates of C after translation may be obtained as-
Thus, New center coordinates of C = (6, 5).

Problem-02:

Given 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.
Solution-
Given-
 Oldcoordinates 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-
 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).

Raster methods for transformations

Moving blocks of pixels can perform fast raster transformations. This avoids calculating
transformed coordinates for an object and applying scan conversion routines to display the
object at the new position. Three common operations (bitBlts or pixBlts(bit block transfer)) are
copy, read, and write. when a block of pixels are moved to a new position in the frame
buffer(block transfer) , we can simply replace the old pixel values or we can combine the pixel
values using Boolean or arithmetic operations. Copying a pixel block to a new location in the
frame buffer carries out raster translations. Raster rotations in multiples of 90 degree are
obtained by manipulating row and column positions of the pixel values in the block. Other
rotations are performed by first mapping rotated pixel areas onto destination positions in the
frame buffer, then calculate the overlap areas. Scaling in raster transformation is also
accomplished by mapping transformed pixel areas to the frame buffer destination positions.

3D Transformation

3D Translation

3D Scaling

3D Rotation

3D Shearing
3D Reflection

About XY-Plane About YZ-Plane About ZX Plane

References:

1. https://www.javatpoint.com
2. https://www.w3schools.com
3. https://www.tutorialspoint.com
4. www.geeksforgeeks.org
5. https://www.gatevidyalay.com/tag/2d-transformation-in-computer-graphics-
solved-questions