Graphics Transformations Translate, Scale, Rotate Homogeneous - PowerPoint PPT Presentation

Graphics Transformations Translate, Scale, Rotate Homogeneous Coordinates Affine Transformation Matrices Combining Transformations Shape Model Class 1

Transforming Shape Models § Shape model contains points (and properties used for drawing) § Translation , Rotation and Scaling are operations that we can apply before rendering. Transform Rendering Model Model' Image (x' 0 ,y' 0 ) (x 0 ,y 0 ) (x' 1 ,y' 1 ) (x 4 ,y 4 ) (x 1 ,y 1 ) (x' 4 ,y' 4 ) (x' 2 ,y' 2 ) (x 2 ,y 2 ) (x 3 ,y 3 ) (x' 3 ,y' 3 ) 2

Combining Transformations T ranslation S caling R otation Why keep transformations separate? We want the ability to combine a series of these transformations together • into a single operation (e.g. translate, scale, translate, rotate and so on). We should be able to build up and save it for later reuse (e.g. “window”). • This is difficult to do if we represent these as formulas. • 3

Matrix Representation § Goal: Represent each type of 2D transformation as a matrix § Multiply matrix by column vector ⇔ apply transformation to point. 4

Matrix Representation § Transformations can be combined by multiplication - transformations are associative, so we can multiply them together § We can multiply transformation matrices together - This single matrix can then be used to transform many points - We can represent any number of operations, in any order, this way. - Bonus: Can be sent to a GPU to speed the process 5

What would a 2D matrix look like for Scale, Rotate, Translate? § 2D Scale around (0,0)? § 2D Rotate around an angle? § Mirroring a point around the Y axis? How to represent Translate ? 6

No. Can a 2 x 2 Matrix Represent All 2D Transformations? § 2D Translation § Maybe this? 1 / = 1 / Problem: Only works for a specific point. Can’t create a general 2x2 matrix to transform a model 7

Homogeneous Coordinates § Solution: add an extra component w to each coordinate § [x, y, w] represents a point at location [x/w, y/w] § many Homogeneous points for same Cartesian point 3 6 7.5 … 2 4 5.0 1 2 2.5 These are the same point in 2D! Divide x and y by w to get the equivalent Cartesian coordinates 8

Using a 3-tuple to represent 2D points § We will represent coordinates in 2 dimensions with a 3-tuple, where w = 1 (i.e. represent points as a 3 × 1 column matrix) This will provide to he a helpful trick in handling translations But we will also need 3 columns in our transformation matrix to be able to multiply them together. 9

3 x 3 Translation Matrix § Now we can represent 2D translation with a 3x3 matrix 10

3 x 3 Translation Matrix Example 11

3 x 3 Scale Matrix § 2 x 2 Scale Matrix § 3 x 3 Scale Matrix 12

Rotation and Scale § 3 x 3 Scale Matrix § 3 x 3 Rotation Matrix cos(θ) –sin(θ) 0 sin(θ) cos(θ) 0 0 0 1 13

3 x 3 Rotation Matrix Example θ = 30° θ x’ x cos(30) –sin(30) 0 cos(30)x – sin(30)y y’ y sin(30)x + cos(30)y sin(30) cos(30) 0 = = 1 1 1 0 0 1 14

Affine Transformation Matrix § Now we have Translation matrix, Rotation matrix and Scale matrix T(t x , t y ) R(θ) S(s x , s y ) cos(θ) –sin(θ) 0 sin(θ) cos(θ) 0 = = = 0 0 1 § This 3 x 3 matrix is an Affine Transformation matrix - it can express any combination of translate, rotate, and scale x x' A B C Ax + By + C = 1 = y D E F y' Dx + Ey + F 1 0 0 1 1 15

Matrix Composition § Transformations can be combined by matrix multiplication transformations are applied from “right-to-left”, (also called “post multiplication”) p' = A ・ B ・ C ・ p p' = (A ・ (B ・ (C ・ p))) 16

Matrix Multiplication § Associative: A(BC) = (AB)C § Not Commutative: AB ≠ BA § Order of transformations matters (but not always …) 2 0 0 1 0 4 2 0 4 A = T(4,3) ・ S(2,3) = 0 3 0 = 0 1 3 0 3 3 0 0 1 0 0 1 0 0 1 2 0 0 1 0 4 2 0 8 B = S(2,3) ・ T(4,3) = = 0 3 0 0 1 3 0 3 9 0 0 1 0 0 1 0 0 1 17

