2D TRANSFORMATIONS

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.
 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
 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
 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
 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
 Matrix Math
• Is there a difference between possible
representations?
a b   e  ae  bf 
      
c d   f  ce df 

a b 
e f     ae cf be df 
c d 

a c 
e f     ae  bf ce df 
b d 
 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
 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.
 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 

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

P’(x’, y’)
• Rotation matrix


cos  sin  
R y’
 sin  cos  P(x,y)
 r y

x’ x
 Rotation
• Example
– Find the transformed point, P’, caused by
rotating P= (5, 1) about the origin through an
angle of 90.
cos  sin    x   x  cos  y  sin  
 sin   
 cos   y   x  sin   y  cos 

5  cos 90  1  sin 90

 
5  sin 90  1  cos 90

5  0  1 1
 
5 1  1 0
 1
 
5
 Scaling
• Scaling changes the size of an
object and involves two scale
factors, Sx and Sy for the x-
P’
and y- coordinates
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:
sx 0
S
0 s y 
•
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’
•
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’ ?
 Scaling
• If the scale factors are the same,
P’
Sx = 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, 2)
•P(1, 3), Sx = 2, Sy = 5 , P’ ?

What does scaling by 1 do?

What is that matrix called?
What does scaling by a negative value do?
 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.
 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.
 Matrix Representation
• Point in column-vector:
x
y
1

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

needs to be 3x3.
• Translation
 x  1 0 t x   x 
 y    0 1 t    y 
   y  

 1  0 0 1   1 
 Matrix Representation
• Rotation

 x  cos  sin  0  x 
 y   sin  cos 0   y 
  
 1   0 0 1  1 

• Scaling

 x   s x 0 0  x 
 y    0 sy 0   y 
  
 1   0 0 1  1 
 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 matter?

 Composition Properties
• Is matrix multiplication associative?
?
– (A.B).C = A.(B.C)
 a b  e f   i j  ae bg af bh  i j
    
 c d   g h   k
   
l  ce dg cf  dh  k

l
  
aei bgi afk bhk aej bgj afl bhl 

 cei dgi cfk dhk cej dgj cfl dhl 

a b   e f  i j   a b  ei  fk ej  fl 
            
c d   g h  k l   c d  gi hk gj  hl 
aei afk bgi bhk aej afl bgj bhl 
 
cei cfk dgi dhk cej cfl dgj dhl 
 Composition Properties
• Is matrix multiplication commutative?
?
–A.B=B.A

a b   e f  ae  bg af  bh
c d    g  
h   ce  dg cf  dh 
  

e f  a b   ea  fc eb  fd 
g     
 h   c d   ga  hc gb  hd 
 Order of operations
So, it does matter. Let’s look at an example:
1. Translate 1. Rotate
2. Rotate 2. Translate
 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
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
1 Kos 60 = 1/2
0 0 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
1
0 0 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 1
 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’?
 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 0 1 . 0 0 1
0 Sy -ty Sy + ty
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
 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 !!
 Other transformations
Reflection:

1 0 0
x-axis y-axis
0  1 0 
 
0 0 1

  1 0 0
 0 1 0
 
 0 0 1
 Other transformations
Reflection:

 1 0 0
origin 0 1 0  line x=y
 0  1 0 1 0 0
   
 0 0 1 0 0 1
 Other transformations
Shear:

x-direction
1 shx 0  1 0 0
y-
0 1 0
direction
 sh 1 0
  y
0 0 1  0 0 1