Chapter 05

Transformation
 2D Transformation in Computer Graphics-
In Computer graphics,
Transformation is a process of modifying and re-
positioning the existing graphics.

•2D Transformations take place in a two dimensional plane.

•Transformations are helpful in changing the position, size, orientation, shape etc of the object.

2
Transformation Techniques-

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

A translation moves an object to a different position on the screen.

You can translate a point in 2D by adding translation coordinate (tx, ty) to the original coordinate X,Y
to get the new coordinate X′,Y′. Translation is a movement of objects without deformation.

From the above figure, you can write that −

X’ = X + tx
Y’ = Y + ty

The pair (tx, ty) is called the translation vector or shift vector.

4
Matrix for Translation:

We can write it as −
P’ = P + T

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

•Through this representation, all the transformations can be performed using
matrix / vector multiplications.
5
 Problem-
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-
•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-

•Xnew = Xold + Tx = 0 + 1 = 1
•Ynew = Yold + Ty = 3 + 1 = 4

Thus, New coordinates of corner A = (1, 4). 6

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

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

8
The OpenGL function is glTranslatef( tx, ty, tz );

9
Rotation
Rotation refers to mathematical operation in which the graphical object is rotated about an angle (θ)
to the axis.
Rotation is of two types: anti-clockwise and clockwise rotation.
Suppose we want to rotate a point with coordinates A (x1, y1) clockwise through an angle θ about the
origin
Then the new coordinates A’ (x2, y2):
x2 = x1 cosθ + y1 sinθ
y2 = x1 sinθ - y1 cosθ

10
Using standard trigonometric the original coordinate of point P(X,Y) can be represented as −
X=rcosϕ......(1)
Y=rsinϕ......(2)
Same way we can represent the point P’ (X′,Y′) as −
x′=rcos(ϕ+θ)=rcosϕcosθ−rsinϕsinθ.......(3)
y′=rsin(ϕ+θ)=rcosϕsinθ+rsinϕcosθ.......(4)
Substituting equation 1 & 2 in 3 & 4 respectively, we will get
x′=xcosθ−ysinθ
y′=xsinθ+ycosθ
Representing the above equation in matrix form, Matrix for homogeneous co-ordina
rotation (anticlockwise)
P’ = P . R
Where R is the rotation matrix
Matrix for homogeneous co-ordinate rotation (clockwise)

11
P’ = P . R

9/3/20XX Presentation Title 12

 Problem
Rotate line AB whose endpoints are A (2, 5) and B (6, 12) about origin through a 30° clockwise
direction.

Step1: Rotation of point A (2, 5). Take angle 30°

Step2: Rotation of point B (6, 12)

13
The OpenGL function is glRotatef (A, x, y, z).

Where A is angle 14
 Scaling
In computer graphics, scaling is a process of modifying or altering the size of objects.
•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.

It is used to alter or change the size of objects. The change is done using scaling
factors. There are two scaling factors, i.e. Sx in x direction Sy in y-direction. If the
original position is x and y. Scaling factors are Sx and Sy then the value of coordinates
after scaling will be x1 and y1.
If the picture to be enlarged to twice its original size then Sx = Sy =2. If Sxand Sy are
not equal then scaling will occur but it will elongate or distort the picture. 15
This can be mathematically represented as shown below
−
X' = X . SX and Y' = Y . SY

P’ = P . S

Matrix for Scaling:

16
P’ = P . S

17
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-
•Old corner 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).

9/3/20XX Presentation Title 18
For Coordinates B(3, 3)

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

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

For Coordinates C(3, 0) Thus, New coordinates of corner D after scaling = (0, 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).

9/3/20XX Presentation Title 19

Thus, New coordinates of the square after scaling = A (0, 9), B(6, 9), C(6, 0), D(0, 0).

The OpenGL function is glScalef(float x, float y, float z)

20
Reflection:

It is a transformation which produces a mirror image of an object. The mirror image can
be either about x-axis or y-axis. The object is rotated by180°.

Types of Reflection:
1.Reflection about the x-axis
2.Reflection about the y-axis
3.Reflection about an axis perpendicular to xy
plane and passing through the origin
4.Reflection about line y=x

21
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.
Following figures shows the reflection of the object axis. The object will lie another side of the x-
axis.

9/3/20XX Presentation Title 22

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.

23
3. Reflection about an axis perpendicular to xy plane and passing through origin:
In the matrix of this transformation is given below

In this value of x and y both will be reversed. This is also called as

half revolution about the origin.

24
4. Reflection about line y=x: The object may be reflected about line y = x with the help of
following transformation matrix

First of all, the object is rotated at 45°. The direction of

rotation is clockwise. After it reflection is done concerning
x-axis. The last step is the rotation of y=x back to its
original position that is counterclockwise at 45°.
25
Example: A triangle ABC is given. The coordinates
of A, B, C are given as
A (3 4)
B (6 4)
C (4 8)

9/3/20XX 26
The a point coordinates after reflection

The b point coordinates after reflection

The coordinate of point c after reflection

a (3, 4) becomes a1 (3, -4)

b (6, 4) becomes b1 (6, -4)
c (4, 8) becomes c1 (4, -8)
27
 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).

9/3/20XX 28
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).

9/3/20XX 29
Thus, New coordinates of the triangle after reflection = A (3, -4), B(6, -4), C(5, -6).

9/3/20XX 30
Shear

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 shifts Y
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

