Professional Documents
Culture Documents
2D Transformations
What is transformations?
The geometrical changes of an object from a
current state to modified state.
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
Matrix Math
Why do we use matrix?
More convenient organization of data.
More efficient processing
Enable the combination of various
concatenations
c
d
a c
b d
Matrix Math
How about it?
a c
d
b
Matrix Multiplication
Dot product
a
c
b
d
e
g
f
= a.e + b.g
h
c.e + d.g
a.f + b.h
c.f + d.h
Matrix Math
What about this?
1
2
3
1
3
1
3
Type of matrix
a
Row-vector
2
1
2 =
1
=
tak boleh!!
a
b
Column-vector
Matrix Math
Is there a difference between possible
representations?
a b e ae bf
c d f ce df
ce df
a c
ae bf
b d
be df
a b
ae cf
c d
Matrix Math
Well use the column-vector representation for a
point.
Which implies that we use pre-multiplication of
the transformation it appears before the point to
be transformed in the equation.
A B x Ax By
C D y Cx Dy
Translation
or in matrix form:
P' = P + T
tx
x
x
y = y + ty
?
ty=4
(2, 2)
tx = 6
Rotation
A rotation repositions
all points in an object
along a circular path in
the plane centered at
the pivot point.
First, well assume the
pivot is at the origin.
Rotation
Review Trigonometry
P(x, y)
P(x,y)
x
Identity of Trigonometry
Rotation
P(x, y)
or in matrix form:
P' = R P
can be clockwise (-ve) or
counterclockwise (+ve as our
example).
Rotation matrix
cos
sin
sin
cos
P(x,y)
Rotation
Example
Find the transformed point, P, caused by
rotating P= (5, 1) about the origin through an
angle of 90.
cos
sin
sin
x x cos y sin
5 sin 90 1 cos 90
5 0 1 1
5 1 1 0
Scaling
0
s y
Scaling
P(2, 5)
Scaling
P(2, 5)
Scaling
If the scale factors are the same,
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, 3), Sx = 2, Sy = 5 , P ?
P(1, 2)
Combining transformations
We have a general transformation of a point:
P' = M P + A
When we scale or rotate, we set M, and A is the additive
identity.
When we translate, we set A, and M is the multiplicative
identity.
To combine multiple transformations, we must explicitly
compute each transformed point.
Itd be nicer if we could use the same matrix operation all the
time. But wed have to combine multiplication and addition
into a single operation.
Homogenous Coordinates
y
y
w
x
Homogenous Coordinates
We can always map back to the original 2D point by dividing
by the last coordinate
(15, 6, 3) --- (5, 2).
(60, 40, 10) - ?.
Why do we use 1 for the last coordinate?
The fact that all the points along each line can be mapped
back to the same point in 2D gives this coordinate system its
name homogeneous coordinates.
Matrix Representation
Point in column-vector:
x
y
1
Our point now has three coordinates. So our matrix is
needs to be 3x3.
Translation
x 1 0 t x x
y 0 1 t y
y
1 0 0 1 1
Matrix Representation
Rotation
x cos
y sin
1 0
sin
cos
0
0 x
0 y
1 1
Scaling
x s x
y 0
1 0
0
sy
0
0
0
1
x
y
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
Composition Properties
Is matrix multiplication associative?
?
(A.B).C = A.(B.C)
a b e
c d g
j ae bg
l ce dg
af bh i
cf dh k
c d g
f i
h k
a b ei fk
c d gi hk
l
aej bgj afl bhl
ej fl
gj hl
Composition Properties
Is matrix multiplication commutative?
?
A. B = B .A
f ae bg
h ce dg
af bh
cf dh
f a b ea fc
h c d ga hc
eb fd
gb hd
a b e
c d g
e
g
Order of operations
So, it does matter. Lets look at an example:
1.
2.
Translate
Rotate
1.
2.
Rotate
Translate
1
0
0
0
1
0
tx
ty
1
1
0
0
0
1
0
tx
ty
1
cos
sin
0
.
.
cos
sin
0
cos
sin
0
-sin 0
cos 0
0
1
1
0
0
0
1
0
-tx
-ty
1
0.5
-0.866 -1.0.5 + 2.0.866 + 1
0.866 0.5 -1.0.866- 2.0.5 + 2
0
0
1
0.5 - 0.866 2.232
0.866 0.5
0.134
0
0
1
2
5
1
.
.
x
y
1
Sin 60 = 0.8660
Kos 60 = 1/2
2
5
1
-1.098
4.366
1
P = (-1, 4)
2. Rotate P = 90 degree
sin 90 kos 90 -1
1
0 -1
3
3. Translate back ke pivot point (tx = 2 , ty = 2)
Answer
1
0
0
1
0
0
0
1
0
0
1
0
tx
ty
1
tx
ty
1
.
.
Sx 0
0 Sy
0
0
0
0
1
1
0
0
0
1
0
-tx
-ty
1
Sx 0 -tx Sx
0 Sy -ty Sy
0 0
1
x =6, y = 8, Sx = 2, Sy = 3, tx =2, ty = 2
2
0
0
0
3
0
-2( 2) + 2
-2(3) + 2
1
6
8
1
10
20
1
Sx 0 -tx Sx + tx
0 Sy -ty Sy + ty
0 0
1
latihan
Dapatkan titik akhir bagi P(5, 8) jika titik
tersebut diputarkan sebanyak 90 darjah,
kemudian ditranslate sebanyak (-6, 9) dan
akhirnya diskala dengan faktor skala (2,
0.5).
Sx 0
0 Sy
0
0
0
0
1
Sx 0
0 Sy
0
0
0
0
1
.
.
T
1
0
0
0
1
0
cos
sin
0
.
tx
ty
1
-sin tx
cos ty
0
1
Sxcos Sx(-sin) Sx tx
Sy sin Sy cos Sy ty
0
0
1
R
cos
sin
0
-sin 0
cos 0
0
1
Other transformations
Reflection:
1 0 0
0 1 0
0 0 1
x-axis
y-axis
1 0 0
0 1 0
0 0 1
Other transformations
Reflection:
1 0 0
0 1 0
0 0 1
origin
0 1 0
1 0 0
0 0 1
line x=y
Other transformations
Shear:
1 shx
0 1
0 0
x-direction
0
0
1
1
sh
y
0
0 0
1 0
0 1
y-direction