2D TRANSFORMATIONS

Dr. Md Zahidul Islam

Professor
Dept. of ICT, IU

Dr. M Zahidul Islam 1

 2D Transformations
• What is transformations?
– The geometrical changes of an object from a
current state to modified state.
• Why the transformations is needed?
– To manipulate the initially created object and to
display the modified object without having to
redraw it.

Dr. M Zahidul Islam 2

 2D transformations
and matrices

• Affine Transformation:
– Known as line preserving transformations
– That means after performing transformation on
any object, structure of the object doesn’t
change.
– Also called Solid Body Transformation
 2D Transformations

y
x

x y

x
Dr. M Zahidul Islam 4
 2D Transformations
• 2 ways
– Object Transformation
• Alter the coordinates descriptions an object
• Translation, rotation, scaling etc.
• Coordinate system unchanged
– Coordinate transformation
• Produce a different coordinate system

Dr. M Zahidul Islam 5

 2D Transformation

• Given a 2D object, transformation is to change the

object’s
– Position (translation)
– Size (scaling)
– Orientation (rotation)
– Shapes (shear)
• Apply a sequence of matrix multiplication to the
object vertices
Dr. M Zahidul Islam 6
 Basic Idea of 2D
transformation
• Vector or matrix representation of any point is a 2x1 matrix
like below:

• General formula for transformation is like below:

…………….eq.1
• Here T describes the nature of transformation and known as
geometric or affine transformation matrix
• represents the transformed matrix where-

• Lets know some more details before going to different

types of transformations. From eq.1 we can write-

• And we get two equations using matrix multiplication-

 Matrix Math
• Why do we use matrix?
– More convenient organization of data.
– More efficient processing
– Enable the combination of various
concatenations
• Matrix addition and subtraction

a c a± c
± = b± d
b d

Dr. M Zahidul Islam 8

 Matrix Math
– How about it?
– a ± c d
b e f

• Matrix Multiplication
– Dot product
a b e f
. = a.e + b.g a.f + b.h
c d g h c.e + d.g c.f + d.h

Dr. M Zahidul Islam 9

 Matrix Math
• What about this?
1 2 . 1 2 = 6 6
3 1

2 1 2
3
. 3 1 = !!

• Type of matrix
a b a
b
Row-vector Column-vector
Dr. M Zahidul Islam 10
 Matrix Math
• Is there a difference between possible
representations?
⎡ a b ⎤ ⎡ e ⎤ ⎡ ae + bf ⎤
⎢ ⎥∙ ⎢ ⎥ =⎢ + ⎥
⎣ c d ⎦ ⎣ f ⎦ ⎣ ce d ⎦
f
⎡a b⎤
[e f ]∙ ⎢ ⎥ = [ae + cf be + d ]
⎣c d⎦ f

⎡a c⎤
[e f ]∙ ⎢ ⎥ = [ae + bf ce + d ]
⎣b d ⎦ f

Dr. M Zahidul Islam 11

 Matrix Math
• We’ll use the column-vector representation for a
point.
• Which implies that we use pre-multiplication of
the transformation – it appears before the point to
be transformed in the equation.

• What if we needed to switch to the other

convention?
Dr. M Zahidul Islam 12
 Point representation

• We can use a column vector (a 2x1 matrix) to

represent a 2D point x
y
• A general form of linear transformation can be
written as:
x’ = ax + by + c X’ a b c x
OR Y’ = d e f * y
1 0 0 1 1
y’ = dx + ey + f

Dr. M Zahidul Islam 13

 2D Translation
• In translation, an object is displaced a given distance and direction from its original
position.
• It shifts all points on an object by an equal amount.
• Translation operation can be written as vector addition like below-
P’ = P +Tr
• Here, Tr is the translation matrix and

• So, equations for the transformed coordinates are-

x’ = x + tx
y’ = y + ty

• Note: We cannot directly represent translations as matrix multiplication, as

we did for scaling and rotation.
 2D Translation
Y 6
Example
Note: House
5 shifts position
relative to
tx = 2 4 origin
3
ty = 3 2

0
1 2 3 4 5 6 7 8 9 10
X

• Preserves lengths (isometric)

• Can we represent translation in our general

transformation matrix?