The X-Shear preserves the Y coordinate and changes are made to X coordinates, which causes the vertical lines
to tilt right or left as shown in below figure.

31
The transformation matrix for X-Shear can be represented as −

Y-Shear
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 as shown in the following figure.

9/3/20XX Presentation Title 32

The Y-Shear can be represented in matrix from as −

9/3/20XX 33
Problem-01:

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

Solution-

Given-
•Old corner coordinates of the triangle = A (0, 0, 0), B(1, 1, 2), C(1, 1, 3)
•Shearing parameter towards X direction (Shx) = 2
•Shearing parameter towards Y direction (Shy) = 2
•Shearing parameter towards Y direction (Shz) = 3

Shearing in X Axis-

34
For Coordinates A(0, 0, 0)

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

Applying the shearing equations, we have-

•Xnew = Xold = 0
•Ynew = Yold + Shy x Xold = 0 + 2 x 0 = 0
•Znew = Zold + Shz x Xold = 0 + 3 x 0 = 0

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

For Coordinates B(1, 1, 2)

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

Applying the shearing equations, we have-

•Xnew = Xold = 1
•Ynew = Yold + Shy x Xold = 1 + 2 x 1 = 3
•Znew = Zold + Shz x Xold = 2 + 3 x 1 = 5

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

35
For Coordinates C(1, 1, 3)

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

Applying the shearing equations, we have-

•Xnew = Xold = 1
•Ynew = Yold + Shy x Xold = 1 + 2 x 1 = 3
•Znew = Zold + Shz x Xold = 3 + 3 x 1 = 6

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

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

Shearing in Y Axis-

For Coordinates A(0, 0, 0)

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

Applying the shearing equations, we have-

•Xnew = Xold + Shx x Yold = 0 + 2 x 0 = 0
•Ynew = Yold = 0
•Znew = Zold + Shz x Yold = 0 + 3 x 0 = 0

Thus, New coordinates of corner A after shearing = (0, 0, 0) 36

For Coordinates B(1, 1, 2)

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

Applying the shearing equations, we have-

•Xnew = Xold + Shx x Yold = 1 + 2 x 1 = 3
•Ynew = Yold = 1
•Znew = Zold + Shz x Yold = 2 + 3 x 1 = 5

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

For Coordinates C(1, 1, 3)

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

Applying the shearing equations, we have-

•Xnew = Xold + Shx x Yold = 1 + 2 x 1 = 3
•Ynew = Yold = 1
•Znew = Zold + Shz x Yold = 3 + 3 x 1 = 6

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

Thus, New coordinates of the triangle after shearing in Y axis = A (0, 0, 0), B(3, 1, 5),
C(3, 1, 6). 37
9/3/20XX Presentation Title 38
Viewing Pipeline

The method of selecting and enlarging a portion of a drawing is called windowing. The area
chosen for this display is called a window. The window is selected by world-coordinate.
Sometimes we are interested in some portion of the object and not in full object. So we will
decide on an imaginary box. This box will enclose desired or interested area of the object.
Such an imaginary box is called a window.
Viewport: An area on display device to which a window is mapped [where it is to
displayed].
Basically, the window is an area in object space. It encloses the object. After the user
selects this, space is mapped on the whole area of the viewport. Almost all 2D and 3D
graphics packages provide means of defining viewport size on the screen. It is possible to
determine many viewports on different areas of display and view the same object in a
39
different angle in each viewport.
Viewing Transformations – mapping part of a world coordinate scene to
device coordinates is called viewing transformation Window-Viewport
Mapping

Window – world coordinate area for display

Viewport – area on display device to which window is mapped

Window – what is viewed

Viewport – where it is displayed
40
Viewing transformation in several steps:

First, we construct the scene in world coordinate using the output primitives and

attributes.

To obtain a particular orientation, we can set up a 2-D viewing coordinate system in the

window coordinate plane and define a window in viewing coordinates system.

Once the viewing frame is established, are then transform description in world coordinates

to viewing coordinates.

Then, we define viewport in normalized coordinates (range from 0 to 1) and map the

viewing coordinates description of the scene to normalized coordinates.

At the final step, all parts of the picture that (i.e., outside the viewport are dipped, and the

contents are transferred to device coordinates).

41
9/3/20XX Presentation Title 42
Window to Viewport Co-ordinate Transformation

Once object description has been transmitted to the viewing reference frame, we
choose the window extends in viewing coordinates and selects the viewport limits in
normalized coordinates.
Object descriptions are then transferred to normalized device coordinates:
We do this thing using a transformation that maintains the same relative placement of
an object in normalized space as they had in viewing coordinates.
If a coordinate position is at the center of the viewing window:
It will display at the center of the viewport.
Fig shows the window to viewport mapping. A point at position (xw, yw) in window
mapped into position (xv, yv) in the associated viewport.
43
In order to maintain the same relative placement of the point in the viewport as in the window,
we require:

44
Solving these impressions for the viewport position (xv, yv), we have

xv=xvmin+(xw-xwmin)sx
yv=yvmin+(yw-ywmin)sy ...........equation 2

Where scaling factors are

9/3/20XX 45
9/3/20XX Presentation Title 46
9/3/20XX Presentation Title 47
9/3/20XX Presentation Title 48
9/3/20XX Presentation Title 49
9/3/20XX Presentation Title 50
9/3/20XX Presentation Title 51