2D Transformations

Chapter 3 –Two Dimensional Transformations

Changes in orientation, size, and shape are accomplished with geometric transformations that
alter the coordinate descriptions of objects. The basic geometric transformations are translation,
rotation, and scaling. Other transformations that are often applied to objects include reflection
and shear.
3.1 Basic Transformations
Here we discuss procedures for applying translation, rotation, and scaling parameters to
reposition and resize two-dimensional objects.
1) Translation
A translation is applied to an object by repositioning it along a straight-line path from one
coordinate location to another. We translate a two-dimensional point by adding translation
distances, tx and ty, to the original coordinate position (x, y) to move the point to a new position
(x', y').
x' = x + tx, y' = y + ty
The translation distance pair (tx, ty) is called a translation vector or shift vector.
Translation is a rigid-body transformation that moves objects without deformation, i.e., every
point on the object is translated by the same amount.
2) Rotation
A two-dimensional rotation is applied to an object by repositioning it along a circular path in the
xy-plane. Rotation requires the rotation angle θ and the position (xr, yr) of the rotation point (or
pivot point) about which the object is to be rotated. Positive values for the rotation angle define
counterclockwise rotations about the pivot point and negative values rotate objects in the
clockwise direction.

This transformation can also be described as a rotation about a rotation axis that is perpendicular
to the xy plane and passes through the pivot point.

Transformation equation for rotating a point (x, y) through an angle θ about the origin is:
x' = x cos θ – y sin θ
y' = x sin θ + y cos θ

Bekretsyon B Page 1
 2D Transformations

This equation is obtained by applying trigonometric properties on equations

x' = r cos (ϕ + θ), y' = r sin (ϕ + θ) which are the result of Pythagoras theorem.
With the row-vector representations for coordinate positions, we can write the rotation equations
in the matrix form:
𝑐𝑜𝑠 𝜃 sin 𝜃
[𝑥′, 𝑦′] = [𝑥, 𝑦] [ ]
−sin 𝜃 𝑐𝑜𝑠 𝜃
Rotation of a point about an arbitrary pivot position (xr, yr), therefore is given by
x' = xr + (x – xr) cos θ – (y – yr) sin θ
y' = yr + (x – xr) sin θ + (y – yr) cos θ
Rotation about any pivot point can be done in three steps. Translate the point to the origin, rotate
the point and translate back to the original point.
As with translations, rotations are rigid-body transformations that move objects without
deformation. Every point on an object is rotated through the same angle.
3) Scaling
A scaling transformation alters the size of an object. This operation can be carried out for
polygons 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
Scaling factor sx scales objects in the x direction, while sy scales in the y direction
The scaling transformation equation can also be written in the matrix form:
sx 0
[𝑥 ′ , 𝑦 ′ ] = [𝑥, 𝑦] ∙ [ 0 𝑠𝑦 ]

Objects transformed with scaling equation are both scaled and repositioned. Scaling factors with
values less than 1 move objects closer to the coordinate origin, while values greater than 1 move
coordinate positions farther from the origin.

We can control the location of a scaled object by choosing a position, called the fixed point-that
is to remain unchanged after the scaling. Coordinates for the fixed point (xf, yf) can be chosen as
Bekretsyon B Page 2
 2D Transformations

one of the vertices, the object centroid, or any other position. A polygon is then scaled relative to
the fixed point by scaling the distance from each vertex to the fixed point. For a vertex with
coordinates (x, y), the scaled coordinates (x', y ') are calculated as:

x' = xf + (x – xf) sx, y' = yf + (y – yf) sy