• Yes, by using homogenous coordinates.

 Translation

• Re-position a point along a straight line

• Given a point (x,y), and the translation distance
(tx,ty)
The new point: (x’, y’) (x’,y’
x’ = x + tx )
ty
y’ = y + ty (x,y)
tx

OR P’ = P + T where P’ = x’ p= x T= tx
y’ y ty

Dr. M Zahidul Islam 16

 Translation
• A translation moves all points
in an object along the same
straight-line path to new
positions.
• The path is represented by a ?
vector, called the translation or
shift vector.
• We can write the components: ty=4
p'x = px + tx
p'y = py + ty (2, 2) tx= 6
• or in matrix form:
P' = P + T

x’ x tx
y’ = y + ty
Dr. M Zahidul Islam 17
 2D Rotation
• Rotation must be done about a point.
• Amount of rotation is denoted by Ө .
• Rotation through an angle Ө we get :
[P’ ]= [R] [P ]
where ,

and
x’ = x cos Ө – y sin Ө
y’ = x sin Ө + y cos Ө
• So,the rotation matrix is :

• Types of rotation:
– Positive Rotation: Counter clockwise about the origin.
– Negative Rotation: Clockwise about the origin.
 2D Rotation
• Default rotation center: Origin (0,0)

θ> 0 : Rotate counter clockwise

θ

θ< 0 : Rotate clockwise

θ
Dr. M Zahidul Islam 19
 2D Rotation
Example
Y 6

5 Note: House
shifts position
4 relative to
3 origin

0
1 2 3 4 5 6 7 8 9 10
X

Figure: (Positive Rotation) Rotating an object with Ө=30

 Rotation
• A rotation repositions
all points in an object
along a circular path in P’
the plane centered at
the pivot point. θ

• First, we’ll assume the P

pivot is at the origin.

Dr. M Zahidul Islam 21

 Rotation
• Review Trigonometry
=> cos φ = x/r , sin φ= y/r
• x = r. cos φ, y = r.sin φ
P’(x’, y’)

=> cos (φ+ θ) = x’/r

θ
•x’ = r. cos (φ+ θ)
r
•x’ = r.cosφcosθ -r.sinφsinθ y’ P(x,y)
•x’ = x.cos θ – y.sin θ
θ r y
φ
=>sin (φ+ θ) = y’/r x’ x
y’ = r. sin (φ+ θ)
•y’ = r.cosφsinθ + r.sinφcosθ Identity of Trigonometry

•y’ = x.sin θ + y.cos θ Dr. M Zahidul Islam 22

 Rotation
• We can write the components:
p'x = px cos θ – py sin θ
p'y = px sin θ + py cos θ

• or in matrix form: P’(x’, y’)

P' = R • P
• θ can be clockwise (-ve) or θ
counterclockwise (+ve as our
example). y’
P(x,y)
• Rotation matrix
θ r y
φ
x’ x

Dr. M Zahidul Islam 23

 Rotation matrix
• Properties:
– Determinant of the rotation matrix is 1.
– Rotation matrix is orthogonal.
– Transpose of rotation matrix is equal to the
inverse of the matrix
 Rotation
• Example
– Find the transformed point, P’, caused by
rotating P= (5, 1) about the origin through an
angle of 90°.

Dr. M Zahidul Islam 25

 2D Scaling
• Scaling is caused by the diagonal elements of matrix T.
• If b=0, c=0 and diagonal elements a & d are non-zero then transformed
coordinates will be-
x' = a.x, y' = d.y;
This is scaling by a in x, d in y.
• We say x is scaled by a and y is scaled by d.
• We say a and d as scaling factors and represent them by Sx and Sy respectively.
• Sx : Scale factor along the X axis
• Sy : Scale factor along the Y axis
• Thus the scaling matrix is-
 2D Scaling (Cont..)
• Enlargement:
– If a=d and greater than 1
• Compression:
– If 0<a=d<1
• Special Case:
– If a=d=1 and b=c=0 then T is Identity matrix and odject size
remains same.
• Uniform Scaling:
– If a=d
• Non-uniform Scaling:
– If a & d are not equal.
 2D Scaling Example
Y 6
Note: House
5 shifts position
relative to
4
origin
3

