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.
 Geometric Transformations
• Basic transformations:
– Translation
– Scaling
– Rotation
• Purposes:
– To move the position of objects
– To alter the shape / size of objects
– To change the orientation of objects
 Two-Dimensional Translation
• One of rigid-body transformation, which move objects without deformation

• Translation is applied to an object by repositioning it along a straight-line path

from one coordinate location to another.

• New coordinate (x’, y’) is obtained by adding the translation distance (tx,ty)
(translation vector or shift vector) to the original coordinate position (x,y).

x'  x  t x y'  y  t y
• Matrix representation
 x ' x t x 
P'    P    T    P'  P  T
 y ' y t y 

• (line, Polygon, circle, ellipse)

 Two-Dimensional Translation
We could translate an object by applying the equation to
every point of an object.
– Because each line in an object is made up of an infinite
set of points, however, this process would take an
infinitely long time.
– Fortunately we can translate all the points on a line by
translating only the line’s endpoints and drawing a new
line between the endpoints.
– This figure translates the “house” by (3, -4)
 Translation Example
y

4
(2, 3)
3

1
(1, 1) (3, 1)

0 1 2 3 4 5 6 7 8 9 10 x
 2D Scaling
• Scaling transformation alters the size of an object .
• Operation is carried out by multiplying the coordinate values
(x, y) of each vectors by scaling factor (sx,sy)  to produce
transformed coordinates (x’, y’).

x'  x  s x y  y  sy

• Scaling factor sx scales object in x direction , while sy scales in y

direction.

x' s x 0  x
   0   P'  S  P
 y'   s y  y
 2D Scaling
– In this figure, the house is scaled by 1/2 in x
and 1/4 in y
• Notice that the scaling is about the origin:
– The house is smaller and closer to the origin
 2D Scaling
– If the scale factor had been greater than 1, it would
be larger and farther away.
WATCH OUT: Objects grow and move!

y
6

3 6  9 
3 3
   
2

1 2 3
1  1
   
0
1 2 3 4 5 6 7 8 9 10
x
Note: House shifts position relative to origin
 Scaling
• Uniform scaling , Differential scaling

• Based on fixed point

x’ = xf+ (x - xf) sx
y’ = yf + (y – yf) sy

x’ = x. sx + xf(1 – sx)
y’ = y. sy + yf(1 – sy)
 Scaling Example
y

4
(2, 3)
3

1
(1, 1) (3, 1)

0 1 2 3 4 5 6 7 8 9 10
 Rotation
• Rotation is applied to an object by repositioning it along a
circular path in the xy plane.

• To generate a rotation of an object, we have to specify :

– Rotation angle (θ)
– Position of the rotation point/pivot point (xr,yr)
(x’, y’)
(x, y)
x’ = x cos() - y sin()
 y’ = x sin() + y cos()
 2-D Rotation

x = r cos (f)
y = r sin (f)
x’ = r cos (f + )
(x’, y’) y’ = r sin (f + )

Trig Identity…

(x, y) x’ = r cos(f) cos() – r sin(f) sin()

y’ = r sin(f) sin() + r cos(f) cos()

Substitute…


x’ = x cos() - y sin()
f y’ = x sin() + y cos()
 2-D Rotation
• This is easy to capture in matrix form:
cos   sin  
R
 sin  cos  

• Rotation about the arbitrary pivot position (xr,yr) P'  R  P

x'  xr  ( x  xr ) cos   ( y  yr ) sin  y

y '  yr  ( x  xr ) sin   ( y  yr ) cos  (x’,y’)
r

θ r
(x,y)
• Rigid-body transformation. yr φ
• (line, Polygons, circle, ellipse)
xr x
 2D Rotation
– This figure shows the rotation of the house by
45 degrees. y
6

2


1 6

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

• Positive angles are measured counterclockwise

(from x towards y)
• For negative angles, you can use the identities:
– cos(-) = cos() and sin(-) = -sin()
 Rotation Example
y

4
(4, 3)
3

1
(3, 1) (5, 1)

0 1 2 3 4 5 6 7 8 9 10
 Homogeneous Coordinates
