2D Transformations PDF

2D Transformations 1  Transformation What are they? Changing something to something else via rules. Mathematics: mapping between values in a range set and domain set (function/ relation) Geometric: translate, rotate, scale, shear… Why are they importa...

2D Transformations 1  Transformation What are they? Changing something to something else via rules. Mathematics: mapping between values in a range set and domain set (function/ relation) Geometric: translate, rotate, scale, shear… Why are they important to graphics? Moving objects on screen/ in space specifying the camera’s view of a 3D scene Mapping from model space to world space to camera space to screen space Specifying parent/child relationships -2 Transformation Transform every point on an object according to certain rule. Q (x’, y’) P (x,y) T Initial Object Transformed Object x x’ The point Q is the image of P under the transformation T. y y’ 3  Transformations Basic 2D Transformations:  Translation  Scaling  Rotation Other 2D Transformations:  Reflection  Shearing 4 5 Translation (55,60) (20,35) (45,30) (65,30) x  x  tx (10,5) (30,5) y  y  t y The vector (tx, ty) is called the offset vector. 6 8  Scaling About the Origin (x’,y’) x   x. s x (x,y) (x,y) y   y. s y (x’,y’) Uniform Non-Uniform sx  s y ( sx , sy  0) The parameters sx, sy are called scale factors. sx  s y 9 11 12  Rotation About the Origin cont. y (x’,y’) (x’,y’) (x,y) (x,y) q o x x   x cosq  y sin q y   x sin q  y cosq The above 2D rotation is actually a rotation about the z-axis (0,0,1) by an angle q. 13 Rotation About a Pivot Point (x’,y’) (x,y) (xp , yp) Pivot Point Pivot point is the point of rotation Pivot point need not necessarily be on the object 15  Rotation About a Pivot Point STEP-1: Translate the pivot point to the origin (x,y) (x1, y1) (xp , yp) x1  x  x p y1  y  y p 16  Rotation About a Pivot Point STEP-2: Rotate about the origin (x2, y2) (x1, y1) x 2  x1 cosq  y1sinq y 2  x1 sinq  y1 cosq 17  Rotation About a Pivot Point STEP-3: Translate the pivot point to original position (x’, y’) (x2, y2) (xp, yp) x  x 2  x p y  y 2  y p 18 Rotation About a Pivot Point x   ( x  x p ) cosq  ( y  y p ) sin q  x p y   ( x  x p ) sin q  ( y  y p ) cosq  y p Specifying a 2D-Rotation about a pivot point (xp,yp): glTranslatef(xp, yp, 0); glRotatef(theta, 0, 0, 1.0); glTranslatef(-xp, -yp, 0); Note the OpenGL specification of the sequence of transformations in the reverse order ! 19  Scaling About a Fixed Point Translate the fixed point to origin (x,y) Scale with respect to the origin (x’,y’) Translate the fixed point to its original position. (xf , yf ) x  ( x  x f ).s x  x f y   ( y  y f ).s y  y f 20  y Reflections Initial Reflection about y x =  x Object x Reflection about origin Reflection about x x =  x y =  y y =  y [21 Matrix Representation x'  x  tx y'  y  t y  x   x t x   y     y   t       y x  x cos q  y sin q y   x sin q  y cos q  x   cos q  sin q   x   y   sin q   y    cos q   x '  x.S x  S x. x  0. y y '  y.Sy  0. x  Sy. y  x   sx 0   x  y   0 sy   y      25  Matrix Representations  x    x  t x  Translation  y     y   t       y  x   cosq  sin q   x   y     sin q cosq   y  Rotation [Origin]       x   sx 0   x  Scaling [Origin]  y    0 s   y     y   26  Matrix Representations  x   1 0  x Reflection about x  y    0     1  y      x    1 0  x  Reflection about y  y    0       1  y  Reflection about  x    1 0   x  the Origin  y    0  1  y       27  Homogeneous Coordinates To obtain square matrices an additional row was added to the matrix and an additional coordinate, the w-coordinate, was added to the vector for a point. In this way a point in 2D space is expressed in three-dimensional homogeneous coordinates. This technique of representing a point in a space whose dimension is one greater than that of the point is called homogeneous representation. It provides a consistent, uniform way of handling affine transformations. 29  Homogeneous Coordinates If we use homogeneous coordinates, the geometric transformations given above can be represented using only a matrix pre-multiplication. A composite transformation can then be represented by a product of the corresponding matrices. Cartesian Homogeneous ( x, y )  ( xh, yh, h), h  0 a b  ,  ( a, b, c), c  0 c c Examples: (5, 8) (15, 24, 3) (x, y) (x, y, 1) 30 Homogeneous Coordinates Matrix Representation x '  x  t x  1.x  0. y  t x.1 y '  y  t y  0.x  1. y  t y.1 1  0.x  0. y  1.1  x   1 0 tx   x   y  0 1 ty   y       1  0 0 1 1  31  Homogeneous Coordinates Basic Transformations  x   1 0 tx   x  Translation    P’=TP   y   0 1 t y   y   1   0 0 1   1   x   cos q  sin q 0  x  Rotation [O]    P’=RP y      sin q cos q 0   y   1   0 0 1   1   x   s x 0 0  x  Scaling [O]  y    0 s 0   y  P’=SP    y  1   0 0 1   1  32  Composite Transformations Transformation T followed by  x   x Transformation Q followed by  y   [ R][Q][T ] y      Transformation R:  1   1  Example: (Scaling with respect to a fixed point)  x   1 0 x f  sx 0 0 1 0  x f   x   y   0 1 y   0     0 0 1  y f   y      f  sy  1  0 0 1   0 0 1 0 0 1   1  Order of Transformations 36  Order of Transformations In composite transformations, the order of transformations is very important. Rotation followed by Translation: Translation followed by Rotation: 37