0
1 2 3 4 5 6 7 8 9 10
X
We know, [P’ ] = [S] [P] where
and

• Does not preserve lengths

• Does not preserve angles (except when scaling is
uniform)
 2D Scaling

Scale: Alter the size of an object by a scaling factor

(Sx, Sy), i.e.

x’ = x . Sx x’ Sx 0 x
=
y’ = y . Sy y’ 0 Sy y

(4,4)

(2,2) Sx = 2, Sy = 2

(2,2)
(1,1)
Dr. M Zahidul Islam 29
 2D Scaling

(4,4)

(2,2) Sx = 2, Sy = 2

(2,2)
(1,1)

▪ Not only the object size is changed, it also moved!!

▪ Usually this is an undesirable effect

Dr. M Zahidul Islam 30

3x3 2D Scaling Matrix

x’ Sx 0 x
=
y’ 0 Sy y

x’ Sx 0 0 x
y’ = 0 Sy 0 * y
1 0 0 1 1

Dr. M Zahidul Islam 31

 Scaling
• Scaling changes the size of an
object and involves two scale
factors, Sx and Sy for the x-
and y- coordinates P’
respectively.
• Scales are about the origin.
• We can write the components:
p'x = sx • px
P
p'y = sy • py
or in matrix form:
P' = S • P
Scale matrix as:

Dr. M Zahidul Islam 32

 Scaling
• If the scale factors are in between 0
and 1 the points will be moved
closer to the origin the object
will be smaller.
• Example :
•P(2, 5), Sx = 0.5, Sy = 0.5
P(2, 5)
•Find P’ ?

P’

Dr. M Zahidul Islam 33

 Scaling
• If the scale factors are in between 0
and 1 the points will be moved
P’
closer to the origin the object
will be smaller.
• Example :
•P(2, 5), Sx = 0.5, Sy = 0.5
P(2, 5)
•Find P’ ?
•If the scale factors are larger than 1
the points will be moved away P’
from the origin the object will be
larger.
• Example :
•P(2, 5), Sx = 2, Sy = 2
•Find P’ ?
Dr. M Zahidul Islam 34
 Scaling
• If the scale factors are the same, Sx
P’
= Sy uniform scaling
• Only change in size (as previous
example)
•If Sx ≠ Sy differential scaling.
•Change in size and shape
•Example : square rectangle
•P(1, 3), Sx = 2, Sy = 5 , P’ ? P(1, 2)

What does scaling by 1 do?

What is that matrix called?
What does scaling by a negative value do?

Dr. M Zahidul Islam 35

 2D Reflection
• What if Sx and/or Sy <0 ?

sx = -1 sy = 1

original

sx = 1 sy = -1
 2D Shearing
• Shearing: whenever we give force on any object ,it tries to bend
on the direction of the force. This is known as shearing.
• Useful for forming general affine transformation.
• Shear normally soft objects.
• Conditions:
– a=d=1 : that means Diagonal elements will be 1
– (c=0 and b=2) or (c=2 and b=0): any of the off diagonal
element will be 0 here.
– So equations for the transformed coordinates will be-

or

y‘ linearly depends on x x‘ linearly depends on y

2D Shearing Example
Y 6

0
Figure: 1
y
2 3 4 5 6
y
7 8 9 10
X
Shearing
using (1,1)
(0,1) (2,1) (3,1)

(0,0) (1,0) x (0,0) (1,0)

x

y y
Figure:
Shearing (0,3/2) (1,2)

using (0,1) (1,1)

(0,1/2) (1,1)
(0,0) (1,0)
x x
 Put it all together
• Translation: x’ = x + tx
y’ y ty

• Rotation: x’ cos(θ) -sin(θ) x

= *
y’ sin(θ) cos(θ) y

• Scaling: x’ Sx 0 x
= *
y’ 0 Sy y

Dr. M Zahidul Islam 39

 Combining transformations
We have a general transformation of a point:
P' = M • P + A

When we scale or rotate, we set M, and A is the additive

identity.

When we translate, we set A, and M is the multiplicative

identity.

To combine multiple transformations, we must explicitly

compute each transformed point.

It’d be nicer if we could use the same matrix operation all the
time. But we’d have to combine multiplication and addition
into a single operation.

