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.