Matrix Multiplication § A = T(4,3) ・ S(2,3) B = S(2,3) ・ T(4,3) p’ = A ・ p = T(4,3) ・ S(2,3) ・ p p’= B ・ p = S(2,3) ・ T(4,3) ・ p ) 3 , 2 ( S ) 3 , 4 ( T ) 3 , 2 ( S ) 3 , 4 ( T 18

Transform3.java Order matters! Try reordering scale and translate 20

BarExercise.java How do we rotate a shape? § Rotate the black bar about it’s left end by 30° - (after rotating, it should be in the blue bar position) // left end (50, 100), right end (150, 100) drawBar(g2, 50, 100, 150, 100); 21

Exercise: Attempt 1 (Wrong) § Just rotate it? g2.rotate(Math.toRadians(30)); drawBar(g2, 50, 100, 150, 100); … why didn’t this work? 22

Exercise: Fix Attempt 1 (Wrong) § Rotate it but fix with translations … // add g2.translate(x, y) HERE? g2.rotate(Math.toRadians(30)); // or maybe add g2.translate(x, y) HERE? drawBar(g2, 50, 100, 150, 100); … try to correct with a translation? but how much? 23

Exercise: Answer § Scaling and rotation are matrices are always about (0,0) § Need to translate to origin, rotate it, then translate back g2.translate(50, 100); g2.rotate(Math.toRadians(30)); g2.translate(-50, -100); drawBar(g2, 50, 100, 150, 100); 24

Illustration 1 p’ = I ・ p 2 p’ = T(-50, -100) ・ p 3 p’ = R(30) ・ T(-50, -100) ・ p 4 p’ = T(50,100) ・ R(30) ・ T(-50, -100) ・ p 25

Summary: Graphics Methods We can manipulate a shape directly (shape classes), or manipulate the canvas that is holding shapes (graphics context). Classes internally store their transformations in a matrix • These methods (*) manipulate a matrix representing transformations. • Shape classes Graphics Context w. Canvas Points ObservableList<> getPoints () double[] Hit-test boolean contain s (double, double) ?? Rotate* setRotate (degrees) gc.rotate (double) Scale* setScaleX (double) gc.scale (double, double) setScaleY (double) Translate* setTranslateX (double) gc.translate (double, double) setTranslateY (double) 26

JavaFX Affine Class JavaFX supports § java.lang.Object many more operations– check - javafx.scene.transform.Transform the docs for more javafx.scene.transform.Affine details. § The Affine class represents a general affine transform. § Class methods - append(Matrix) – concatenate a matrix to this one - appendRotation(theta) – append rotationtransform of theta degrees - appendScale(s) – append scale transform using scalar s - appendTranslate(dx, dy) – append translate transform using dx, dy - createInverse() - return the inverse of this matrix - transform(x, y) – remap this point using this specific matrix 27

Shape Models & Scene Graphs Transformations on shape models Structuring scene graphs Hit tests on transformed points 28

Shape Models (Refined!) § We want our shape models to represent both the shape at the origin (points), and the transformed shape (points * matrix). § To manage this, a shape model class will typically contain these fields: - Points : the points required to render the shape model at the origin - Matrix : an affine transformation matrix that transforms these points. - Properties: used during rendering e.g. color, border thickness (x' 0 ,y' 0 ) (x 0 ,y 0 ) (x' 1 ,y' 1 ) (x 4 ,y 4 ) (x 1 ,y 1 ) (x' 4 ,y' 4 ) (x' 2 ,y' 2 ) (x 2 ,y 2 ) (x 3 ,y 3 ) (x' 3 ,y' 3 ) The points are defined Rendering first remaps the Remapped points with properties at the origin. points using the matrix. used to set color for rendering. 29

Scene Graphs § Each part is a shape model that has points + a transform matrix § Each child inherits its parent’s matrix and draws itself relative to its parent 30

Relative Positioning w. Scene Graph § Every node in the tree stores its transformations relative to its parent (typically as an Affine Transformation Matrix). § Nodes draw using both their parent’s matrix and their own matrix - The top-level node draws using its own matrix, and then iterates through each child, passing them its matrix and telling them to draw. - Each child receives the parent’s In a scene graph, every node has a matrix, concatenates with its own matrix that describes its position matrix, and then draws content. In relative to its parent (i.e. operations turn, it recursively calls its children requires to draw relative to the parent node). with the combined matrix. 31

Hit-testing with Transformed Shapes § Mouse and shape model are in different coordinate systems § Two options for hit testing: Transform shape model to mouse coordinates 1. Transform mouse to shape model coordinates 2. mouse shape model coordinates coordinates 𝑞 𝑞 x (0,0) A ・ p y 𝑛 𝑛 32

Transform Shape Model to Mouse Coordinates § Have to transform every point and/or parameter in shape model before running each hit-test algorithm - extra memory, lots of extra calculation mouse shape model coordinates coordinates 𝑞 x (0,0) p’ = A ・ p y 𝑛 33