Transformations

2D Transformations

y
x
Applications:
- Animation
x y - Image/object manipulation
- Viewing transformation
- etc.

2
 2D Transformation
• Transformations : -
1. GEOMETRIC
2. COORDINATE
• We have two alternatives, either the geometric
objects are transformed or the coordinate system is
transformed.

3
 Geometric Transformations
• Geometric Transformations
– Position (translation) Translations and Reflection
– Size (scaling)
– Orientation (rotation)
– Shapes (shear)
• Various Geometric transformations are :
– Translation
– Rotation
– Scaling
– Refloection
– Searing

4
 Point Representation

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

represent a 2D point x
y

5
 1. 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

6
 2. Rotation
A) About Origin
• Default rotation center: Origin (0,0)

Rotate counter clockwise


o x

Rotate clockwise

o x
7
 Rotation contd...
(x,y) -> Rotate about the origin by  (x’,y’)

(x’, y’)  (x,y)

r

How to compute (x’, y’) ?

8
 Rotation contd..
(x,y) -> Rotate about the origin by  y
(x’,y’)
in anticlockwise direction
 (x,y)
r

How to compute (x’, y’) ?
o
x

x = r cos () y = r sin ()

x’ = r cos () y’ = r sin ()

9
 Rotation contd...
(x’,y’)
x = r cos () y = r sin ()
x’ = r cos () y = r sin ()  (x,y)
r

x’ = r cos ()
= r cos() cos() – r sin() sin()
= x cos() – y sin()
y’ = r sin ()
= r sin() cos() + r cos()sin()
= y cos() + x sin()

10
 Rotation contd...

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

Matrix form?

x’ =
cos() -sin() x
y’ sin() cos() y

3 x 3?
11
 B) Fixed (Pivot) Point Rotation

• To rotate about an object (triangle PQR) about

arbitrary point P (px,py) by :

(px,py)

12
 Fixed (Pivot) Point Rotation
contd...
• To rotate about an arbitrary point P (px,py) by :
– Translate the object so that P will coincide with the
origin: T(-px, -py)

(px,py)

13
 Fixed (Pivot) Point Rotation
contd...
• To rotate about an arbitrary point P (px,py) by :
– Translate the object so that P will coincide with the
origin: T(-px, -py)
– Rotate the object: R()

(px,py)


14
 Fixed (Pivot) Point Rotation
contd...
• To rotate about an arbitrary point P (px,py) by :
– Translate the object so that P will coincide with the
origin: T(-px, -py)
– Rotate the object: R()
– Translate the object back: T(px,py)

(px,py)


15
 Fixed (Pivot) Point Rotation
contd...
Step 1: Translate the object so that P will coincide
with the origin: T(-px, -py)
Step2: Rotate the object: R()
Step 3: Translate the object back: T(px,py)

 Put in matrix form: T(px,py) R() T(-px, -py) *P

x’ 1 0 px cos() -sin() 0 1 0 -px x

y’ = 0 1 py sin() cos() 0 0 1 -py y
1 00 1 0 0 1 0 0 1 1
16
 3. Scaling
A) About Origin
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)

17
 Scaling contd...
(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

18
 B )Pivot point Scaling contd...

 To scale about an arbitrary fixed point P

(px,py):
Step 1:Translate the object so that P will coincide
with the origin: T(-px, -py)
Step 2: Scale the object: S(sx, sy)
Step 3: Translate the object back: T(px,py)

(px,py)

19
 Pivot point Scaling contd...

 The standard scaling matrix will only

anchor at (0,0)
Sx 0 0
0 Sy 0
0 0 1

 What if I want to scale about an arbitrary

pivot point?
20
 Pivot point Scaling contd...

 To scale about an arbitrary fixed point P

(px,py):

(px,py)

21
 Pivot point Scaling contd...

 To scale about an arbitrary fixed point P

(px,py):
 Translate the object so that P will coincide with
the origin: T(-px, -py)

(px,py)

22
 Pivot point Scaling contd...

 To scale about an arbitrary fixed point P

(px,py):
 Translate the object so that P will coincide with
the origin: T(-px, -py)
 Scale the object: S(sx, sy)

(px,py)

23
 Pivot point Scaling contd...

 To scale about an arbitrary fixed point P

(px,py):
Step 1:Translate the object so that P will coincide
with the origin: T(-px, -py)
Step 2: Scale the object: S(sx, sy)
Step 3: Translate the object back: T(px,py)

(px,py)

24
 Put Translation, Rotation, Scaling together

• Translation:
x x t x
 
y y t y

• Rotation:
x cos   sin  t x
 
y sin  cos  t y

• Scaling:
x s x 0 tx
 
y 0 sy t y

25
 Homogeneous coordinates 1
• Uniform representation is required of translation,
rotation, scaling
• Uniform representation of object points and
transformation matrices
• Add extra coordinate to the point
x = (x, y, h) where h=1

H&B 7-2:225-228
Translation, Rotation , Scaling (Homogeneous system)
Translation : Rotation :
 x'   1 0 t x  x   x'   cos  sin  0  x 
         
y '
    0 1 t y  y   y '    sin  cos 0  y 
 1   0 0 1  1  1  0 0 1  1 
       
or or
P '  T(t x , t y )P P '  R ( )P

Scaling :
 x'   sx 0 0  x 
    
 y'   0 sy 0  y 
 1  0 0 1  
    1 
or
P '  S( s x , s y )P

27
 4. Reflection
1. Reflction abt X axis
2. Reflection ant Y axis
y
3. Reflection abt X=Y line
4. Reflection abt X=-Y line
5. Reflect X=5 line
6. Reflection Y=mX+c line
x

1. Reflext over x-axis:

x’= x, y’= y
or  1 0 0  H&B 7-4:240-242
 
P'   0  1 0 P
0 0 1
 
 Reflect over origin
y :
2. Reflect over origin abt X=-Y line
x’= x, y’=  y
or
 1 0 0
  x
P'   0  1 0 P
 0 0 1
 
Same as P'  R (180)P
H&B 7-4:240-242
reflection about x and y axes reflection in origin about
X=-y line
 5. Shearing
Shear in x:
1 shx   x   x  shx y 
Shx        
0 1   y   y 
Shear in y:

 1 0  x   x 
Shy       
sh
 y 1  y   shy .x  y 
 Beware!
• Matrix multiplication is not commutative
• The order of the transformations is vital
– Rotation followed by translation is very different from
translation followed by rotation
– careful with the order of the matrices!
• Small commutativity:
– rotation commute with rotation, translation with
translation…
 Numericals
1. Rotate a unit square with diagonal points as (0,0) , (-1,-1) by angle 30
degree, anticlockwise.
2. Rotate a triangle A(10,5), B(5,7), C(12,10) by 45 degree clockwise such
that point A is taken to (10,10)
3. Apply fixed point rotation on a rectangle A(10,10),B(5,5), C(5,2),D(7,7)
so that point B is fixed after rotation.
4. Reflect given triangle A,B,C, about a line X=3
5. Reflect a unit square with diagonal points A(0,10) B(1,9) about Y=X line.

33