2IV60 Computer Graphics
2D transformations
Jack van Wijk
TU/e
Overview
• Why transformations?
• Basic transformations:
– translation, rotation, scaling
• Combining transformations
– homogenous coordinates, transform. Matrices
• First 2D, next 3D
Transformations
instantiation…
world
train
viewing…
image
wheel
modelling…
animation…
Why transformation?
• Model of objects
world coordinates: km, mm, etc.
Hierarchical models::
human = torso + arm + arm + head + leg + leg
arm = upperarm + lowerarm + hand …
• Viewing
zoom in, move drawing, etc.
• Animation
Translation
Translate over vector (tx, ty)
x’=x+ tx, y’=y+ ty
or
P'  P  T, with
y
T
P+T
P
x
 tx 
 x' 
 x
P'    , P    and T   
 y' 
 y
ty 
H&B 7-1:220-222
Translation polygon
Translate polygon:
Apply the same operation
on all points.
Works always, for all
transformations of
objects defined as a set
of points.
y
T
x
H&B 7-1:220-222
Rotation
Rotate over an angle a :
x'  x cos a  y sina
y '  x sina  y cos a
Or
P'  RP, with
 x' 
 cos a
P '    , R  
 y'
 sina
y
P’
a
P
x
 sina 
 x
 and P   
cos a 
 y
H&B 7-1:222-223
Rotation around a point Q
Rotate around origin :
Px '  Px cos a  Py sina
Py '  Px sina  Py cos a
y
P’
a P
PQ
Q
Rotate around Q over an angle a :
Px '  Qx  ( Px  Qx ) cos a  ( Py  Q y ) sina
x
Py '  Q y  ( Px  Qx ) sina  ( Py  Q y ) cos a
H&B 7-1:222-223
Scaling
Schale with factor sx and sy:
x’= sx x, y’= sy y
or
P'  SP, with
 sx
 x' 
P'    , S  
 y' 
0
y
P’
P
Q’
Q
x
0
 x
 and P   
s y 
 y
H&B 7-1:224-225
Scaling with respect to a point F
Scale with factors sx and sy:
Px’= sx Px, Py’= syPy
With respect to F:
Px’  Fx = sx (Px  Fx),
Py’  Fy = sy (Py  Fy)
or
Px’= Fx + sx (Px  Fx),
Py’= Fy + sy (Py  Fy)
y
P’
P
PF
F
Q’
Q
x
H&B 7-1:224-225
Transformations
• Translate with V:
y
S
T=P+V
• Schale with factor sx = sy =s:
S = sP
• Rotate over angle a:
T
R
P
x
R’x = cos a Px  sin a Py
R’y = sin a Px + cos a Py
H&B 7-2:225-228
Transformations…
• Messy!
• Transformations with respect to points:
even more messy!
• How to combine transformations?
H&B 7-2:225-228
Homogeneous coordinates 1
• Uniform representation of translation,
rotation, scaling
• Uniforme representation of points and
vectors
• Compact representation of sequence of
transformations
H&B 7-2:225-228
Homogeneous coordinaten 2
• Add extra coordinate:
P = (px , py , ph) or
x = (x, y, h)
• Cartesian coordinates: divide by h
x = (x/h, y/h)
• Points: h = 1 (for the time being…),
vectors: h = 0
H&B 7-2:225-228
Translation matrix
T ranslation :
 x'   1 0 t x  x 
  
 
 y '    0 1 t y  y 
 1   0 0 1  1 
  
 
or
P'  T(t x , t y )P
H&B 7-2:225-228
Rotation matrix
Rotation :
 x'   cos 
  
 y '    sin
1  0
  
 sin
cos 
0
0  x 
 
0  y 
1  1 
or
P '  R ( ) P
H&B 7-2:225-228
Scaling matrix
Scaling :
 x'   s x
  
 y'    0
1  0
  
0
sy
0
0  x 
 
