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
