2D TRANSFORMATIONS

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.

2
 2D Geometry - points and polygons

A point in 2D is represented by two real

numbers (X,Y) Y

A line segment is represented by its two

end points (X1,Y1) (X2,Y2), or a 2x2 matrix

[ ]
X1 Y1
X2 Y2
Y

3
 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

4
 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

5
 Matrix Math
• 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

6
 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 

7
 Affine transformations
• E.g. translation, scaling, rotation, and shearing.

• Preserve parallel lines but not angles or lengths.

• Linear transformations preserve straight lines.

8
 Geometric Transformations
• Operations applied to the geometric
description of an object to change its
position, orientation, and size
• Translation position
• Rotationorientation
• Scaling size

9
 Translation: Example T(2,1)
C’

A’ B’
A B

10
 Rotation: Example R(-45)

C’

A B A’

B’

11
 Scaling: Example S(2,0.5)
C’

A’ B’
A B

12
 2D Translation
• Repositioning an object along a straight line path from
one co-ordinate location to another
(x,y) (x’,y’)
To translate a 2D position, we add translation distances tx
and ty to the original coordinates (x,y) to obtain the
new coordinate position (x’,y’)
x’= x + tx , y’= y + ty

Matrix form y

 x   x   t x 
  =   + t 
 y   y  y  T

P = P + T 13 x
 2D Translation
• Moving a polygon from position (a) to position (b) with
the translation vector (-5, 10), i.e.
 5 
T = 
 10 

y y
20 20
15 15
10 10
5 5

5 10 15 20 x 5 10 15 20 x
(a) (b)
14
 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
15
 Translations
• A translation is a displacement in a
particular direction.
• A translation is defined by specifying the
displacements x, y.
x  = x + x
y  = y + y

16
Translations

17
Translations

x = 10, y = 2, z = 0

18
 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.

19
 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

20
 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
21
 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 
22
 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’

23
 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’ ?
24
 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’ ?

25
 2D Scaling
• Altering the size of an object. Sx and Sy are the scaling
factors. If Sx = Sy then uniform scaling.
x = xS x y

y = yS y
Matrix form
Sx = Sy = ½ x
 x   S x 0  x 
  =  0  
y   Sy  y 

P = S  P
x’ x
Sx = Sy = ½
Reduced in size and moved
closer to the origin 26
 2D Scaling relative to Fixed point
• Scaling relative to fixed point (xf, yf)

x = x f + ( x  x f ) S x y
’
P1
P1
(xf , yf)
y = y f + ( y  y f ) S y P2’ P2
P3’
P3

Sx = ¼ , Sy = ½ x

27
 Example
• Consider the line with endpoints (10, 10) and (30, 25).
Translate it by tx = -20, ty = -10 and then rotate it by θ = 90º.
y
(30, 25)

(10, 10)

Right-to-left

 x   cos 90  sin 90 0  1 0 20  x 

     
y
   = sin 90 cos 90 0  0 1 10  y 
1  0  0 0 1  1 
   0 1   

28
 Solution
 x   cos 90  sin 90 0  1 0 20  x 
     
y
   = sin 90 cos 90 0  0 1 10  y 
1  0 1   
   0  0 0 1  1 
 0 1 0  1 0 20  x 
   
=  1 0 0  0 1 10  y 
 0 0 1  0 0 1  1 
   

 0 1 10  x 
  
=  1 0 20  y  y
0 0  1  (30, 25)
 1  

(10, 10)

29 x
 Solution (continue)
 x   0 1 10  x  y
    
y
   = 1 0 20  y  (30, 25)
 1  0 0  1 
   1   (-15, 10)
(10, 10)
x
(0, -10)
Point (10, 10)
 x   0 1 10 10   0 
      
y
   = 1 0 20 10
  = 10 
 1  0 0  1   1 
   1    
Point (30, 25)

 x   0 1 10  30   15 
      
y
   = 1 0 20 25
  = 10 
 1  0 0 1    
    1   1  30
 Result
y

(30, 25)
(-15, 10)
(10, 10)
x
(0, -10)

Step-by-step
y y

(10, 15)
(-15, 10)
(-10, 0)
x x
(0, -10)

31
T(-20, -10) R(90º)
 2D XForms Representation