0  y 
1  1 
or
P'  S( s x , s y ) P
H&B 7-2:225-228
Inverse transformations
T ranslation :
T -1 (t x , t y )  T(t x ,t y )
Rotation :
R -1 ( )  R ( )
Scaling :
1 1
S ( s x , s y )  S( , )
sx s y
1
H&B 7-3:228
Combining transformations 1
P'  M1P
first transformation...
P ''  M 2 P '
second transform ation...
Combined:
P ''  M 2 (M 1 P)
 M 2M 1P
 MP withM  M 2 M 1
H&B 7-4:228-229
Combining transformations 2
P '  T(t1x , t1 y )P
first translation
P ''  T(t 2 x , t 2 y )P '
second translation
Combined:
P ''  T(t 2 x , t 2 y )T(t1x , t1 y ) P
 1 0 t 2 x  1 0 t1x 



  0 1 t 2 y  0 1 t1 y P 
 0 0 1  0 0 1 



 T(t1x  t 2 x , t1x  t 2 y )P
 1 0 t1x  t 2 x 


 0 1 t1 y  t 2 y P
0 0

1


H&B 7-4:229
Combining transformations 3
Composite translations :
T(t 2 x , t 2 y )T(t1x , t1 y )  T(t1x  t 2 x , t1x  t 2 y )
Compositerotations :
R ( 2 ) R (1 )  R (1   2 )
Compositescaling :
S( s2 x , s2 y )S( s1x , s1 y )  S( s1x s2 x , s1 y s2 y )
H&B 7-4:229
Rotation around a point 1
Rotate over angle  around point R :
1) T ranslate such that R coincides with origin;
2) Rotate over angle  around origin;
3) T ranslate back.
R
1)
2)
3)
H&B 7-4:229-230
Rotation around a point 2
Rotate over angle  around point R :
1) P '  T( Rx ,  R y )P
2) P  R( )P
''
'
3) P '''  T(Rx ,Ry )P ''
R
1)
2)
3)
H&B 7-4:229-230
Rotation around point 3
1) P '  T( Rx ,  R y )P
2) P ''  R( )P '  R( )T( Rx ,  R y )P
3) P '''  T(Rx ,Ry )P ''
 T(Rx ,Ry )R( )P '
 T(Rx ,Ry )R( )T( Rx ,  R y )P
R
1)
2)
3)
H&B 7-4:229-230
Rotation around point 4
1 - 3) P '''  T(Rx ,Ry )R( )T( Rx ,  R y )P
or
 cos 
''' 
P   sin
 0

 sin
cos 
0
Rx (1  cos  )  R y sin 

R y (1  cos  )  Rx sin P

1

R
1)
2)
3)
H&B 7-4:229-230
Scaling w.r.t. point 1
Scale with factors s x and s x w.r.t.point F :
1) T ranslate such that F coincides with origin;
2) Schale w.r.t.origin;
3) T ranslate back again.
F
1)
2)
3)
H&B 7-4:230-231
Scaling w.r.t.point 2
Schale w.r.t.point F :
1) P '  T( Fx ,  Fy )P
2) P ''  S(s x , s y )P '
3) P '''  T(Fx ,Fy )P ''
F
1)
2)
3)
H&B 7-4:230-231
Scaling w.r.t.point 3
1 - 3) P '''  T(Fx ,Fy )S ( s x , s y )T( Fx ,  Fy )P
or
 sx
''' 
P  0
0

0
sy
0
Fx (1  s x ) 

Fy (1  s y ) P

1

F
1)
2)
3)
H&B 7-4:230-231
Scale in other directions 1
Scale with factors s1 and s2 w.r.t.rotated frame :
1) Rotate such that frame coincides with standard xy - frame;
2) Scale w.r.t.origin;
3) Rotate back again.
1)
2)
3)
H&B 7-4:230-231
Scale in other directions 2
Scale in other direction :
1) P '  R( )P
2) P ''  S(s1 , s2 )P '
3) P '''  R(  )P ''
1)
2)
3)
H&B 7-4:230-231
Scale in other directions 3
1 - 3) P '''  R(  )S(s1 , s2 )R( )P
or
 s1 cos 2   s2 sin 2 

'''
P   ( s2  s1 ) cos  sin


