Affine Transformation Edith Law & Mike Terry
Graphic Models vs. Images Computer Graphics: the creation, storage and manipulation of images and their models Model: a mathematical representation of an image containing the important properties of an object (e.g., location, size, orientation, color, texture) in data structures. Rendering: Using the properties of the model to create an image to display on the screen. Image: the rendered model. Model Rendering Image
Example Shape Models An array of points: {P1, P2,, Pn} Can be open, closed, filled
Components For a lightweight GUI toolkit, components maintain a shape model location bounds If a visible component its outline (coordinates or other descriptors for its shape) whether interior should be filled with a color, and if so, what color
Components But components also need to paint themselves in a particular location Location always specified in terms of parent s coordinate system That means we need to do some math before painting and doing hit testing (i.e., determining which components a given location corresponds to) We will use affine transforms to help out
Linear Algebra (s) Scalar: a single value (usually real number) (v) Vector: directed line segment (represents direction and magnitude) (P) Point: a fixed location in space (represents a position) Legal operations: vector + vector: v1 + v2 = v3 vector multiplied by a scalar: v1 x s1 = v4 point minus point = P1 - P2 = v5 point + vector: P2 + v5 = P1 2 ways to multiply vector by vector dot (inner) product: v1 o v2 = s2 cross (outer) product: v1 x v2 = v6
Moving Shapes Around, Multiple Shape Instances Translate by adding offset to shape points What about scaling? Or rotation? transform
Translation translate: add a scalar to each of the components tx=2, ty=4 x' = x + tx y' = y + ty
Uniform Scaling uniform scale: multiply each component by the same scalar multiply by s = 2 x' = x s y' = y s
Non-Uniform Scaling scale: multiply each component by different scalar multiply by sx = 2, sy = 1/2 x' = x sx y' = y sy
Rotation rotate: each component is some function of x, y, Θ rotate by Θ = 30 o Θ x' = f(x,y,θ) y' = f(x,y,θ)
Deriving Rotation Function
Intermission: Super cool and fun rotation derivation
Voila! Rotation rotate: each component is some function of x, y, Θ rotate by Θ = 30 o Θ x' = x cos(θ)-y sin(θ) y' = x sin(θ)+y cos(θ)
Combining Transformations Rotate: x' = x cos(θ)-y sin(θ) y' = x sin(θ)+y cos(θ) Translate: x' = x tx y' = y ty Scale: x' = x sx y' = y sy
Combining Transformations: (1) Scale Rotate: x' = x cos(θ)-y sin(θ) y' = x sin(θ)+y cos(θ) Translate: x' = x + tx y' = y + ty Scale: x' = x sx y' = y sy x1 = 2x y1 = 2y
Combining Transformations: (2) Rotate Rotate: x' = x cos(θ)-y sin(θ) y' = x sin(θ)+y cos(θ) Translate: x' = x + tx y' = y + ty Scale: x' = x sx y' = y sy x2 = 2x cos(30) - 2y sin(30) y2 = 2y sin(30) + 2y sin(30)
Combining Transformations: (3) Translation Rotate: x' = x cos(θ)-y sin(θ) y' = x sin(θ)+y cos(θ) Translate: x' = x + tx y' = y + ty Scale: x' = x sx y' = y sy x3 = 2x cos(30) - 2y sin(30) + 8 y3 = 2y sin(30) + 2y sin(30) + 4 N.B. Order of operations is important. What if you translate first?
Matrix Representation Goal: represent each 2D transformation with a matrix Multiply matrix by column vector <=> apply transformation to point
Matrix Representation Why? Transformations can be combined by multiplication We can multiply transformation matrices together This single matrix can then be used to transform many points. Can be sent to a GPU to speed the process.
2 x 2 Matrices Why types of transformations can be represented by a 2x2 matrix? 2D Scale around (0,0)?
2 x 2 Matrices Why types of transformations can be represented by a 2x2 matrix? 2D Rotate around (0,0)?
2 x 2 Matrices Why types of transformations can be represented by a 2x2 matrix? 2D Mirror about Y axis?
2 x 2 Matrices Why types of transformations can be represented by a 2x2 matrix? 2D Translation Maybe this? 1 / / 1 Problem: only works for a specific point. Can t create a general 2x2 matrix to transform a model.
Homogeneous Coordinates represents coordinates in 2 dimensions with a 3-tuple (i.e., as a 3x1 column matrix) why? need 3 columns in our transformation matrix
3x3 Translation Matrix now we can represent 2D translation with a 3x3 matrix This 3x3 matrix is an Affine Transformation matrix, and can be used to generally handle translation, rotation and scaling.
3x3 Translation Matrix: Example
Homogeneous Coordinate [x, y, w] T represents a point at location [x/w, y/w] T convenient coordinate system to represent many useful transformations [3, 2, 1] T [6, 4, 2] T [7.5, 5, 2.5] T
Vector and Point Homogeneous Coordinates add vectors scalar multiply subtract points point + vector
Translating Vectors a vector has no position so translating it shouldn t change anything.
Rotation Matrix Vectors: Points:
Scaling Matrix Vectors: Points:
Matrix Composition Transformations can be combined by matrix multiplication
Matrix Composition Order Associative: A(BC) = (AB)C not commutative: AB BA order of transformations matters!
Matrix Composition What if we want to rotate and translate? example: rotate line segment by 45 degrees about endpoint a
Multiplication Order: Wrong Way Beginning situation Rotate 45 degrees, R(45) affects both endpoints Could try translating both endpoints to return a to its original position but by how much?
Multiplication Order: Correct Way Scaling and rotation are both about the origin Process: Translate shape to the origin rotate translate back to where you want it
Affine Transformations + Interactor Tree As we descent the interactor tree, component needs to: (1) paint itself (2) for each child save the current affine transform multiply current transform by a translation affine transform representing the location of child component (current transform * new translation transform) set result of that multiplication as the new affine transform tell child to paint themselves return the original affine transform
Affine Transformations + Interactor Tree We also need to transform any coordinates in events as the events are passed down the interactor tree. For example, a mouse event in the window s coordinates will need its coordinates translated to a child component s relative location prior to passing it down. Affine transforms can be used for this, too.
Inside / Hit Tests with Transformed Shapes Mouse and shape model must use the same coordinate system Two options: transform mouse to model coordinates transform model to mouse coordinates
Option 1: Transform Mouse to Model Coordinates only one transformation maintaining the inverse
Option 2: Transform Model to Mouse Coordinates many transformations manipulations (e.g., dragging) must be transformed back into model coordinates