• A point (x, y) can be re-written in homogeneous
coordinates as (xh, yh, h)
• The homogeneous parameter h is a non-
zero value such that:
xh yh
x y
h h
• We can then write any point (x, y) as (hx, hy, h)
• We can conveniently choose h = 1 so that
(x, y) becomes (x, y, 1)
 Why Homogeneous Coordinates?
• Mathematicians commonly use homogeneous
coordinates as they allow scaling factors to be
removed from equations
• We will see in a moment that all of the
transformations we discussed previously can be
represented as 3*3 matrices
• Using homogeneous coordinates allows us use
matrix multiplication to calculate
transformations – extremely efficient!
 Homogenous Coordinates
• Combine the geometric transformation into a single matrix with 3by3 matrices
• Expand each 2D coordinate to 3D coordinate with homogenous parameter
• Two-Dimensional translation matrix

 x' 1 0 t x   x 
 y '  0 1 t    y 
   y  

 1  0 0 1   1 
• Two-Dimensional rotation matrix

 x' cos   cos  0  x 

 y'   sin  cos  0   y 
     
 1   0 0 1  1 
• Two-Dimensional scaling matrix
 x'  s x 0 0  x 
 y '   0 sy 0   y 
  
 1   0 0 1  1 
 Inverse transformations
• Inverse translation matrix
1 0  t x 
T 1  0 1  t y 
0 0 1 
• Two-Dimensional translation matrix

 cos  sin 0
 
R 1   sin cos  0
 0 0 1

• Two-Dimensional translation matrix

1 
s 0 0
 x 
0 0
1
S 1
 sx 
0 0 1
 
 
 2D Reflections
y y y

x x

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x y  x

0 1 0   0 1 0 
1 0 0   1 0 0 
   
0 0 1   0 0 1 
 2D Shear
:A transformation that distorts the shape of an object such that the
transformed shape appears as if the object were composed of
internal layers that had been caused to slide over each other is called
a shear.

x-direction y-direction

1 0 0
1 shx 0  sh
0 1 0  y 1 0
   0 0 1
0 0 1
 2D Shear
• Converted to a parallelogram (Shx=2)
y (1,1) y
(0,1) (2,1) (3,1)

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

• Transformed to a shifted parallelogram

(Y = Yref) (Shx=1/2, yref=-1)
 2D Shear
• Transformed to a shifted parallelogram
(X = Xref)

(Shy=1/2, xref=-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?

 Composite Transformation
 Two successive Translations (T.T)

 Two successive Rotations (R.R)

 Two successive Scaling (S.S)

 General Pivot-Point Rotation (T.R.T)

 General Fixed-Point Scaling (T.S.T)

 General Scaling Directions (R.S.R)

 Concatenation Properties
 A.B.C=(A.B).C=A.(B.C)
 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   
l  ce dg cf  dh k
 
   h   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 
 Order of operations
So, it does matter. Let’s look at an example:
1. Translate 1. Rotate
2. Rotate 2. Translate
 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 

Composite transformations:
P  M2  M1  P    M2  M1   P  M  P
 Composite translations

   
P  T  t2 x , t2 y  T  t1x , t1 y   P  T  t2 x , t2 y   T  t1x , t1 y   P

1 0 t2 x  1 0 t1x  1 0 t1x  t2 x 
0 1 t   0 1 t   0 1 t  t 
 2y   1y   1y 2y 

0 0 1  0 0 1  0 0 1 

T  t2 x , t2 y   T  t1x , t1 y   T  t1x  t2 x , t1 y  t2 y 
Composite Rotations:
P  R  2  R 1   P  R  2   R 1   P

R  2   R 1   R 1   2 

P  R 1   2   P

Composite Scaling:

 S2 x 0 0  S1x 0 0  S1x  S2 x 0 0
 0 S 0   0 S 0   0 S  S 0 
 2y   1y   1y 2y 
 0 0 1   0 0 1   0 0 1 

S  S2 x , S2 y   S  S1x , S1 y   S  S1x  S2 x , S1 y  S2 y 
 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
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 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  x f   s x 0 x f (1  s x ) 
0 1 yf 0 sy 0  0 1  y f    0 sy y f (1  s y )
  
0 0 1   0 0 1 0 0 1   0 0 1 