Remark:
A straight line segment is translated, rotated or scaled by applying the translation, rotation or scaling
equation respectively to each of the endpoints and redraw the line between the new endpoint positions
Polygons are translated, rotated or scaled by applying the translation, rotation or scaling equation
respectively to the coordinate position of each vertex and regenerating the polygon using the new set
of vertex coordinates. Similar methods are used to transform curved objects.
A circle or ellipse is translated by translating the center coordinates and redraw the figure in the new
location.
A circle or an ellipse can be rotated about a non-central axis by moving the center position through
the arc that subtends the specified rotation angle
An ellipse can be rotated about its center coordinates or resized by rotating or scaling the major and
minor axes and redrawing the ellipse.
Uniform scaling of a circle is done by simply adjusting the radius. Then we redisplay the circle about
the center coordinates using the transformed radius.
3.2 Matrix Representations and Homogeneous Coordinates
Many graphics applications involve sequences of geometric transformations. An animation, for
example, might require an object to be translated and rotated at each increment of the motion.
In design and picture construction applications, we perform translations, rotations, and scaling to
fit the picture components into their proper positions.

We can combine the multiplicative and translational terms for two-dimensional geometric
transformations into a single matrix representation by expanding the 2 by 2 matrix
representations to 3 by 3 matrices. This allows us to express all transformation equations as
matrix multiplications, providing that we also expand the matrix representations for coordinate
positions.

To express any two-dimensional transformation as a matrix multiplication, we represent each

Cartesian coordinate position (x, y) with the homogeneous coordinate triple (xh, yh, h), where:
𝑥ℎ 𝑦ℎ
x= ℎ
, y= ℎ

Bekretsyon B Page 3
 2D Transformations

Thus, a general homogeneous coordinate representation can also be written as (h.x, h.y, h)
For two-dimensional geometric transformations, we can choose the homogenous parameter h to
be any nonzero value. A convenient choice is simply to set h = 1. Each two-dimensional position
is then represented with homogeneous coordinates (x, y, 1).

Expressing positions in homogeneous coordinates allows us to represent all geometric

transformation equations as matrix multiplications.

Coordinates are represented with three-element row vectors, and transformation operations are
written as 3 by 3 matrices
For translation, we have:
1 0 0
[x , y , 1] = [𝑥, 𝑦, 1] [ 0
′ ′ 1 0]
𝑡𝑥 𝑡𝑦 1

Similarly, rotation transformation equations about the coordinate origin are now written as:
𝑐𝑜𝑠𝜃 𝑠𝑖𝑛𝜃 0
[x ′ , y ′ , 1] = [x, y, 1] [− 𝑠𝑖𝑛𝜃 𝑐𝑜𝑠𝜃 0]
0 0 1
A scaling transformation relative to the coordinate origin is now expressed as the matrix
multiplication
𝑠𝑥 0 0
[x ′ , y ′ , 1] = [x, y, 1] [ 0 𝑠𝑦 0]
0 0 1
If, for example, we want to translate, rotate and scale an object (in that order), we can combine
the matrices to form a single transformation matrix:
𝑀𝑇𝐹 = 𝑀𝑇𝐿 × 𝑀𝑅𝑇 × 𝑀𝑆𝑐
Which gives an overall transformation matrix of the form:
𝑎 𝑑 0
[𝑏 𝑒 0]
𝑐 𝑓 1
𝑎 𝑑
Where the matrix [ ] is for rotation, the diagonal (a e) for scaling and (c f) for translation.
𝑏 𝑒
Matrix representations are standard methods for implementing transformations in graphics
systems.
Examples
1. Given a square with vertices at p1 = (10, 15), p2 = (15, 15), p3 = (15, 20) and p4 = (10, 20).
Translate the points by (10, 5) using translation matrix.
Bekretsyon B Page 4
 2D Transformations

