Affine Transformations

Example Shape Models

A “shape model” includes all of the data that we need to draw a particular shape. • An array of points: {P1, P2, …, Pn}• Can be open, closed, filled … • Includes any other data that we need to draw

2

Components

We can use a shape model to describe user-interface components:• Allows reuse of objects in scenes, and simplified remapping of

models after a change (e.g. animations).• Can create multiple instances by translating model of object and re-

rendering

The interactor tree already describes the relationship of components.• Component location is 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)

3

Components

• For a lightweight GUI toolkit, a component “shape model” might include:• shape• 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

Affine Transformations

In this lecture, we’ll show how to use affine transformations to:

1. Tell components how to draw themselves on-screen, relative to their parent.

2. Determine if a mouse-click intersects one of these components in the interaction tree.

5

Linear Algebra: Review of Terms

(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

6

Moving Shapes Around, Multiple Shape Instances

Translate by adding offset to shape points

What about scaling?

Or rotation?

transform

7

Moving Shapes Around, Multiple Shape Instances

How to create multiple instances of a shape?

Rotation + Scaling + Translation

8

transform

Translation

translate: add a scalar to each of the components

tx=2, ty=4

x' = x + tx

y' = y + ty9

Uniform Scaling

uniform scale: multiply each component by the same scalar

multiply by s = 2

x' = x × sy' = y × s 10

Non-Uniform Scaling

scale: multiply each component by different scalar

multiply by sx = 2, sy = 1/2

x' = x × sx

y' = y × sy 11

Θ

Rotation

rotate: each component is some function of x, y, Θ

x' = f(x,y,Θ)y' = f(x,y,Θ)

rotate by Θ = 30 o

12

Θ

Rotation

rotate: each component is some function of x, y, Θ

x' = x cos(Θ)-y sin(Θ) y' = x sin(Θ)+y cos(Θ)

rotate by Θ = 30 o

13

Combining Transformations

Rotate:x' = x cos(Θ)-y sin(Θ) y' = x sin(Θ)+y cos(Θ)

Translate:x' = x + txy' = y + ty

Scale:x' = x × sx

y' = y × sy

14

Combining Transformations: (1) Scale

Rotate:x' = x cos(Θ)-y sin(Θ) y' = x sin(Θ)+y cos(Θ)

Translate:x' = x + txy' = y + ty

Scale:x' = x × sx

y' = y × syx1 = 2x y1 = 2y

15

Combining Transformations: (2) Rotate

Rotate:x' = x cos(Θ)-y sin(Θ) y' = x sin(Θ)+y cos(Θ)

Translate:x' = x + txy' = y + ty

Scale:x' = x × sx

y' = y × syx2 = 2x cos(30) - 2y sin(30)y2 = 2x sin(30) + 2y cos(30)

16

Combining Transformations: (3) Translation

Rotate:x' = x cos(Θ)-y sin(Θ) y' = x sin(Θ)+y cos(Θ)

Translate:x' = x + txy' = y + ty

Scale:x' = x × sx

y' = y × syx3 = 2x cos(30) - 2y sin(30) + 8y3 = 2x sin(30) + 2y cos (30) + 4

N.B. Order of operations is important. What if you translate first? 17

Matrix Representation

Goal: represent each 2D transformation with a matrix

Multiply matrix by column vector <=> apply transformation to point

18

Matrix Representation

Why? Transformations can be combined by multiplication (associative)

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.

19

2 x 2 Matrices

Why types of transformations can be represented by a 2x2 matrix?

2D Scale around (0,0)?

20

2 x 2 Matrices

Why types of transformations can be represented by a 2x2 matrix?

2D Rotate around (0,0)?

21

2 x 2 Matrices

Why types of transformations can be represented by a 2x2 matrix?

2D Mirror about Y axis?

22

2 x 2 Matrices

Why types of transformations can be represented by a 2x2 matrix?

2D Translation

Maybe this?

=

1

//1

23

We can’t generalize 2D translation this way (additive instead of multiplicative)

Homogeneous Coordinates

• Solution: add an extra component (w) to each 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

…

24

(divide by w to get cartesean

coords)

Homogeneous Coordinates

• The w component is needed to represent translation (we’re not working in 3D space, it just looks like it!)

25

• This gives us an Affine Transformation Matrix that we can use to represent all combined transformations: translation, scaling and rotation

• a, d: scaling• a, b, c, d: rotation• tx, ty: translation

always (0,0,1)

extra row w (just set to 1)

Vector and Point Operations

• This gives us a general representation of a set of transformations, that we can apply to a point or a vector.

26

vector

pointWhat we typically use for manipulating shape models..

Vector and Point Homogeneous Coordinates

add vectors

subtract points

scalar multiply

point + vector

27

Translating Vectors

A vector has no position so translating it shouldn’t change anything.

28

Translation Matrix

We can represent 2D point translation with a 3x3 matrix

29

Translation Matrix: Example

30

Rotation Matrix

Vectors:

Points:

31

Rotation Matrix: Example

32

Θrotate by Θ = 30 o

Scaling Matrix

Vectors:

Points:

33

Scaling Matrix: Example

34

multiply by sx = 2, sy = 1/2

Matrix Composition

Transformations can be combined by matrix multiplication

35

Matrix Composition Order

• Associative: A(BC) = (AB)C• Not Commutative: AB ≠ BA order of transformations matters!

36

Matrix Composition

What if we want to rotate and translate?• example: rotate line segment by 45 degrees about endpoint a

37

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?

38

Multiplication Order: Correct Way

Scaling and rotation are both about the origin. To rotate about a point instead:

• translate back to where you want it

39

• translate shape to the origin

• rotate

Scene Graph

• Each part has a transform matrix

• Each part draws its children relative to itself

40

Affine Transformations + Interactor Tree

• In a GUI, every component is described relative to it’s parent.

• We can maintain an affine transformation matrix for each component, that describes how to paint it relative to its parent.

• e.g. M1: translate (10,10)• e.g. M2: translate (5,5)

41

x

— M1

— M2

Affine Transformations + Interactor Tree

As we descend the interactor tree, each component should:

(1) paint itself (using it’s affine transformation matrix)

(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

42

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.

43

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

44

Option 1: Transform Mouse to Model Coordinates

• only one transformation• maintaining the inverse

45

Option 2: Transform Model to Mouse Coordinates

• many transformations• manipulations (e.g., dragging) must be transformed back

into model coordinates

46

Java Graphics2D Methods

• Graphics2D methods that apply to the current graphics context:

• getTransform(), setTransform() // get or set context

• void rotate(double theta)

• void scale(double sx, double sy)

• void translate(double tx, double ty)

Java AffineTransform Class

• Handles all matrix operations

• More control than Graphics2D

• static AffineTransform getRotateInstance(double theta)

• static AffineTransform getScaleInstance(double sx, double sy)

• static AffineTransform getTranslateInstance(double tx, double ty)

Example: Rotate TriangleWe can develop the transformations to animate a triangle (drawn at the origin) in a circle in two different ways:

RotateTriangle.java