0

1)
2)
( s2  s1 ) cos  sin
s1 sin 2   s2 cos 2 
0
0 
0 P

1

3)
H&B 7-4:230-231
Order of transformations 1
Rotation, translation…
Translation, rotation…
y’
y
y
x’
x
Matrix multiplication does not commute.
x' '  T(2,3)R(30 )x
x
x' '  R(30)T(2,3 )x
The order of transformations makes a difference!
H&B 7-4:232
Order of transformations 2
• Pre-multiplication:
P’ = M n M n-1…M 2 M 1 P
Transformation M n in global coordinates
• Post-multiplication:
P’ = M 1 M 2…M n-1 M n P
Transformation M n in local coordinates: the
coordinate system after application of
M 1 M 2…M n-1
H&B 7-4:232
Order of transformations 3
OpenGL: glRotate, glScale, etc.:
• Post-multiplication of current
transformation matrix
• Always transformation in local coordinates
• Global coordinate version: read in reverse
order
H&B 7-4:232
Order of transformations 4
Local transformations:
Global transformations:
y
y
x
Local trafo
x' '  R(30)T(2,3
)x
interpretation
x
glTranslate(…);
Global trafo
glRotate(…);
interpretation
H&B 7-4:232
Matrices in general
rotation and scaling
translation
H&B 7-4:233-235
Direct construction of matrix
If you know the target frame:
Construct matrix directly.
y
Define shape in nice local
u,v coordinates, use matrix
transformation to put it
in x,y space.
B
A
T
x
H&B 7-4:233-235
Direct construction of matrix
If you know the target frame:
Construct matrix directly.
P'  Au  Bv  T , or
x
u 
 
 
 y   A B T  v  , or
1 
1 
 
 
 x   Ax Bx Tx  u 
  
 
 y    Ay B y Ty  v 
1   0
1 
0
1
  
 
y
B
A
T
x
H&B 7-4:233-235
Rigid body transformation
P'  MP , of
 x   rxx
  
 y    ryx
1   0
  
only rotation
rxy
ryy
0
translation
trx   u 
 
try   v 
1  1 
 rxx rxy 


 ryx ryy  : orthonormal submatrix


 rxx 
 rxy 
A    and B   , | A | 1, | B | 1, A  B  0
 ryx 
 ryy 
y
B
T
A
x
H&B 7-4:233-235
Other 2D transformations
• Reflection
• Shear
Can also be combined
H&B 7-4:240
Reflection over axis
Reflext over x-axis:
x’= x, y’= y
or
1 0 0


P'   0  1 0 P
0 0 1


y
x
H&B 7-4:240-242
Reflect over origin
Reflect over origin:
x’= x, y’=  y
or
 1 0 0


P'   0  1 0 P
 0 0 1


y
x
Same as P'  R (180)P
H&B 7-4:240-242
Shear
Shear the y-as:
x’=x+fy, y’=y
or
1 f 0


P'   0 1 0 P
0 0 1


y

x
with f  tan 
H&B 7-4:242-243
Transformations coordinates
Given (x,y)-coordinates,
Find (x’,y’)-coordinates.
y

Reverse route as
object transformaties.
(x0, y0)
x
H&B 7-8:246-248
Transformations coordinates
Given (x,y)-coordinates,
Find (x’,y’)-coordinates.
y

Example: user points at
(x,y), what’s the position
in local coordinates?
(x0, y0)
x
H&B 7-8:246-248
Transformations coordinates
Given X: (x,y)-coordinates,
Find X’: (x’,y’)-coordinates.
Standard:
X=MX’ (object trafo:
from local to global)
Here:
X’=M-1X (from global to local)
y

