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. Rendering Transform 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

Can a 2 x 2 Matrix Represent All 2D Transformations? No.  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  2 x 2 Rotation Matrix  3 x 3 Rotation Matrix cos( θ ) – sin( θ ) 0 sin( θ ) cos( θ ) 0 0 0 1 13

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

Affine Transformation Matrix  Now we have Translation matrix, Rotation matrix and Scale matrix R( θ ) T(t x , t y ) 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 y ' y = 1 = D E F 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  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 18

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); (0,0) 21

Exercise: Attempt 1 (Wrong)  Just rotate it? g2.rotate(30); drawBar(g2, 50, 100, 150, 100); 22

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 p’ = I ・ p 1 p’ = T( -50, -100) ・ p 2 p’ = R(30) ・ T(-50, -100) ・ 3 p p’ = T(50,100) ・ R(30) ・ T(-50, -100) ・ p 4 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 – - javafx.scene.transform.Transform check the docs javafx.scene.transform.Affine for more 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 Rendering first remaps the Remapped points with defined at the origin. points using the matrix. properties 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 matrix, concatenates with its own has a matrix that describes its matrix, and then draws content. In position relative to its parent (i.e. turn, it recursively calls its children operations 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

Transform Mouse to Shape Model Coordinates  Only one point to transform  Use the inverse matrix - But computing inverse can be costly … mouse shape model coordinates coordinates 𝑞 x (0,0) m’ = A -1 ・ m A ・ p y 𝑛 34

JavaFX tranform methods  Node class has useful methods: - localToScreen(x, y) : Transforms a point from the local coordinate space of this Node into the coordinate space of its screen. - localToScene(x, y) : Transforms a point from the local coordinate space of this Node into the coordinate space of its scene. - screenToLocal(screenX, screenY) :Transforms a point from the coordinate space of the screen into the local coordinate space of this node. - sceneToLocal(scenex, sceneY) : Transforms a point from the coordinate space of the scene into the local coordinate space of this node. Watch the Node and shape documentation for more options. 36