Dr. M Zahidul Islam 40

 Homogenous Coordinates
y y
w
x
x

• Let’s move our problem into 3D.

• Let point (x, y) in 2D be represented by point (x, y, 1) in the
new space.
• Scaling our new point by any value a puts us somewhere along
a particular line: (ax, ay, a).
• A point in 2D can be represented in many ways in the new
space.
• (2, 4) ---------- (8, 16, 4) or (6, 12, 3) or (2, 4, 1) or etc.
Dr. M Zahidul Islam 41
 Homogenous Coordinates
• We can always map back to the original 2D point by dividing
by the last coordinate
• (15, 6, 3) --- (5, 2).
• (60, 40, 10) - ?.

• Why do we use 1 for the last coordinate?

• The fact that all the points along each line can be mapped
back to the same point in 2D gives this coordinate system its
name – homogeneous coordinates.

Dr. M Zahidul Islam 42

 Matrix Representation
• Point in column-vector:
x
y
1

• Our point now has three coordinates. So our matrix is

needs to be 3x3.
• Translation

Dr. M Zahidul Islam 43

 Matrix Representation
• Rotation

• Scaling

Dr. M Zahidul Islam 44

 Composite Transformation
• We can represent any sequence of transformations
as a single matrix.
– No special cases when transforming a point – matrix •
vector.
– Composite transformations – matrix • matrix.

• Composite transformations:
– Rotate about an arbitrary point – translate, rotate,
translate
– Scale about an arbitrary point – translate, scale,
translate
– Change coordinate systems – translate, rotate, scale

• Does the order of operations

Dr. M Zahidul Islammatter? 45
 Composition Properties
• Is matrix multiplication associative?
?
– (A.B).C = A.(B.C)
⎛ ⎡a b⎤ ⎡ e f ⎤⎞ ⎡i j ⎤ ⎡ a + bg af + bh⎤ ⎡i j⎤
⎜⎢ ⎥ ⎟⎟ ∙
⎜ c d⎥ ∙ ⎢g ⎢ ⎥ = ⎢e + ⎥ ∙ ⎢ ⎥
⎝⎣ ⎦ ⎣ h⎦ ⎠ ⎣k l ⎦ ⎣ c dg cf + dh ⎦ ⎣k l⎦
e
⎡ aei + bgi + afk + bh aej + bgj + afl + bhl ⎤
=⎢ ⎥
k ce dgj cfl dhl ⎦
⎣ ce + dgi + cf + dh + + +
i k k j
⎡a b⎤ ⎛ ⎡ e f ⎤ ⎡i j ⎤ ⎞ ⎡ a b ⎤ ⎡ ei + fk ej + fl ⎤
⎢ ⎥ ∙ ⎜⎜ ⎢ ⎥∙ ⎢ ⎥ ⎟⎟ = ⎢ ⎥∙ ⎢ + ⎥
⎣c d⎦ ⎝ ⎣g h⎦ ⎣k l ⎦ ⎠ ⎣ c d ⎦ ⎣ gi h gj hl ⎦
+
k
⎡ aei + afk + bgi + bh aej + afl + bgj + bhl ⎤
=⎢ ⎥
⎣Dr. M Zahidul Islam
ce + cf + dgi + k
dh ce + cfl + dgj + dhl ⎦
46
i k k j
 Composition Properties
• Is matrix multiplication commutative?
?
–A.B=B.A

Dr. M Zahidul Islam 47

 Order of operations
So, it does matter. Let’s look at an example:
1. Translate 1. Rotate
2. Rotate 2. Translate

Dr. M Zahidul Islam 48

 Composite Transformation Matrix
• Arrange the transformation matrices in order from right to left.
• General Pivot- Point Rotation
• Operation :-
1. Translate (pivot point is moved to origin)
2. Rotate about origin
3. Translate (pivot point is returned to original position)
T(pivot) • R(θ) • T(–pivot)
1 0 tx cosθ -sinθ 0 1 0 -tx
0 1 ty sinθ cosθ 0 0 1 -ty
0 0 1 . 0 0 1 . 0 0 1

1 0 tx cosθ -sinθ -tx cosθ+ ty sinθ