Translation: Rotation: Scaling:
• x’=x+tx  x’=xcosθ-ysinθ  x’=x . sx
• y’=y+ty  y’=xsinθ+ycosθ  y’=y . sy
• T= tx  R = cosθ -sinθ  S = sx 0
ty sinθ cosθ 0 sy
• P’ = T+P  P’ = R . P  P’ = S . P
 Pivot point is the  Fixed point is the
Origin Origin
 +ve θ  counter clockwise  Uniform Scaling:
 -ve θ  clockwise equal factors, sx=sy
32
 Homogeneous Coordinates
• The transformation matrices become 3x3
matrices, and we have a translation matrix!

x’ 1 0 tx x
y’ = 0 1 ty y
1 0 0 1 1

New point Transformation Original point

33
 Homogeneous Coordinates
• Rotation and Scaling Matrices

cos q - sin q 0 sx 0 0
R= S=
sin q cos q 0 0 sy 0

0 0 1 0 0 1

34
 Matrix Representation
• Use 3×3 matrices to combine transformations
 x   1 0 t x  x 
    
• Translation y
   = 0 1 t y  y 
 1   0 0 1  1 
    

 x   cos   sin  0  x 
• Rotation     
 y  =  sin  cos  0  y 
1  0 1  
   0  
1

 x   S x 0 0  x 
• Scaling     
y = 0 Sy 0  y 
1  0 1  
   0  
1
35
 2D Transformation:Reflections
• A reflection is a reversal of an object with
respect to a line in 2 dimensions or a plane
in 3 dimensions.
• Generally we reflect in a line or plane
through the origin.

36
 Reflections
y
Reflection about y Initial
x =  x Object

Reflection about
origin
Reflection about x
x =  x y =  y
y =  y
37
 Reflection
About the x axis y

 x   1 0 0  x 
    
y
   = 0 1 0  y 
x
 1   0 0 1  1 
    
Reflection of an object about the x axis
About the y axis
y
 x   1 0 0  x 
    
y
   = 0 1 0  y 
 1   0 0 1  1 
    
x

Reflection of an object about the y axis

38
 Reflection
Relative to the coordinate origin
y
 x   1 0 0  x 
    
y
   = 0 1 0  y 
 1   0 0 1  1  x
    

Same as a rotation with 180º

With respect to the line y = x

y y=x
 x   0 1 0  x 
    
y
   = 1 0 0  y 
 1   0 0 1  1 
    
x
39
 2D Transformation: Shear
• Distorts the shape of the object, as though the object
has internal layers that slide.
• Example: Shear relative to the x axis; that is, the y
axis remains unchanged.
• Specify shear factor s.
• Then (x’,y’) = (x + sy, y)

Example: Shear 3
relative to x axis with
shear factor 1: 2

1
1 2 3 4 40
 2D Shear
• x-direction shear
x = x + shx  y
y

y = y 1

1 x
Matrix form Initial object

 x   1 shx 0  x 
     y
 y  = 0 1 0  y 
 1  0 0 1   1
    
1
1 2 3 x
shx = 2
41
 2D Shear
• x-direction relative to other reference line
y
x = x + shx ( y  yref )
1
y = y
1 x
yref = -1

Matrix form y

 x   1 shx  shx  yref  x  1

    
 y  = 0 1 0  y 
 1  0 0  1 
   1   1 2 3 x
yref = -1

shx = ½, yref = -1
42
 2D Shear
• y-direction shear
y
x = x
y = y + shy  x 1

1 x
Matrix form Initial object

 x   1 0 0  x  y
     3

 y  =  shy 1 0  y 
1  0 0 1  
2

    
1 1

1 x
shy = 2
43
 2D Shear
• y-direction relative to other reference line
y
x = x
y = y + shy ( x  xref )
1

xref = -1 1 x

Matrix form y
 x   1 0 0  x  2
    
 y  =  shx 1  shy  xref  y 
1  0  1  1
   0 1  
xref = -1 1 x
shy = ½, xref = -1
44
 Composite Transformation
• We can represent any sequence of transformations
as a single matrix.
– 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?

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

46
 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
47
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
cos 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 1 48
 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 ( tx = -2, ty = -2)
– 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 pivot point (tx = 2 , ty = 2)
• (1, 3 )  (3, 5)

49
 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’?

50
 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

51