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

2

• Shape model contains points (and properties used for drawing)
• Translation, Rotation and Scaling are operations that we can apply

before rendering. Model Image Rendering Transform Model'

(x0,y0) (x1,y1) (x2,y2) (x3,y3) (x4,y4) (x'0,y'0) (x'1,y'1) (x'2,y'2) (x'3,y'3) (x'4,y'4)

Translation Scaling Rotation

Combining Transformations

3

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.

Matrix Representation

4

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

Matrix Representation

5

• 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

What would a 2D matrix look like for Scale, Rotate, Translate?

6

• 2D Scale around (0,0)?

How to represent Translate?

• 2D Rotate around an angle?
• Mirroring a point around the Y axis?

Can a 2 x 2 Matrix Represent All 2D Transformations?

7

• 2D Translation
• Maybe this?

Problem: Only works for a specific point. Can’t create a general 2x2 matrix to transform a model

=

1 / / 1

No.

Homogeneous Coordinates

8

• 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

…

These are the same point in 2D! Divide x and y by w to get the equivalent Cartesian coordinates

3 2 1 6 4 2 7.5 5.0 2.5

Using a 3-tuple to represent 2D points

9

• We will represent coordinates in 2 dimensions with a 3-tuple, where w

= 1 (i.e. represent points as a 3 × 1 column matrix) But we will also need 3 columns in our transformation matrix to be able to multiply them together. This will provide to he a helpful trick in handling translations

3 x 3 Translation Matrix

10

• Now we can represent 2D translation with a 3x3 matrix

3 x 3 Translation Matrix Example

11

3 x 3 Scale Matrix

12

• 2 x 2 Scale Matrix
• 3 x 3 Scale Matrix

Rotation

13

• 2 x 2 Rotation Matrix
• 3 x 3 Rotation Matrix

cos(θ) –sin(θ) 0 sin(θ) cos(θ) 0 0 0 1

3 x 3 Rotation Matrix Example

14

θ = 30°

θ

x’ y’ 1 = cos(30) –sin(30) 0 sin(30) cos(30) 0 0 0 1 x y 1 = cos(30)x – sin(30)y sin(30)x + cos(30)y 1

Affine Transformation Matrix

15

• Now we have Translation matrix, Rotation matrix and Scale matrix
• This 3 x 3 matrix is an Affine Transformation matrix
• it can express any combination of translate, rotate, and scale

x' y' 1 = A B C D E F 0 0 1 x y 1 Ax + By + C Dx + Ey + F 1

=

T(tx, ty) S(sx, sy) R(θ) = = =

cos(θ) –sin(θ) 0 sin(θ) cos(θ) 0 0 0 1

Matrix Composition

16

• 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)))

Matrix Multiplication

18

• 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

How do we rotate a shape?

21

• 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);

BarExercise.java (0,0)

Exercise: Attempt 1 (Wrong)

22

• Just rotate it?

g2.rotate(30); drawBar(g2, 50, 100, 150, 100);

Exercise: Answer

24

• 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);

Illustration

25

1 3 4 2

p’ = I・p p’ = T(-50, -100)・p p’ = R(30) ・T(-50, -100)・ p p’ = T(50,100) ・R(30) ・T(-50, -100)・p

Summary: Graphics Methods

26

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) setScaleY (double) gc.scale (double, double) Translate* setTranslateX (double) setTranslateY (double) gc.translate (double, double)

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.

JavaFX Affine Class

27

• java.lang.Object
• javafx.scene.transform.Transform

javafx.scene.transform.Affine

• 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

JavaFX supports many more

• perations–

check the docs for more details.

Shape Models & Scene Graphs

Transformations on shape models Structuring scene graphs Hit tests on transformed points

28

Shape Models (Refined!)

29

• 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

(x0,y0) (x1,y1) (x2,y2) (x3,y3) (x4,y4) (x'0,y'0) (x'1,y'1) (x'2,y'2) (x'3,y'3) (x'4,y'4)

The points are defined at the origin. Rendering first remaps the points using the matrix. Remapped points with properties used to set color for rendering.

Scene Graphs

30

• 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

Relative Positioning w. Scene Graph

31

• 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
• wn matrix, and then iterates

through each child, passing them its matrix and telling them to draw.

• Each child receives the parent’s

matrix, concatenates with its own matrix, and then draws content. In turn, it recursively calls its children with the combined matrix.

In a scene graph, every node has a matrix that describes its position relative to its parent (i.e.

• perations requires to draw

relative to the parent node).

Hit-testing with Transformed Shapes

32

• Mouse and shape model are in different coordinate systems
• Two options for hit testing:

1.

Transform shape model to mouse coordinates

2.

Transform mouse to shape model coordinates

(0,0)

x y

shape model coordinates mouse coordinates

𝑛 𝑛

𝑞 𝑞 A・p

Transform Shape Model to Mouse Coordinates

33

• Have to transform every point and/or parameter in shape model

before running each hit-test algorithm

• extra memory, lots of extra calculation

(0,0)

x y

shape model coordinates mouse coordinates

𝑞

𝑛

p’ = A・p

Transform Mouse to Shape Model Coordinates

34

• Only one point to transform
• Use the inverse matrix
• But computing inverse can be costly …

(0,0)

x y

shape model coordinates mouse coordinates

𝑞

𝑛

m’ = A-1・m A・p

JavaFX tranform methods

36

• 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.