(x0, y0)
x
H&B 7-8:246-248
Transformations coordinates
y
Given X: (x,y)-coordinates,
Find X’: (x’,y’)-coordinates.

Here:
(x0, y0)
-1
X’=M X (from global to local)
x
Approach 1:
- Determine “standard matrix” M (from local
to global coordinates) and invert
H&B 7-8:246-248
Transformations coordinates
y
Given X: (x,y)-coordinates,
Find X’: (x’,y’)-coordinates.

Here:
(x0, y0)
-1
X’=M X (from global to local)
Approach 2:
- construct transformation that maps local
frame to global (reverse of usual).
x
H&B 7-8:246-248
Transformations coordinates
Given X: (x,y)-coordinates,
Find X’: (x’,y’)-coordinates.
Here:
X’=M-1X (from global to local)
Approach 2:
1. Translate (x0, y0) to origin;
2. Rotate x’-axis to x-axis.
y

(x0, y0)
x
H&B 7-8:246-248
Transformations coordinates
Given X: (x,y)-coordinates,
Find X’: (x’,y’)-coordinates.
Here:
X’=M-1X (from global to local)
Approach 2:
M-1 = R()T(x0, y0)
y

(x0, y0)
x
H&B 7-8:246-248
OpenGL 2D transformations 1
Internally:
• Coordinates are four-element row vectors
• Transformations are 44 matrices
2D trafo’s: Ignore z-coordinates, set z = 0.
H&B 7-9:248-253
OpenGL 2D transformations 2
OpenGL maintains two matrices:
• GL_PROJECTION
• GL_MODELVIEW
Transformations are applied to the current matrix, to
be selected with:
• glMatrixMode(GL_PROJECTION) or
• glMatrixMode(GL_MODELVIEW)
H&B 7-9:248-253
OpenGL 2D transformations 3
Initializing the matrix to I:
• glLoadIdentity();
Replace the matrix with M:
• GLfloat M[16]; fill(M);
• glLoadMatrix*(M);
Matrices are specified in
column-major order:
m[0]
m[1]
M
m[2]

m[3]
m[4] m[8] m[12]
m[5] m[9] m[13]
m[6] m[10] m[14]

m[7] m[11] m[15]
Multiply current matrix with M:
• glMultMatrix*(M);
H&B 7-9:248-253
OpenGL 2D transformations 4
Basic transformation functions: generate matrix and postmultiply this with current matrix.
Translate over [tx, ty, tz]:
glTranslate*(tx, ty, tz);
Rotate over theta degrees (!) around axis [vx, vy, vz]:
glRotate*(theta, vx, vy, vz);
Scale axes with factors sx, sy, sz:
glScale*(sx, sy, sz);
H&B 7-9:248-253
OpenGL 2D Transformations 5
OpenGL maintains stacks of transformation matrices.
Two operations:
• glPushMatrix():
Make copy of current matrix and put that on top of the stack;
• glPopMatrix():
Remove top element of the stack.
Handy for dealing with hierarchical models
Handy for “undoing” transformations
H&B 9-8:324-327
OpenGL 2D Transformations 6
Standard:
Using the stack:
glRotate(10, 1, 2, 0);
glScale(2, 1, 0.5);
glTranslate(1, 2, 3);
glPushMatrix();
glRotate(10, 1, 2, 0);
glScale(2, 1, 0.5);
glTranslate(1, 2, 3);
glutWireCube(1);
glutWireCube(1);
glTranslate(1, 2, 3);
glScale(0.5, 1, 0.5);
glRotate(10, 1, 2, 0);
glPopMatrix();
Shorter, more robust
Undo transformation H&B 9-8:324-327
2D transformations summarized
-
Transformations: modeling, viewing, animation;
Several kinds of transformations;
Homogeneous coordinates;
Combine transformations using matrix
multiplication.
Up to 3D!