Embed Size (px)
Citation preview
2D T f ti2D Transformation
2D Transformation
• Transformation changes an object’s:P i i (T l i )– Position (Translation)
– Size (Scaling)– Orientation (Rotation)– Shape (Deformation)
• Transformation is done by a sequence of matrix operations applied on vertices.
Vector Representation
• If we define a 2D vector as: x
• A transformation in general can be defined as:
y
A transformation in general can be defined as:
'x a b x c '
'x ax by cy dx ey f 'x a b c x
'y d e y f
y y f '
'x a b c xy d e f y
1 1 1
Transformation: Translation
• Given a position (x y) and anGiven a position (x, y) and anoffset vector (tx, ty):
'''
x x txy y ty
' 1' 1
x tx xy ty y
' 1x x tx ' 1
1 1 1y ty y
' 1y y ty
Transformation: Translation
• To translate the whole shape:To translate the whole shape:
Transformation: Rotation
• Default rotation center: originDefault rotation center: origin
Transformation: Rotation• If We rotate around the origin,H t t t t ( ) b l f θ ?• How to rotate a vector (x, y) by an angle of θ ?
• If we assume:• If we assume:x r cosy r siny r sin
x ' r cos( )x cos( )y ' r sin( )
Transformation: Rotation
x r cosi
x ' r cos( )' i ( )y r sin y ' r sin( )
Before Rotation After Rotation
x ' r cos cos r sin sin x cos ysiny ' r cos sin r sin cos x sin ycos
x 'y '
cos sin
sin cos
xy
y sin cos y
x 'y '
cos sinsin cos
xy
y
1
sin cos
1
y1
Transformation: Rotation
• To translate the whole shape:To translate the whole shape:
Transformation: Scaling• Change the object size by a factor of s:
x ' s xy ' s y
x 'y '
s
s
xy
x 'y '
ss
1
xy
y s y y s y 1 1 1
(4 2)(2, 1)
(4, 2)
(-2, -1)
s = 2
(-4, -2)
Transformation: Scaling• But when the object is not center at origin
( )(10, 6)
(5, 3)
s = 2(6, 4)
(1, 1) (2, 2)(3, 2)
Transformation: Scaling
• Isotropic (uniform) scaling
x ' s x x 'y '
ss
xy
or
p ( ) g
y ' s yy1
s
1
y1or
x ' sx x x '
sx
x
• Anistropic (non‐uniform) scaling
x sx xy ' sy y
y '1
sy
1
y1
or
Summaryx '
'
1
1
x
txt
• Translation:y ' 1 y ty
x 'y '
cos sin
sin cos
xy
• Rotation
x ' x
y s cos y
xy '
sxsy
xy
• Scaling
Summaryx 'y '
1 ox1 oy
xy
• Translation:
x '
cos sin
x
y1
oy1
y1
y '1
sin cos
1
y1
• Rotation
x 'y '
ss
xy
• Scaling1
1
1
We use the homogenous coordinate to make sure transformations have the same form.
Why use 3‐by‐3 matrices?
• Transformations now become the consistent.• Represented by as matrix‐vectorRepresented by as matrix vector multiplication.
• We can stack transformations using matrix multiplications.
Some math…
T t th l if
0 0
1 1
u vu v • Two vectors are orthogonal if:1 1
2 2
u , vu v
0 0 1 1 2 2u v= 0u v u v u v
0
1T
vv 1T
0 1 2 2
u v= u vv
u u u v
A Quiz
12
10
12
10
u 2
3
, v 01
u 21
, v 01
Some math…
| | | • A matrix is orthogonal if0 1 2
| | |m m m| | |
M
and only if:| | |
mi m j 0, i, j (i j)
Some math…
• A matrix M is orthogonal if and only if:T0T
T 10 1 2
m| | |
m= m m m
M M
0 1 2T2
m m mm
| | |
M M
??
?
T T T0 0 0 1 0 2T T T1 0 1 1 1 2
m m m m m mm m m m m m
Diagonal Matrix
?
T T T2 0 2 1 2 2m m m m m m
mi m j 0, i, jDiagonal Matrix
Some math…
A t i li d if
0
1
vv • A vector is normalized if:1
2
vv
0 0 1 1 2 2 1v v v v v v
0
1T
vv 1T
0 1 2 2
v v= v v=1v
v v v v
Some math…
| | | • A matrix is orthonormal0 1 2
| | |m m m| | |
M
if and only if:| | |
mi m j 0, i, j (i j)Ortho:
mi mi 1,Normalized:
Some math…
• A matrix M is orthonormal if and only if:T0T
T 10 1 2
m| | |
m= m m m
M M 0 1 2T2
m m mm
| | |
M M
11
1
T T T0 0 0 1 0 2T T T1 0 1 1 1 2
m m m m m mm m m m m m
Identity Matrix
1
T T T2 0 2 1 2 2m m m m m m
Identity Matrix
Examples
• A 2D rotational matrix is orthonormal:
x 'y '
m0 m1 x
y cos sin
sin cos
xy
y y sin cos y
m0 m1 cos sin sin cos 0Ortho:
m0 m0 cos cos sin sin 1Normalized:m1 m1 cos cos sin sin 11 1
Examples
• Is a 2D scaling matrix orthonormal? (if sx, sy is t 1)not 1)
x '
m m x
sx 0
xy '
m0 m1 y 0 sy
y
m0 m1 sx 0 0 sy 0Ortho:
m0 m0 sx sxNormalized:m1 m1 sy sy
SummaryTransformation Exists? Ortho? Normalized?
Translation No NA NATranslation No NA NA
Rotation Yes Yes Yes
Scaling Yes Yes NoScaling Yes Yes No
2D Transformation (2‐by‐2 matrix)
Transformation Exists? Ortho? Normalized?
Translation Yes No No
Rotation Yes Yes Yes
Scaling Yes Yes NoScaling Yes Yes No
2D Transformation (3‐by‐3 matrix)
Transformation: Shearing
• y is unchanged.y g• x is shifted according to y.
x ' x h yy ' y
x 'y '1
1 h1
1
xy1
or
y y 1 1 1
Transformation: Shearing
'x ' 1
x x ' xy ' g x y
y '1
g 1
1
y1
or
Facts about shearing
• Any 2D rotation matrix can be defined as the• Any 2D rotation matrix can be defined as the multiplication of three shearing matrices.
• Shearing doesn’t change the object area.
• Shearing can be defined as:rotation‐>scaling‐>rotation
In fact,• Without translation, any 2D transformationmatrix can be defined as:matrix can be defined as:
Rotation‐>Scaling‐>rotation' x '
y '
a b
c d
xy
x 'y '
cos sinsin cos
sxsy
cos sinsin cos
xy
Orthonormal Diagonal Orthonormal
i l l i i ( )Singular Value Decomposition (SVD)
Another fact
• Same thing when using homogenous coordinates:
x 'y '
a bc d
xy
y1
c d1
y
1
x ' i x x 'y '1
cos sinsin cos
1
sxsy
1
cos sinsin cos
1
xy1
1 1 1 1 1 Orthonormal Diagonal Orthonormal
Conclusion
• Translation, rotation, and scaling are three basic transformations.
• The combination of these can represent any transformation in 2D.transformation in 2D.
Th t’ h O GL l d fi th th• That’s why OpenGL only defines these three.
Rotation Revisit
Rotate about the origin Rotate about any center?
Arbitrary Rotation(ox, oy)
==
Step 1:Translate (-ox, -oy)
Step2:Rotate (θ)
Step 1:Translate (ox, oy)
x 'y '
1 ox1 oy
cos sinsin cos
1 ox1 oy
xy
1
1
1
1
1
Scaling Revisit (10, 6)( , )
(6, 4)
(5, 3) (2, 2)
(10, 6)
(1, 1)(3, 2)
(3 2)(3, 2)
Arbitrary Scaling
=(ox, oy)
=
Step 1:Translate (-ox, -oy)
Step2:Scale(sx, sy)
Step 1:Translate (ox, oy)
x ''
1 ox1
sx
1 ox1
xy '
1
1 oy
1
sy1
1 oy1
y1
(ox, oy) can be arbitrary too!
Rigid Transformation
• A rigid transformation is:O th l M t i
x ''
a b cd f
x
Orthonormal Matrix
y '1
d e f
1
y1
• Rotation and translation are rigid transformation.
• Any combination of them is also rigid.
Affine Transformation• An affine transformation is:
x ' b x 1 b x xy '1
a b cd e f
1
xy1
1 c1 f
1
a bd e
1
xy1
• Rotation, scaling, translation are affine transformation.
1 1 1 1 1 1
• Any combination of them (e.g., shearing) is also affine.
A ffi f i b d d i• Any affine transformation can be decomposed into:Translation‐>Rotation‐>Scaling‐>Rotation
(Fi t)(L t) (First)(Last)
We can also compose matrix
x
x ' Translation Scaling Rotation Translation y
1
M1 M2 M3 M4
y '1
vv’
v’ = (M (M ( M (M v))))v = (M1 (M2( M3 (M4 v))))
v’ = M v
Some Math• Matrix multiplications are associative:
A B C A B C A B C • Matrix multiplications are not commutative:
A B C A B C A B C
• Some exceptions are:A B B A
• Translation X Translation• Scaling X Scaling• Rotation X Rotation• Uniform scaling X Rotation
For example• Rotation and translation are not commutative:
1 11
0.6 0.80.8 0.6
0.6 0.8 10.8 0.6
1
1
1
Orders are important!0.6 0.8
1 1
0.6 0.8 0.6
Orders are important!
0.8 0.61
1
1
0.8 0.6 0.8
1
How OpenGL handles transformation
• All OpenGL transformations are in 3D.
• We can ignore z‐axis to do 2D transformation.g
For example
• 3D Translation• 3D Translation
glTranslatef(tx,�ty,�tz)
• 2D Translation• 2D Translation
glTranslatef(tx,�ty,�0)
For example• 3D Rotation
lT l t f( l i i i )
• 2D Rotation
glTranslatef(angle,�axis_x,�axis_y,�axis_z)
glTranslatef(angle,�0,�0,�1)
Z‐axis (0, 0, 1) to toward you
OpenGL uses two matrices:
Each object’s local coordinate
ModelView Matrix
Each object’s World coordinate
Projection Matrix
jFor example:
gluOrtho2D(…)Projection Matrix
Screen coordinate
gluOrtho2D(…)
Screen coordinate
How OpenGL handles transformation
• So you need to let OpenGL know which matrix to• So you need to let OpenGL know which matrix to transform:
glMatrixMode(GL MODELVIEW);
• You can reset the matrix as:
glMatrixMode(GL_MODELVIEW);
You can reset the matrix as:
glLoadIdentity();
For Example
Xcode time!
