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 animation…

viewing…
wheel
modelling…
image
 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) y

x’=x+ tx, y’=y+ ty P+T

T
or P
P'  P  T, with x
 x'   x  tx 
P'    , P    and T   
ty 
 y'   y  

H&B 7-1:220-222
 Translation polygon
Translate polygon: y

Apply the same operation

T
on all points.
Works always, for all
x
transformations of
objects defined as a set
of points.
H&B 7-1:220-222
 Rotation
Rotate over an angle  : y

x'  x cos   y sin 

P’
y '  x sin   y cos 
 P
Or
x
P'  RP, with
 x'   cos   sin    x
P '    , R    and P   
 y'  sin  cos    y
H&B 7-1:222-223
 Rotation around a point Q
Rotate around origin : y
Px '  Px cos   Py sin  P’
 P
Py '  Px sin   Py cos  PQ
Q
Rotate around Q over an angle  : x

Px '  Qx  ( Px  Qx ) cos   ( Py  Q y ) sin 

Py '  Q y  ( Px  Qx ) sin   ( Py  Q y ) cos 

H&B 7-1:222-223
 Scaling
Schale with factor sx and sy: y

x’= sx x, y’= sy y P’

or P
Q’
P'  SP, with Q x

 x'   sx 0  x
P'    , S    and P   
 y'  0 s y   y

H&B 7-1:224-225
 Scaling with respect to a point F
Scale with factors sx and sy: y P’
Px’= sx Px, Py’= syPy P
With respect to F: PF Q’
Px’  Fx = sx (Px  Fx), F Q

Py’  Fy = sy (Py  Fy) x

or
Px’= Fx + sx (Px  Fx),
Py’= Fy + sy (Py  Fy)
H&B 7-1:224-225
 Transformations
• Translate with V: y
S
T=P+V
R T
• Schale with factor sx = sy =s:
P
S = sP
x
• Rotate over angle 
R’x = cos  Px  sin  Py
R’y = sin  Px + cos  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
Translation :
 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  sin  0  x 
    
 y '    sin  cos 0  y 
1  0 0 1  1 
  
or
P'  R ( )P

H&B 7-2:225-228
 Scaling matrix
Scaling :
 x'   s x 0 0  x 
    
 y'   0 sy 0  y 
1  0 0 1  1 
  
or
P '  S( s x , s y ) P

H&B 7-2:225-228
 Inverse transformations
Translation :
T -1 (t x , t y )  T(t x ,t y )
Rotation :
R -1 ( )  R ( )
Scaling :
1 1 1
S ( s x , s y )  S( , )
sx s y
H&B 7-3:228
 Combining transformations 1
P'  M1P first transformation...
P ''  M 2 P ' second transformation...
Combined :
''
P  M 2 (M 1 P)
 M 2 M1P
 MP with M  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   1 0 t1x  t 2 x 
    
  0 1 t 2 y  0 1 t1 y P   0 1 t1 y  t 2 y P
 0 0 1  0 0 1  0 0 1 
    
 T(t1x  t 2 x , t1x  t 2 y )P
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 )
Composite rotations :
R ( 2 ) R (1 )  R (1   2 )
Composite scaling :
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) Translate such that R coincides with origin;
2) Rotate over angle  around origin;
3) Translate back.

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 ,R y )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 ,R y )P ''
 T( Rx ,R y )R( )P '
 T( Rx ,R y )R( )T(  Rx ,  R y )P

1) 2) 3)
H&B 7-4:229-230
 Rotation around point 4
1 - 3) P '''  T( Rx ,R y )R( )T(  Rx ,  R y )P
or
 cos  sin  Rx (1  cos )  R y sin  
'''  
P   sin  cos R y (1  cos )  Rx sin  P
 0 0 1 
 

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) Translate such that F coincides with origin;
2) Schale w.r.t. origin;
3) Translate back again.

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 ''

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 0 Fx (1  s x ) 
'''  
P  0 sy Fy (1  s y ) P
0 0 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  ( s2  s1 ) cos sin  0 

'''
P   ( s2  s1 ) cos sin  s1 sin 2   s2 cos 2  0 P
 
 0 0 1
 

1) 2) 3)
H&B 7-4:230-231
 Order of transformations 1
