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 
 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.
 A B   x   Ax  By 
C D    y   Cx  Dy 
     

• What if we needed to switch to the other

convention?
 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’)
• or in matrix form:
P' = R • P
  can be clockwise (-ve) or 
counterclockwise (+ve as our
example). y’
P(x,y)
• Rotation matrix
 r y
cos  sin   
R
 sin  cos  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-
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:
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?
 Pivot-Point Rotation

(xr,yr) (xr,yr) (xr,yr) (xr,yr)

Translate Rotate Translate

T  xr , y r   R    T   xr ,  y r   R  xr , y r ,  
1 0 x r  cos   sin  0 1 0  x r  cos   sin  x r (1  cos  )  y r sin  
0 1 y    sin  cos  0  0 1  y    sin  cos  y (1  cos  )  x sin  
 r    r  r r 
0 0 1   0 0 1 0 0 1   0 0 1 
General Fixed-Point Scaling

(xf,yf) (xf,yf) (xf,yf) (xf,yf)

Translate Scale Translate

T  x f , y f   S  s x , s y   T   x f , y f   S  x f , y f , s x , s y 
1 0 xf  s x 0 0 1 0  xf  s x 0 x f (1  s x ) 
0 1 yf 0 sy 0  0 1  yf 0 sy y f (1  s y )
    
0 0 1   0 0 1 0 0 1   0 0 1 
 Reflection
• Reflection with respect to the axis
• reflections on the x-axis • reflections on the y-axis • On the xy axis (Origin)

1 0 0    1 0 0   1 0 0
0  1 0   0 1 0  0  1 0
     
0 0 1  0 0 1  0 0 1
 Reflection
• Reflection with respect to the axis
• reflections on the x-axis • reflections on the y-axis • On the xy axis (Origin)

1 0 0    1 0 0   1 0 0
0  1 0   0 1 0  0  1 0
     
0 0 1  0 0 1  0 0 1

y 1 y y
1 1’ 1’

2 3 2 3 3’ 2 3’ 2
x x 3 x
2’ 3’ 1

1’ 2

Reflections on the x-axis Reflections on the y-axis Reflections on the origin

 Reflection
 Reflection with respect to a Line

y
0 1 0 
1 0 0 
  x
0 0 1
y = reflection on x


 Clockwise rotation of 45  Reflection about the x
axis  Counterclockwise rotation of 45 
y y 1
y
2 3
x x
2’ 3’ x

1’
 Shear
• Converted to a parallelogram
y (1,1) y
(0,1)
1 sh x 0 (2,1) (3,1)
0 1 0
 (0,0) (1,0) x
(0,0) (1,0)
x
0 0 1
x’ = x + shx · y, y’ = y
On x (Shx=2)
• Transformed to a shifted parallelogram
(Y = Yref)

y y
(1,1) (1,1) (2,1)
1 sh x  sh x  y ref  (0,1)
0 1 0  (1/2,0)
  (0,0) (1,0)
x (3/2,0) x
0 0 1 
(0,-1)

x’ = x + shx · (y-yref), y’ = y (Shx=1/2, yref=-1)

 Shear
• Transformed to a shifted parallelogram
(X = Xref)

(0,3/2) (1,2)
 1 0 0  y y
 sh 1  sh y  x ref  (1,1)
 y  (0,1)
 0 0 1  (0,1/2) (1,1)
x x
(0,0) (1,0) (-1,0)

x’ = x, y’ = shy · (x-xref) + y
(Shy=1/2, xref=-1)
 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.
 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 cos 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
 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 to random( tx = -2, ty = -2)
– Point P(5, 1 )  P’ (3, -1)
• 2. Rotate P ‘ = 90 degree
• P’(3, -1) -- > cos 90 -sin 90 3 = 0 -1 3 = 1
• sin 90 cos 90 -1 1 0 -1 3
• 3. Translate back to the pivot point (tx = 2 , ty = 2)
• points (1, 3 )  end point(3, 5)
 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 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
 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 !!
 Exercise
• Get the end point of P (5, 8) if the point is
rotated by 90 degrees, then ditranslate of
(-6, 9) and finally scaled by the scale factor
(2, 0.5).
 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
 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:

1 shx x-direction
0  1 0 0
y-direction
0 1 0  sh
  y 1 0
0 0 1  0 0 1
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