2D Transformations 2D Transformation

„ Given a 2D object, transformation is to

y change the object’s

„ Position (translation)

y „ Size (scaling) x „ Orientation (rotation)

„ Shapes (shear) x y „ Apply a sequence of matrix multiplication to the object vertices x

Point representation Translation

„ Re-position a point along a straight line „ We can use a column vector (a 2x1 matrix) to represent a 2D point x „ Given a point (x,y), and the translation distance (tx,ty) y

„ A general form of linear transformation can The new point: (x’, y’) (x’,y’) x’ = x + tx be written as: ty y’ = y + ty (x,y) tx x’ = ax + by + c X’ a b c x OR Y’ = d e f * y 1 0 0 1 1 OR P’ = P + T where P’ = x’ p = x T = tx y’ = dx + ey + f y’ y ty

1 3x3 2D Translation Matrix Translation

x’ = x + tx „ How to translate an object with multiple y’ y ty vertices?

Use 3 x 1 vector

x’ 1 0 tx x y’ = 0 1 ty * y 1 0 0 1 1 Translate individual vertices ƒ Note that now it becomes a matrix-vector multiplication

2D Rotation Rotation

„ Default rotation center: Origin (0,0) (x,y) -> Rotate about the origin by θ (x’,y’)

(x’, y’) (x,y) θ r θ> 0 : Rotate counter clockwise φ θ How to compute (x’, y’) ?

x = r cos (φ)y = r sin (φ) x’ = r cos (φ + θ)y = r sin (φ + θ) θ< 0 : Rotate clockwise θ

2 Rotation Rotation

(x’,y’) (x’,y’) x = r cos (φ)y = r sin (φ) x’ = x cos(θ) – y sin(θ) x’ = r cos (φ + θ)y = r sin (φ + θ) (x,y) (x,y) θ r y’ = y cos(θ) + x sin(θ) θ r φ φ x’ = r cos ( ) φ + θ Matrix form? = r cos(φ) cos(θ) – r sin(φ) sin(θ) = x cos(θ) – y sin(θ) x’ cos(θ) -sin(θ) x = y’ = r sin (φ + θ) y’ sin(θ) cos(θ) y = r sin(φ) cos(θ) + r cos(φ)sin(θ) = y cos(θ) + x sin(θ) 3 x 3?

3x3 2D Rotation Matrix Rotation

x’ cos(θ) -sin(θ) x (x’,y’) „ = How to rotate an object with multiple y’ sin(θ) cos(θ) y (x,y) vertices? θ r φ

x’ cos(θ) -sin(θ) 0 x = y’ sin(θ) cos(θ) 0 y θ 1 0 0 1 1 Rotate individual Vertices

3 2D Scaling 2D Scaling

Scale: Alter the size of an object by a scaling factor (4,4) (Sx, Sy), i.e. (2,2) Sx = 2, Sy = 2

(2,2) (1,1) x’ = x . Sx x’ Sx 0 x = y’ = y . Sy y’ 0 Sy y ƒ Not only the object size is changed, it also moved!! (4,4) ƒ Usually this is an undesirable effect (2,2) Sx = 2, Sy = 2 ƒ We will discuss later (soon) how to fix it

(2,2) (1,1)

3x3 2D Scaling Matrix Put it all together

„ Translation: x’ = x + tx x’ Sx 0 x = y’ y ty y’ 0 Sy y

„ Rotation: x’ = cos( θ ) -sin( θ ) * x y’ sin(θ) cos(θ) y x’ Sx 0 0 x y’ = 0 Sy 0 * y „ Scaling: x’ Sx 0 x = * 1 0 0 1 1 y’ 0 Sy y

4 Or, 3x3 Matrix representations Why use 3x3 matrices?

„ Translation: x’ 1 0 tx x „ So that we can perform all transformations y’ = 0 1 ty * y 1 0 0 1 1 using matrix/vector multiplications

x’ cos(θ) -sin(θ) 0 x „ Rotation: = y’ sin(θ) cos(θ) 0 * y „ This allows us to pre-multiply all the matrices 1 0 0 1 1 together x’ Sx 0 0 x „ Scaling: y’ = 0 Sy 0 * y „ The point (x,y) needs to be represented as 1 0 0 1 1 (x,y,1) -> this is called Homogeneous Why use 3x3 matrices? coordinates!

Shearing Shearing in y