Rotation, translation… Translation, rotation…
y’
y’’ y’’
x’’ x’’
’ y y
y
x’
x’

x x
Matrix multiplication does not xcommute.
' '  R(30)T(2,3 ) x
x ' '  T(2,3)R(30 ) 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’ y’’
x’’ x’’
y y
y’
x’
x’

x x
x' '  R(30)T(2,3 )x
Local trafo glTranslate(…); Global trafo
interpretation 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 v
u,v coordinates, use matrix u
transformation to put it B
in x,y space. A

T
x

H&B 7-4:233-235
 Direct construction of matrix
If you know the target frame:
Construct matrix directly.
y
P '  Au  Bv  T , or
v
x u 
   
 y    A B T   v  , or
u
B
1  1  A
   
 x   Ax Bx Tx  u  T
    
 y    Ay B y T y  v  x
1   0 0 1 1 
    
H&B 7-4:233-235
 Rigid body transformation
only rotation
P '  MP , of translation
 x   rxx rxy trx   u  y
    
 y    ryx ryy try   v  u
v
1   0 0 1  1 
B
   A
T
 rxx rxy  x
  : orthonormal submatrix
 ryx ryy 

 rxx   rxy 
A    and B   , | A | 1, | B | 1, A  B  0
 ryx   ryy  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: y

x’= x, y’= y
or
1 0 0 x
 
P'   0  1 0 P
0 0 1
 
H&B 7-4:240-242
 Reflect over origin
Reflect over origin: y

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
 Shear
Shear the y-as: y

x’=x+fy, y’=y
or
1 f 0
  x
P'   0 1 0 P
0 0 1
 
with f  tan 
H&B 7-4:242-243
 Transformations coordinates
Given (x,y)-coordinates, y

Find (x’,y’)-coordinates. y’

 x’
(x0, y0)
Reverse route as x
object transformaties.

H&B 7-8:246-248
 Transformations coordinates
Given (x,y)-coordinates, y

Find (x’,y’)-coordinates. y’

 x’
(x0, y0)
Example: user points at x
(x,y), what’s the position
in local coordinates?

H&B 7-8:246-248
 Transformations coordinates
Given X: (x,y)-coordinates, y
Find X’: (x’,y’)-coordinates.
Standard: y’
X=MX’ (object trafo:
from local to global)  x’
Here: (x0, y0)
X’=M-1X (from global to local) x

H&B 7-8:246-248
 Transformations coordinates
Given X: (x,y)-coordinates, y
Find X’: (x’,y’)-coordinates.
Here: y’
X’=M-1X (from global to local)
Approach 1:  x’
(x0, y0)and invert
- Determine “standard matrix” M (from local to global coordinates)
x

H&B 7-8:246-248
 Transformations coordinates
Given X: (x,y)-coordinates, y
Find X’: (x’,y’)-coordinates.
Here: y’
X’=M-1X (from global to local)
 x’
Approach 2:
(x0, y0)of usual).
- construct transformation that maps local frame to global (reverse
x

H&B 7-8:246-248
 Transformations coordinates
Given X: (x,y)-coordinates, y
Find X’: (x’,y’)-coordinates.
Here: y’
X’=M-1X (from global to local)
Approach 2:  x’
1.Translate (x0, y0) to origin; (x0, y0)
2.Rotate x’-axis to x-axis. x

H&B 7-8:246-248
 Transformations coordinates
Given X: (x,y)-coordinates, y
Find X’: (x’,y’)-coordinates.
y’
Here:
X’=M-1X (from global to local)  x’
Approach 2: (x0, y0)
M-1 = T(x0, y0) R() 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);
m[0] m[4] m[8] m[12]
m[1] m[5] m[9] m[13]
Matrices are specified in M
m[2] m[6] m[10] m[14]
column-major order:  
m[3] 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 post-
multiply 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); glPushMatrix();

glScale(2, 1, 0.5); glRotate(10, 1, 2, 0);
glTranslate(1, 2, 3); glScale(2, 1, 0.5);
glTranslate(1, 2, 3);
glutWireCube(1);
glutWireCube(1);
glTranslate(1, 2, 3);
glScale(0.5, 1, 2); glPopMatrix();
glRotate(10, 1, 2, 0);
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!