Solution:
1 0 0
Tx = 10, Ty = 5 => 𝑀𝑇𝐿 = ( 0 1 0)
10 5 1
1 0 0
P1 = (10, 15)=> (10 15 1) ( 0 1 0) = (20 20 1) => 𝑃1′ = (20 20 )
10 5 1
1 0 0
P2 = (15, 15)=> (15 15 1) ( 0 1 0) = (25 20 1) => 𝑃2′ = (25 20 )
10 5 1
1 0 0
P3 = (15, 20)=> (15 20 1) ( 0 1 0) = (25 25 1) => 𝑃3′ = (25 25 )
10 5 1
1 0 0
P4 = (10, 20)=> (10 20 1) ( 0 1 0) = (20 25 1) => 𝑃4′ = (20 25 )
10 5 1
2. A square is given by p1 = (20, 20), p2 =(20, 40), p3 = (40, 20) and p4 = (40, 40). Scale the
square relative to the origin where sx = 1.5 and sy = 2.
Solution
1.5 0 0
𝑀𝑆𝐶 = ( 0 2 0)
0 0 1
1.5 0 0
P1 = (20, 20)=> (20 20 1) ( 0 2 0) = (30 40 1) => 𝑃1′ = (30 40 )
0 0 1
Similarly compute 𝑃2′ , 𝑃3′ 𝑎𝑛𝑑 𝑃4′
3. Use the square and scaling factor of question 2 to scale about a fixed point (xf, yf) = (20, 20).
Solution
1 0 0
Step 1. Translate to the origin by (xf, yf): 𝑀𝑇𝐿1 = ( 0 1 0)
−20 −20 1
1.5 0 0
Step 2. Scale the object: 𝑀𝑆𝐶 = ( 0 2 0)
0 0 1
1 0 0
Step 3. Translate back by (xf, yf): 𝑀𝑇𝐿2 = ( 0 1 0)
20 20 1
Then
1 0 0 1.5 0 0 1 0 0 1.5 0 0
𝑀𝑇𝐹 = ( 0 1 0) ∗ ( 0 2 0) ∗ ( 0 1 0) = ( 0 2 0)
−20 −20 1 0 0 1 20 20 1 −10 −20 1

Bekretsyon B Page 5
 2D Transformations

1.5 0 0
P1 = (20, 20)=> (20 20 1) ( 0 2 0) = (20 20 1) => 𝑃1′ = (20 20 )
−10 −20 1
Similarly compute 𝑃2′ , 𝑃3′ 𝑎𝑛𝑑 𝑃4′
4. A square has corners (10, 10), (10, 20), (20, 10) and (20, 20). Rotate the square about the
origin by 370 in the anti-clockwise direction.
Solution
cos 37 𝑠𝑖𝑛37 0 0.8 0.6 0
𝑀𝑅𝑇 = [− 𝑠𝑖𝑛37 cos 37 0] = [−0.6 0.8 0]
0 0 1 0 0 1
0.8 0.6 0
P1 = (10, 10)=> (10 10 1) (−0.6 0.8 0) = (2 14 1) => 𝑃1′ = (2 14 )
0 0 1
0.8 0.6 0
P2 = (10, 20)=> (10 20 1) (−0.6 0.8 0) = (−4 22 1) => 𝑃2′ = (−4 22 )
0 0 1
Similarly compute 𝑃3′ 𝑎𝑛𝑑 𝑃4′
3.3 Other Transformations
1) Reflection
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
1800 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.

Reflection about the line y = 0, the x axis, is accomplished with the transformation matrix:

1 0 0
[0 −1 0]
0 0 1
This transformation keeps x values the same but flips the y values of coordinate positions. The
resulting orientation of an object after it has been reflected about the x axis is shown below

Bekretsyon B Page 6
 2D Transformations

A reflection about the y axis flips x coordinates while keeping y coordinates the same. The
matrix for this transformation is:
−1 0 0
[0 1 0]
0 0 1
The resulting orientation of an object after it has been reflected about the y axis (line x =0) is:

Reflection relative to the coordinate origin, has the matrix representation:

−1 0 0
[0 −1 0]
0 0 1
If we chose the reflection axis as the diagonal line y = x, the reflection matrix is
0 1 0
[ 1 0 0]
0 0 1

Reflections about any line y = mx + b in the xy plane can be accomplished with a combination of
translate- rotate-reflect transformation.
In general, we first translate the line so that it passes through the origin. Then we can rotate the
line onto one of the coordinate axes and reflect about that axis. Finally, we restore the line to its
original position with the inverse rotation and translation transformations
2) Shear
A transformation that distorts the shape of an object is called a shear. Two common shearing
transformations are those that shift coordinate x values and those that shift y values.
An x-direction shear relative to the x axis is produced with the transformation matrix