x 1 0 0 x y = g 1 0 * y 1 0 0 1 1

Interesting Facts: „ Y coordinates are unaffected, but x cordinates are translated linearly with y „ A 2D rotation is three shears „ Shearing will not change the area of the object „ That is: x 1 h 0 x „ y’ = y y = 0 1 0 * y „ Any 2D shearing can be done by a rotation, followed „ x’ = x + y * h 1 0 0 1 1 by a scaling, and followed by a rotation

5 Rotation Revisit Arbitrary Rotation Center

„ The standard rotation matrix is used to „ To rotate about an arbitrary point P (px,py) rotate about the origin (0,0) by θ: „ Translate the object so that P will coincide with cos(θ) -sin(θ) 0 the origin: T(-px, -py) sin(θ) cos(θ) 0 „ Rotate the object: R(θ) 0 0 1 „ Translate the object back: T(px,py)

„ What if I want to rotate about an arbitrary center? (px,py)

Arbitrary Rotation Center Scaling Revisit

„ Translate the object so that P will coincide with „ The standard scaling matrix will only the origin: T(-px, -py) anchor at (0,0) „ Rotate the object: R(θ)

„ Translate the object back: T(px,py) Sx 0 0 0 Sy 0 0 0 1 „ Put in matrix form: T(px,py) R(θ) T(-px, -py) * P

„ What if I want to scale about an arbitrary x’ 1 0 px cos(θ) -sin(θ) 0 1 0 -px x y’ = 0 1 py sin(θ) cos(θ) 0 0 1 -py y pivot point? 1 0 0 1 0 0 1 0 0 1 1

6 Arbitrary Scaling Pivot Affine Transformation

„ To scale about an arbitrary pivot point P „ Translation, Scaling, Rotation, Shearing are all affine (px,py): transformation „ Affine transformation – transformed point P’ (x’,y’) is „ Translate the object so that P will coincide with a linear combination of the original point P (x,y), i.e. the origin: T(-px, -py) x’ m11 m12 m13 x „ Rotate the object: S(sx, sy) y’ = m21 m22 m23 y 1 0 0 1 1 „ Translate the object back: T(px,py)

„ Any 2D affine transformation can be decomposed into a rotation, followed by a scaling, followed by a (px,py) shearing, and followed by a translation. Affine matrix = translation x shearing x scaling x rotation

Composing Transformation Composing Transformation

„ Composing Transformation – the process of applying „ Matrix multiplication is associative several transformation in succession to form one M3 x M2 x M1 = (M3 x M2) x M1 = M3 x (M2 x M1) overall transformation „ Transformation products may not be commutative

„ If we apply transform a point P using M1 matrix first, A x B != B x A and then transform using M2, and then M3, then we „ Some cases where A x B = B x A have: A B (M3 x (M2 x (M1 x P ))) = M3 x M2 x M1 x P translation translation scaling scaling (pre-multiply) rotation rotation M uniform scaling rotation (sx = sy)

7 Transformation order matters! How OpenGL does it?

„ Example: rotation and translation are not „ OpenGL’s transformation functions are commutative meant to be used in 3D Translate (5,0) and then Rotate 60 degree „ No problem for 2D though – just ignore OR the z dimension Rotate 60 degree and then translate (5,0)?? „ Translation:

„ glTranslatef(d)(tx, ty, tz) -> Rotate and then translate !! glTranslatef(d)(tx,ty,0) for 2D

How OpenGL does it? OpenGL Transformation Composition

„ Rotation: „ A global modeling transformation matrix

„ glRotatef(d)(angle, vx, vy, vz) -> (GL_MODELVIEW, called it M here) glRotatef(d)(angle, 0,0,1) for 2D glMatrixMode(GL_MODELVIEW)

y y „ The user is responsible to reset it if necessary (vx, vy, vz) – rotation axis glLoadIdentity() -> M = 1 0 0 x x 0 1 0 z You can imagine z is pointing out 0 0 1 of the slide

8 OpenGL Transformation Composition Transformation Pipeline

„ Matrices for performing user-specified transformations are multiplied to the model view global matrix

„ For example, Object Modeling Object World Coordinates 1 0 1 Local Coordinates transformation glTranslated(1,1 0); M = M x 0 1 1 0 0 1

„ All the vertices P defined within glBegin() will first go through the transformation (modeling … transformation) P’ = M x P

9