Module 9 Module 9 Module 9 Module 9

2D Transformation 2D Transformation 2D Transformation 2D Transformation

Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
2
Sources
Textbook (Chapter 4: 2D transformations and
viewing)
Wiki:
http://en.wikipedia.org/wiki/Affine_transformation
http://en.wikipedia.org/wiki/Transformation_matrix
3
Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
4
1. Introduction
Transformations are the lifeblood of geometry!
In computer graphics, transformations are used to
position, orient, and scale objects as well as to
model shape.
For example, given a 2D object, transformation is p , g j ,
to change the objects
Position (translation) ( )
Orientation (rotation)
Size (scaling) ( g)
Shapes (shear)
5 5
Example: 2D transformations
Modeling
Coordinates
Scale
Translate
y
Coordinates
x
Scale
Rotate
Translate
World Coordinates
6
Example: 2D transformations
Modeling
Coordinates
y
Coordinates
x
Lets look
at this in
detail
World Coordinates
7
Example: 2D transformations
Modeling
Coordinates
y
Coordinates
x
Initial location
at (0, 0) with
x- and y-axes
aligned
8
Example: 2D transformations
Modeling
Coordinates
y
Coordinates
x
Scale .3, .3
Rotate -90
Translate 5, 3
9
Example: 2D transformations
Modeling
Coordinates
y
Coordinates
x
Scale .3, .3
Rotate -90
Translate 5, 3
10
Example: 2D transformations
Modeling
Coordinates
y
Coordinates
x
Scale .3, .3
Rotate -90
Translate 5, 3
World Coordinates
11
Problems to be addressed
What are homogeneous coordinates
What are basic 2D transformations
What are 2D affine transformations
How to represent 2D transformations using
matrix/matrices matrix/matrices
How to perform 2D transformation
12
Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
13
2. Basic 2D transformations
Basic set:
Translation
Scaling
Rotation
Some other simple transformations p
Reflection
Shear Shear
14
Point representation
P= - position vector
Y
(

y
x
P y

y
X
x
Cartesian coordinate system
15
Translation
Move a point to a new location by adding translation
amounts to the coordinates of the point amounts to the coordinates of the point.
Translate by T=(t t )
P(x,y) P(x,y)
P(x,y)
Translate by T=(t
x
,t
y
)
How to compute P?
P(x,y)
t
y
t
x
T
x = x+t
x
, ,y = y+t
y
. That is,
( ( (
t '
or P = P+T. (

+
(

=
(

y
x
t
t
y
x
y
x
'
'
16
Scaling
Change the size of the object by multiplying the
coordinates of the points by scaling factors (s s ) coordinates of the points by scaling factors (s
x
,s
y
).
P=(x,y) P=(x,y) . How to compute P?
scaling
or or P = SP
(

=
(

y s
x s
y
x
y
x
'
'
(

=
(

y
x
s
s
y
x
y
x
0
0
'
'
(4,4)

y
y
scaling matrix S
(2,2)
s
x
= 2, s
y
= 2
(2,2)
( , )
Note: When the size is changed, the object may also move.
(1,1)
17
Uniform vs non-uniform scaling
Uniform scaling: s
x
=s
y
s
x
=s
y
= 2
Non-uniform scaling: s
x
s
y
s
x
= 2,
s
y
= 0.5
18
Rotation
Rotates a point about origin (0,0) by an angle
u u
u> 0 : Rotate counter clockwise u< 0 : Rotate clockwise
t t b t i i b
P=(x,y) P=(x,y)
How to compute (x,y)?
rotate about origin by
19
Rotation formula
In triangle ABP,
P(x,y)
y
or
(

=
(

|
|
sin
cos
r
r
y
x
u
P(x,y)
y
In triangle ACP,

| y
( )( + ( u | '
A
B C
u
|
r
x
y
x
or
( )
( )
(

+
+
=
(

u |
u |
sin
cos
'
'
r
r
y
x

x
( )

+ = + = '
= = '
+
u u u | u |
u u u | u |
u |
cos sin cos sin sin cos
sin cos sin sin cos cos
Expand
y x r r y
y x r r x
Therefore,
or
20
Other 2D transformations: reflection
Produce a mirror image of an object.
Reflection about the x axis y Reflection about the x-axis
or
(

=
(

x x
1 0
0 1
'
'
y y
x x =
'
'
x
y
(2,1)
(2 1)
or
Reflection about the y-axis
(

y y 1 0 ' y y = '
x (2,-1)
y
or (

=
(

y
x
y
x
1 0
0 1
'
'
y y
x x
=
=
'
'
y
(2,1)
(-2,1)
Reflection relative to the coordinate origin

y y 1 0 y y
x
y
or
(

=
(

y
x
y
x
1 0
0 1
'
'
y y
x x
=
=
'
'
x
(2,1)
(-2,-1)
21
Other 2D transformations: shear
Change the shape of an object such that the transformed
shape appears as if the object were composed of internal shape appears as if the object were composed of internal
layers that had been caused to slide over each other.
x-direction shear
( ( (
'
y y
or
(

=
(

y
x a
y
x
1 0
1
'
'
y y
y a x x
=
+ =
'
'
x x
y-direction shear y
y
or (

=
(

y
x
b y
x
1
0 1
'
'
y x b y
x x
+ =
=
'
'
x x
22
x x
Recap
Translation: P = P+T
Scaling: P = SP
Rotation: P = RP
Reflections: P = R
x
P, P = R
y
P, P = R
o
P
Shears: P = H
x
P, P = H
y
P
where S, R, R
x
,R
y
, R
o
, H
x
, H
y
are 22 matrices.
23
Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
24
3. Whats wrong with Cartesian coordinates?
Scaling, rotation, reflection, and shear transformations
can be expressed as a 22 matrix multiplication can be expressed as a 22 matrix multiplication,
which allows to pre-multiply all the matrices together.
For example For example,
P = R S P for first scaling and then rotation.
P = S H R P for first reflection then shear and finally scaling P = S H
x
R
y
P for first reflection, then shear, and finally scaling.
However translation cannot be expressed as a 22 However, translation cannot be expressed as a 22
matrix multiplication, which makes composition difficult.
A better solution: homogeneous coordinates!
25
Homogeneous coordinates
If 2D Cartesian coordinate representation (x,y) is
expanded to a 3 element representation (x y h) expanded to a 3-element representation (x
h
,y
h
,h)
where h is a nonzero value such that
y x
h h
then (x
h
,y
h
,h) is called homogeneous coordinates
, ,
h
y
y
h
x
x
h h
= =
(
h
,y
h
, ) g
of point (x,y).
(x,y) has multiple representations in homogeneous
coordinates. For example, x
h
=hx, y
h
=hy.
h=1 (x,y) (x,y,1)
h=2 (x,y) (2x,2y,2)
26
Geometric meaning
(x,y) P
2d
= (x,y,1)
P
2d
is a projection of P
h
=(hx,hy,h) onto the z=1 plane.
z
P
h
=(hx,hy,h)
h
( , y, )
P ( 1)
z=1
y
P
2d
=(x,y,1)
An infinite number of points correspond to P
2d
. They
x
y
constitute the whole line (hx,hy,h).
Eg., (2,1,1), (4,2,2), (-6,-3,-3) all represent point (2,1).
27
Representation conversion
Cartesian homogeneous
0 ,
ng homogenizi
=
(
(
(

=
(
(
(

(
(

h hy
hx
y
x
x
Homogeneous Cartesian
,
1 (
(

(
(

h
y y
y
Homogeneous Cartesian
(
(

(
(

(
(

x
x h
h
x
h
h
(
(
(

(
(
(

=
(
(
(

h
y
h
h
y
h
h
y
h
h
zing inhomogeni
1


(

h
h 1
28
Advantages of homogeneous coordinates
Homogeneous coordinates seem unintuitive, but
they make graphics operations easier (in hardware
and software).
In particular, homogeneous coordinates allow all
three transformations (translation, rotation and three transformations (translation, rotation and
scaling) to be expressed using 33 matrices, which
makes transformation composition be expressed as p p
multiplication of matrices.
29
Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
30
4. Representation using a 3x3 matrix
With homogeneous coordinates, all basic 2D
transformations can be represented using 3x3
matrices.
Matrices are a convenient and efficient way to y
represent a sequence of transformations so that
we can perform all transformations using
matrix/vector multiplication.
General purpose representation
Hardware matrix multiplication
31
2D translation
2D Cartesian coordinate representation
|
|
.
|

\
|
+
+
=
|
|
.
|

\
|
+
|
|
.
|

\
|
=
|
|
.
|

\
|
x x
t y
t x
t
t
y
x
y
x
'
'
Homogeneous representation
|
.

\
+
|
.

\
|
.

\
|
.

\ y y
t y t y y
Homogeneous representation
|
|

|
|
|

|
|
|

|
' 0 1 x t x
x
|
|
|
.

\
|
|
|
.

\
=
|
|
|
.

\
'
1 1 0 0
1 0
1
y t y
y
x
. \ . \ . \
1 1 0 0 1
32
2D scaling
2D Cartesian coordinate representation
|
|
.
|

\
|
|
|
|

|
=
|
|
.
|

\
|
'
' x
s
x
x
0
0
Homogeneous representation
|
.

\
|
.

\
|
.

\
' y
s
y
y
0
Homogeneous representation
|
|

|
|
|

|
|
|

|
' 0 0 x s x
x
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
1 1 0 0
0 0
1
y s y
y
x
. \ . \ . \
1 1 0 0 1
33
2D rotation
2D Cartesian coordinate representation
|
|
.
|

\
|
|
|
.
|

\
|

=
|
|
.
|

\
|
'
' x x
u u
u u
i
sin cos
Homogeneous representation
( ) y x,
( ) y x ' ',
|
.

\
|
.

\
|
.

\
' y y u u cos sin
Homogeneous representation
|
|

|
|
|

|
|
|

|
' 0 sin cos x x u u
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
1 1 0 0
0 cos sin
0 sin cos
1
y
x
y
x
u u
u u
|
.

\
|
.

\
|
.

\
1 1 0 0 1
34
2D reflections
Cartesian coordinates Homogeneous coordinates
about x-axis
|
|
|

|
|
|
|

|
|
|
|

|
'
'
0 1 0
0 0 1 x x
(
(

(
(

(
(

x x 0 1 '
about y-axis
|
|
.

\
|
|
.

\
=
|
|
.

\
'
1 1 0 0
0 1 0
1
y y
(

=
(

y y 1 0 '
about y axis
(

=
(

y
x
y
x
1 0
0 1
'
'
|
|
|
|

|
|
|
|
|

|
=
|
|
|
|

|
'
'
0 1 0
0 0 1
y
x
y
x
over the origin

y y 1 0
|
.

\
|
.

\
|
.

\
1 1 0 0 1
| | | | | |
' 0 0 1 x x
(

=
(

y
x
y
x
1 0
0 1
'
'
|
|
|
.
|

\
|
|
|
|
.
|

\
|

=
|
|
|
.
|

\
|
'
1 1 0 0
0 1 0
0 0 1
1
y
x
y
x
35
|
.

\
|
.

\
|
.

\
1 1 0 0 1
2D shears
2D Cartesian coordinate representation
x-direction y-direction
| | | | | |
' x a x 1 | | | | | |
' x x 0 1
|
|
.
|

\
|
|
|
.
|

\
|
=
|
|
.
|

\
|
' y
x a
y
x
1 0
1
|
|
.
|

\
|
|
|
.
|

\
|
=
|
|
.
|

\
|
' y
x
b y
x
1
0 1
Homogeneous representation
|
|

|
|
|

|
|
|

|
' 0 1 x a x
|
|

|
|
|

|
|
|

|
' 0 0 1 x x
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
1 1 0 0
0 1 0
0 1
1
y
x a
y
x
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
1 1 0 0
0 1
0 0 1
1
y
x
b y
x
36
. \ . \ . \ . \ . \ . \
Recap
Translation:
|
|
|

|
|
|
|

|
=
|
|
|

|
'
'
1 0
0 1
y
x
t
t
y
x
x
S li
|
|
.

\
|
|
.

\
|
|
.

\
1 1 0 0
1 0
1
y t y
y
|
|

|
|
|

|
|
|

|
' 0 0 x s x
Scaling:
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
1 1 0 0
0 0
0 0
1
y
x
s
s
y
x
y
x
Rotation:
|
|
|
|

|
|
|
|
|

|
=
|
|
|
|

|
'
'
0 cos sin
0 sin cos
y
x
y
x
u u
u u
Reflections:
|
.

\
|
.

\
|
.

\
1 1 0 0 1
| | | | | |
'
| | | | | |
' | | | | | |
' 0 0 1
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
'
1 1 0 0
0 1 0
0 0 1
1
y
x
y
x
|
|
|
.
|

\
|
|
|
|
.
|

\
|
=
|
|
|
.
|

\
|
'
'
1 1 0 0
0 1 0
0 0 1
1
y
x
y
x
|
|
|
.
|

\
|
|
|
|
.
|

\
|

=
|
|
|
.
|

\
|
'
'
1 1 0 0
0 1 0
0 0 1
1
y
x
y
x
37
. \ . \ . \
Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
38
5. 2D affine transformations
We first look at how basic 2D transformations are
composed to form one transformation.
Then we look at affine transformations that are
generalization of basic transformations. g
39
5.1 Composing transformations
Composing transformations the process of applying
l t f ti i i t f ll several transformations in succession to form one overall
transformation
If we apply transformation to a point P using matrix M If we apply transformation to a point P using matrix M
1
first, and then transformations using M
2
, and M
3
, then we
have: have:
(M
3
x (M
2
x (M
1
x P ))) = M
3
x M
2
x M
1
x P (M
3
x (M
2
x (M
1
x P ))) M
3
x M
2
x M
1
x P
M
(pre-multiply)
40
Transformation order
Matrix multiplication is associative
M
3
x M
2
x M
1
= (M
3
x M
2
) x M
1
= M
3
x (M
2
x M
1
)
Matrix multiplication may not be commutative: AxBBxA.
Example: rotation and translation are not commutative.
Translate (5,0) and then Rotate 60 degree
OR
Rotate 60 degree and then translate (5,0)??
Rotate and then translate !!
41
Applications of composing transformations
What happens if you rotate an object about an
arbitrary point (not the origin)?
What should you do to resize an object about its
own center?
42
Rotation revisit
The standard rotation matrix is used to rotate
about the origin (0,0).
|
|
|

|
|
|
|

|
=
|
|
|

|
'
'
0 cos sin
0 sin cos
y
x
y
x
u u
u u
|
|
.

\
|
|
.

\
=
|
|
.

\
1 1 0 0
0 cos sin
1
y y u u
What if I want to rotate about an arbitrary center? What if I want to rotate about an arbitrary center?
43
Rotation about an arbitrary point
To rotate about an arbitrary point P=(a,b) by u:
Translate the object so that P will coincide with the
origin: T(-a, -b)
R t t th bj t R(u) Rotate the object: R(u)
Translate the object back: T(a,b)
(a,b)
Thus P = T(a,b) R(u) T(-a, -b) P ( ) ( ) ( )
(
(
(

|
|
|
|

|
(
(
(

(
(
(

(
(
(

=
(
(
(

1 0
0 1
0 cos sin
0 sin cos
1 0
0 1
'
'
y
x
b
a
b
a
y
x
u u
u u
44
(
(

|
.

\
(
(

(
(

(
(

(
(

1 1 0 0 1 0 0 1 0 0 1
Scaling wrt an arbitrary pivot
To scale about an arbitrary point P=(a,b) by u:
Translate the object so that P will coincide with the
origin: T(-a, -b)
S l th bj t S( ) Scale the object: S(sx, sy)
Translate the object back: T(a,b)
(a,b)
Thus P = T(a,b) S(sx,sy) T(-a, -b) P ( ) ( y) ( )
(
(
(

|
|
|
|

|
(
(
(

(
(
(

(
(
(

=
(
(
(

1 0
0 1
0 0
0 0
1 0
0 1
'
'
y
x
b
a
sy
sx
b
a
y
x
45
(
(

|
.

\
(
(

(
(

(
(

(
(

1 1 0 0 1 0 0 1 0 0 1
Example 1
Q: What is the matrix of the transformation that rotates the
d li b 4 d b i d i red line segment by 45 degrees about its endpoint
A=(3,0)?
A
A
Ans:
W i l t t th t d i t f th li Wong way: simply rotate the two endpoints of the line
segment by 45 degrees.
R(45)
A
46
Example 1 (cont)
Correct way:
First translate line so A is at origin:
Tran(-3,0)
Th t t li 45 d R t(45)
A
Then rotate line 45 degrees: Rot(45)
Then translate back so A is where it was:
Tran(3 0)
A
Tran(3,0)
As a result, the final matrix should be
Tran(3 0)Rot(45)Tran( 3 0) Tran(3,0)Rot(45)Tran(-3,0) =
A
(
(

(
(

(
(

0 1 0
3 0 1
0 45 45 i
0 45 sin 45 cos
0 1 0
3 0 1
$ $
$ $
A
(
(
(

(
(
(

(
(
(

1 0 0
0 1 0
1 0 0
0 45 cos 45 sin
1 0 0
0 1 0
$ $
A
47
Example 2
Q: Derive the transformation matrix for a reflection about a
li h h h i (0 b) d h l f line that passes through point (0,b) and has an angle of
t with the x-axis (see the figure).
YYYYYY
Ans:
Step 1: Translate (0,b) to origin
Step 2: Rotate -t degrees
Step 3: Mirror reflect about X-axis
St 4 R t t t d
(0,b)
t
(0,b)
t
Step 4: Rotate t degrees
Step 5: Translate origin to (0,b)
The final matrix is the multiplication
X
t
O X O X O X O X O X
t
O
The final matrix is the multiplication
of 5 matrices:
M = Tran(0 b) Rot(t) Ref Rot(-t) Tran(0 -b) M Tran(0,b) Rot(t) Ref
x
Rot( t) Tran(0, b)
48
Example 3
Q: A 2D geometric object is rotated about the origin by 90
i l k i di ti d th l d l ti t th in clockwise direction, and then scaled relative to the
point (3,5) in the x-direction by 5 times and in the y-
direction by 2 times Finally the object is reflected direction by 2 times. Finally, the object is reflected
through the point (3,5). Write in a proper order the
matrices composing this transformation.
HINTS: Basic approach
Rotate: Rotate:
Scale: translate to the origin, scale, translate back
Reflect: translate to the origin, reflect, translate back
49
Example 3 (cont)
Therefore the matrices are
Tr(3,5) Rf
o
Tr(-3,-5) Tr(3,5) S(5,2) Tr(-3,-5) Rot(-90) =
Tr(3 5) Rfo S(5 2) Tr(-3 -5) Rot(-90) = Tr(3,5) Rfo S(5,2) Tr(-3,-5) Rot(-90) =
( ( ( ( ( 0 1 0 3 0 1 0 0 5 0 0 1 3 0 1
(
(
(

(
(
(

(
(
(

(
(
(

(
(
(

1 0 0
0 0 1
0 1 0
1 0 0
5 1 0
3 0 1
1 0 0
0 2 0
0 0 5
1 0 0
0 1 0
0 0 1
1 0 0
5 1 0
3 0 1
(

1 0 0 1 0 0 1 0 0 1 0 0 1 0 0
50
5.2 Affine transformations
Affine transformations are composites of four
t f ti t l ti t ti li d h transformations: translation, rotation, scaling, and shear.
Affine transformations map straight lines to straight lines p g g
and preserve ratios of distances along straight lines.
Affine transformations preserve parallelism of lines but not Affine transformations preserve parallelism of lines but not
lengths and angles
51
Matrix form of affine transformation
Affine transformations can always be represented by
n dy cx y
m by ax x
+ + =
+ + =
'
'
where
a, b, c, d, m, n are constants
(x y) are the coordinates of the point to be transformed (x,y) are the coordinates of the point to be transformed
(x,y) are the coordinates of the transformed point.
The general matrix form of affine transformations is
( ( ( ' x m b a x
(
(
(
(

(
(
(
(

=
(
(
(
(

'
'
y
x
n d c
m b a
y
x
52
(

1 1 0 0 1
Example 4
Q: Refer to the figure. A unit square is transformed by an
ffi t f ti h th t th 4 f th affine transformation such that the 4 corners of the
square with coordinates (0,0), (0,1),(1,1), (1,0) are
mapped to vertices labeled by mapped to vertices labeled by
respectively. Find the matrix of this affine
transformation.
Ans: From the figure, we find that vertices
have coordinates (0 0) (2 3) (8 4) and (6 1) have coordinates (0,0), (2,3), (8,4), and (6,1).
Let the transformation matrix be . Then [P] =[T][P].
(
(
(

= ] [ n d c
m b a
T
Let the transformation matrix be . Then [P ] [T][P].
That is, x = a x + b y + m
(
(

1 0 0
] [
53
y
y = c x + d y + n .
Example 4 (cont)
The first point pair (0,0) The first point pair (0,0) (0,0) gives (0,0) gives
0 = a 0 + b 0 + m, 0 = c 0 + d 0 + n 0 = a 0 + b 0 + m, 0 = c 0 + d 0 + n ..
The second point pair (0,1) The second point pair (0,1) (2,3) gives (2,3) gives
2 0 b 1 3 0 d 1 2 0 b 1 3 0 d 1 2 = a 0 + b 1 + m, 3 = c 0 + d 1 + n 2 = a 0 + b 1 + m, 3 = c 0 + d 1 + n ..
The fourth point pair (1,0) The fourth point pair (1,0) (6,1) gives (6,1) gives
6 = a 1 + b 0 + m 1 = c 1 + d 0 + n 6 = a 1 + b 0 + m 1 = c 1 + d 0 + n 6 = a 1 + b 0 + m, 1 = c 1 + d 0 + n 6 = a 1 + b 0 + m, 1 = c 1 + d 0 + n ..
Solving these equations gives Solving these equations gives Solving these equations gives Solving these equations gives
m = n = 0, b = 2, d = 3, a = 6, c = 1. m = n = 0, b = 2, d = 3, a = 6, c = 1.
Therefore Therefore
(
0 2 6 Therefore Therefore
(
(
(

=
1 0 0
0 3 1
0 2 6
] [T
54
(

Outline
1. Introduction
2. Basic 2D transformations
3. Homogeneous coordinates 3. Homogeneous coordinates
4. Matrix representation
5 2D ffi t f ti 5. 2D affine transformations
6. Summary
55
6. Summary
2D point and homogeneous coordinates
Basic 2D transformations and their 3x3 matrix
representation
Composition of transformations
2D affine transformations and their 3x3 matrix 2D affine transformations and their 3x3 matrix
representation
56