Bekretsyon B Page 7
 2D Transformations

1 𝑠ℎ𝑥 0
[1 1 0]
0 0 1
which transforms coordinate positions as
x' = x + shx y, y' = y
Any real number can be assigned to the shear parameter shx . A coordinate position (x, y) is then
shifted horizontally by an amount proportional to its distance (y value) from the x axis (y = 0).
Setting shx to 2, for example, changes the square into a parallelogram as shown below.

Negative values for shx shift coordinate positions to the left

We can generate x-direction shears relative to other reference lines with
1 𝑠ℎ𝑥 −𝑠ℎ𝑥 ∙ 𝑦𝑟𝑒𝑓
[1 1 0 ]
0 0 1
with coordinate transformations as
x' = x + shx (y – yref), y' = y
An example of this shearing transformation is given below for a shear parameter value of 1 /2
relative to the line yref = -1

A y-direction shear relative to the line x = xref is generated with the transformation matrix
1 0 0
[𝑠ℎ𝑦 1 −𝑠ℎ𝑦 ∙ 𝑥𝑟𝑒𝑓 ]
0 0 1
which generates coordinate positions
x' = x, y' = shy (x – xref) + y

Bekretsyon B Page 8
 2D Transformations

This transformation shifts coordinate position vertically by an amount proportional to its distance
from the reference line x = xref
The following figure illustrates the conversion of a square into parallelogram with shy = ½ and
xref = -1

Summary Questions
A. Fill in the blank space
1. _______ is a change of object position.
2. The translation distance pair (tx, ty) is called ______________.
3. _______ is a change of orientation of an object.
4. As translation vector is to translation _________ is to rotation and _______ to scaling.
5. _________ is a transformation that produces a mirror image of an object.
B. Say true or false
1. Translations and rotations are rigid-body transformations that move objects without deformation.
2. Negative values for the rotation angle define counterclockwise rotations about the pivot point.
3. Objects transformed with scaling are both scaled and repositioned.
4. A transformation that distorts the shape of an object is called reflection.
5. To translate or rotate a polygon just translate or rotate the vertices and redraw the polygon in the new
location.
C. Answer Accordingly
1. Write a program that translates a triangle its vertices are at coordinates (0, 0),(320, 200) and (150,
200) with translation vector (50, 40).
2. Write a program that rotates the triangle of question 1 by 450 degree about point (200, 200).
3. Write a program that scales the triangle of question 1 by factor (0.5, 0.5)
4. Write a program to continuously rotate an object about a pivot point.
5. Using lines, rectangle and circle write a program that draws 2D house translate, scale it by any value.
6. Write a program draws a square and rotates when a key is pressed. Again when a key is pressed it
translates.
7. Write a program that reflects the triangle you created in question 1 about y = x.
8. Create a rectangle with vertices (270,340), (270, 140), (370, 140) and (370, 340). Shear the rectangle
relative to line y = 140 with shear parameter shx = 2.
9. Given a pivot point (10, 10) and rotation angle 370 find the overall rotating matrix.

Bekretsyon B Page 9
 2D Transformations

10. Write a C++ program that performs a 53 clockwise rotation on a rectangle described by coordinates
(30, 30), (130, 30), (130, 90), (30, 90) about the point(80, 60) and then draws the object. Use two
functions in your program; one to perform the rotation and the other to draw the rotated object.
11. Magnify a triangle with vertices (1, 1), (4, 1) and (2, 3) to twice its size while keeping the vertex (2,3)
fixed.
Answers to Summary Questions
A. 1. Translation 2. Translation/Shift vector 3. Rotation 4. Rotation/Pivot point, Scaling factor 5.
Reflection
B. 1. True 2. False 3. True 4. False 5. True

Bekretsyon B Page 10