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

y Translate over vector (tx, ty)

x’=x+ tx, y’=y+ ty T P+T or P P'= P + T, with x  x'  x  t   x  P'=   ,P =   and T =    y'  y t y 

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

Translate polygon: y Apply the same operation on all points. T 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'= xcosα − ysinα P’ y'= xsinα + 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 P’ Px '= Px cosα − Py sinα α P '= P sinα + P cosα P y x y P−Q Q Rotate around Q over an angle α : x

Px '= Qx + (Px − Qx )cosα − (Py − Qy )sinα

Py '= Qy + (Px − Qx )sinα + (Py − Qy )cosα

H&B 7-1:222-223 Scaling

y Schale with factor sx and sy: P’ x’= sx x, y’= sy y or P Q’ P'= SP, with Q x  x'  s 0   x   x  P'=   ,S =   and P =    y'  0 sy   y

H&B 7-1:224-225 Scaling with respect to a point F

y Scale with factors sx and sy: P’ Px’= sx Px, Py’= syPy P With respect to F: P−F Q’ F Q Px’ − Fx = sx (Px − Fx), x Py’ − Fy = sy (Py − Fy) or

Px’= Fx + sx (Px − Fx),

Py’= Fy + sy (Py − Fy) H&B 7-1:224-225 Transformations

y • Translate with V: 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(tx ,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 0 0 x     x    y' = 0 sy 0 y       1   0 0 1 1  or

P'= S(sx ,sy )P

H&B 7-2:225-228 Inverse transformations Translation : -1 T (tx ,t y ) = T(−tx ,−t y ) Rotation : R-1(θ ) = R(−θ ) Scaling :

−1 1 1 S (sx ,sy ) = S( , ) sx sy H&B 7-3:228 Combining transformations 1

' P = M1P first transformation... '' ' P = M2P second transformation... Combined : '' P = M2 (M1P)

= M2M1P

= MP with M = M2M1

H&B 7-4:228-229 Combining transformations 2

' P = T(t1x ,t1y )P first translation '' ' P = T(t2x ,t2 y )P second translation Combined : '' P = T(t2x ,t2 y )T(t1x ,t1y )P 1 0 t 1 0 t  1 0 t + t   2x  1x   1x 2x  = 0 1 t2 y 0 1 t1y P = 0 1 t1y + t2 y P      0 0 1 0 0 1  0 0 1 

= T(t1x + t2x ,t1x + t2 y )P H&B 7-4:229 Combining transformations 3

Composite translations :

T(t2x ,t2 y )T(t1x ,t1y ) = T(t1x + t2x ,t1x + t2 y ) Composite rotations :

R(θ2 )R(θ1) = R(θ1 +θ2 ) Composite scaling :

S(s2x ,s2 y )S(s1x ,s1y ) = S(s1xs2x ,s1y 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.

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,− Ry )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,− Ry )P '' ' 2) P = R(θ )P = R(θ )T(−Rx,− Ry )P ''' '' 3) P = T(Rx,Ry )P ' = T(Rx,Ry )R(θ )P

= T(Rx,Ry )R(θ )T(−Rx,− Ry )P

R

1) 2) 3) H&B 7-4:229-230 Rotation around point 4

''' 1- 3) P = T(Rx,Ry )R(θ )T(−Rx,− Ry )P or cosθ − sinθ R (1− cosθ ) + R sinθ   x y  ''' P =  sinθ cosθ Ry (1− cosθ ) − Rx sinθ P    0 0 1 

R

1) 2) 3) H&B 7-4:229-230 Scaling w.r.t. point 1

Scale with factors sx and sx w.r.t. point F : 1) Translate such that F coincides with origin; 2) Schale w.r.t. origin; 3) Translate 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(sx ,sy )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(sx ,sy )T(−Fx,− Fy )P or  s 0 F (1− s )   x x x  ''' P =  0 sy Fy (1− sy )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  2 2   s1 cos θ + s2 sin θ (s2 − s1)cosθ sinθ 0 P''' =  (s − s )cosθ sinθ s sin2 θ + s cos2 θ 0P  2 1 1 2     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 x Matrix multiplication does not commute. x''= T(2,3)R x''= R(30)T( 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 x Local trafo x''= R(30)T( 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 u,v coordinates, use matrix 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  x  u     = ( )  y A B T v  , or B     1  1  A  x   A B T u    x x x   T  y =  Ay By Ty v  x      1   0 0 1 1  H&B 7-4:233-235 Rigid body transformation

only rotation P'= MP , of translation  x   r r tr u    xx xy x   y  y = ryx ryy try v       B 1   0 0 1 1  A T  r r   xx xy  x   : orthonormal submatrix ryx ryy   r   r   xx   xy  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. θ (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. θ (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: θ (x0, y0) X=MX’ (object trafo: x from local to global) Here: X’=M-1X (from global to local) H&B 7-8:246-248 Transformations coordinates

Given X: (x,y)-coordinates, y Find X’: (x’,y’)-coordinates. Here: θ -1 (x0, y0) 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

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

Given X: (x,y)-coordinates, y Find X’: (x’,y’)-coordinates. Here: θ -1 (x0, y0) X’=M X (from global to local) x Approach 2:

1. Translate (x0, y0) to origin; 2. Rotate x’-axis to x-axis. H&B 7-8:246-248 Transformations coordinates

Given X: (x,y)-coordinates, y Find X’: (x’,y’)-coordinates. Here: θ -1 (x0, y0) X’=M X (from global to local) x Approach 2: -1 M = T(−x0, −y0) R(−θ)

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!