0 1 ty sinθ cosθ -tx sinθ - ty cosθ
0 0 1 . 0 0 1

cosθ -sinθ -tx cosθ+ ty sinθ + tx

sinθ cosθ -tx sinθ - ty cosθ + ty
Dr. M Zahidul Islam 49
0 0 1
 Composite Transformation Matrix

• Example
– Perform 60° rotation of a point P(2, 5) about a
pivot point (1,2). Find P’?
cosθ -sinθ -tx cosθ+ ty sinθ + tx x Sin 60 = 0.8660
sinθ cosθ -tx sinθ - ty cosθ + ty . y
Kos 60 = 1/2
0 0 1 1

0.5 -0.866 -1.0.5 + 2.0.866 + 1 2

0.866 0.5 -1.0.866- 2.0.5 + 2 . 5
0 0 1 1

0.5 - 0.866 2.232 2 -1.098

0.866 0.5 0.134 . 5 = 4.366 P’ = (-1, 4)
0 0 1 1 Zahidul Islam
Dr. M 1 50
 Without using composite
homogenus matrix
• Example
– Perform 90° rotation of a point P(5, 1) about a pivot
point (2, 2). Find P’?
• 1. Translate pivot point ke asalan ( tx = -2, ty = -2)
– Titik P(5, 1 ) P’ (3, -1)
• 2. Rotate P ‘ = 90 degree
• P’(3, -1) -- > kos 90 -sin 90 3 = 0 -1 3 = 1
• sin 90 kos 90 -1 1 0 -1 3
• 3. Translate back ke pivot point (tx = 2 , ty = 2)
• titik (1, 3 ) titik akhir (3, 5)

Dr. M Zahidul Islam 51

 Composite Transformation Matrix
General Fixed-Point Scaling
Operation :-
1. Translate (fixed point is moved to origin)
2. Scale with respect to origin
3. Translate (fixed point is returned to original position)

T(fixed) • S(scale) • T(–fixed)

Find the matrix that represents scaling of an

object with respect to any fixed point?

Given P(6, 8) , Sx = 2, Sy = 3 and fixed point

(2, 2). Use that matrix to find P’?

Dr. M Zahidul Islam 52

 Answer
1 0 tx Sx 0 0 1 0 -tx
0 1 ty 0 Sy 0 0 1 -ty
0 0 1 . 0 0 1 . 0 0 1

1 0 tx Sx 0 -tx Sx
Sx 0 -tx Sx + tx
0 1 ty 0 Sy -ty Sy
= 0 Sy -ty Sy + ty
0 0 1 . 0 0 1
0 0 1

x =6, y = 8, Sx = 2, Sy = 3, tx =2, ty = 2

2 0 -2( 2) + 2 6 10
0 3 -2(3) + 2
. 8 = 20
0 0 1 1 1

Dr. M Zahidul Islam 53

 Composite Transformation Matrix
General Scaling Direction
Operation :-
1. Rotate (scaling direction align with the coordinate axes)
2. Scale with respect to origin
3. Rotate (scaling direction is returned to original position)

R(–θ) • S(scale) • R(θ)

Find the composite transformation matrix

by yourself !!

Dr. M Zahidul Islam 54

 S . T . R
Sx 0 0 1 0 tx cosθ -sinθ 0
0 Sy 0 0 1 ty sinθ cosθ 0
0 0 1 . 0 0 1 . 0 0 1

Sx 0 0 cosθ -sinθ tx
0 Sy 0 sinθ cosθ ty
0 0 1 . 0 0 1

Sxcosθ Sx(-sinθ) Sx tx
Sy sinθ Sy cosθ Sy ty
0 0 1

Dr. M Zahidul Islam 55

 Other transformations
Reflection:

x-axis y-axis

Dr. M Zahidul Islam 56

 Other transformations
Reflection:

origin line x=y

Dr. M Zahidul Islam 57

 Other transformations
Shear:

x-direction y-direction

Dr. M Zahidul Islam 58

Coordinate System Transformations
• We often need to transform points from one coordinate system to
another:
1. We might model an object in non-Cartesian space (polar)
2. Objects may be described in their own local system
3. Other reasons: textures, display, etc

Dr. M Zahidul Islam 59