1 of 25

2D Transformations

Click to edit Master subtitle style

2 of 25

Contents
In todays lecture well cover the following:

Why transformations Transformations

Translation Scaling Rotation

Homogeneous coordinates Matrix multiplications Combining transformations

3 of 25

Why Transformations?
In graphics, once we have an object described, transformations are used to move that object, scale it and rotate it
H e a r n & B a k e r, C o m p u te r G r a p h ic s w it h O p e n G L ( 2 0 0 4 )

I m a g e s ta k e n fr o m

4 of 25

Translation
Simply moves an object from one position to another

xnew = xold + dx
y
6 5 4 3 2 1 0

ynew = yold + dy

10

Note: House shifts position relative to origin

5 of 25

Translation Example
y
6 5 4 3 2 1

(2, 3)

(1, 1)

(3, 1)
1 2 3 4 5 6 7 8 9 1 0

6 of 25

Scaling
Scalar multiplies all coordinates WATCH OUT: Objects grow and move! xnew = Sx xold ynew = Sy yold
y6
5 4 3 2 1 0 1 2 3 4 5 6 7 8 9 10
2 1 3 1 6 3 9 3

Note: House shifts position relative to origin

7 of 25

Scaling Example
y
6 5 4 3 2 1

(2, 3)

(1, 1)

(3, 1)
1 2 3 4 5 6 7 8 9 1 0

8 of 25

Rotation
Rotates all coordinates by a specified angle xnew = xold cos yold sin ynew = xold sin + yold cos Points are always rotated about the origin
y
6 5 4 3 2 1 0

6
3 4 5 6 7 8 9 10

9 of 25

Rotation Example
y
6 5 4 3 2 1

(4, 3)

(3, 1)
1 2 3 4 5

(5, 1)
6 7 8 9 1 0

10 of 25

Homogeneous Coordinates
A point (x, y) can be re-written in homogeneous coordinates as (xh, yh, h) The homogeneous parameter h is a nonzero value such that:

yh y= h We can then write any point (x, y) as (hx, hy, h) We can conveniently choose h = 1 so that (x, y) becomes (x, y, 1)

11 of 25

Why Homogeneous Coordinates?

Mathematicians commonly use homogeneous coordinates as they allow scaling factors to be removed from equations We will see in a moment that all of the transformations we discussed previously can be represented as 3*3 matrices Using homogeneous coordinates allows us use matrix multiplication to calculate transformations extremely efficient!

12 of 25

Homogeneous Translation
The translation of a point by (dx, dy) can be written in matrix form as:
1 0 0 1 0 0 dx dy 1

Representing the point as a homogeneous column vector we perform the calculation as:
1 0 dx x 1* x + 0 * y + dx*1 x + dx 0 1 dy y = 0 * x + 1* y + dy*1 = y + dy 0 0 1 1 0 * x + 0 * y + 1*1 1

13 of 25

Remember Matrix Multiplication

Recall how matrix multiplication takes place:

14 of 25

Homogenous Coordinates
To make operations easier, 2-D points are written as homogenous coordinate column vectors
Translation:

Scaling:

15 of 25

Homogenous Coordinates (cont)

Rotation:

cos sin 0

sin cos 0

0 x cos x sin y 0 y = sin x + cos y : v' = R ( )v 1 1 1

16 of 25

Inverse Transformations
Transformations can easily be reversed using inverse transformations
1 0 dx 0 1 dy 1 T = 0 0 1 cos sin 0 sin cos 0 1 R = 0 0 1 1 s x S 1 = 0 0 0 0 1 0 sy 0 1

17 of 25

Combining Transformations
A number of transformations can be combined into one matrix to make things easy

Allowed by the fact that we use homogenous coordinates

Imagine rotating a polygon around a point other than the origin

Transform to centre point to origin Rotate around origin Transform back to centre point

18 of 25

Combining Transformations (cont)

House (H )
1

T (dx, dy ) H
2

R ( )T (dx, dy ) H

T (dx,dy ) R ( )T (dx, dy ) H

19 of 25

Combining Transformations (cont)

The three transformation matrices are combined as follows
1 0 dx cos 0 1 dy sin 0 0 1 0 sin cos 0 0 1 0 dx x 0 1 dy y 0 1 0 0 1 1

v' = T ( dx, dy) R( )T (dx, dy)v

REMEMBER: Matrix multiplication is not commutative so order matters

20 of 25

Summary
In this lecture we have taken a look at:

2D Transformations

Translation Scaling Rotation

Homogeneous coordinates Matrix multiplications Combining transformations

Next time well start to look at how we take these abstract shapes etc and get them onscreen

21 of 25

Exercises 1
Translate the shape below by (7, 2)
y
6 5 4 3

(2, 3) (3, 2) (2, 1)

(1, 2 2)
1

22 of 25

Exercises 2
Scale the shape below by 3 in x and 2 in y
y
6 5 4 3

(2, 3) (3, 2) (2, 1)

(1, 2 2)
1

23 of 25

Exercises 3
Rotate the shape below by 30 about the origin
y
6 5 4 3 2 1

(7, 3) (6, 2) (8, 2) (7, 1)

24 of 25

Exercise 4
Write out the homogeneous matrices for the previous three transformations
Translation Scaling Rotation

__ __ __ __ __ __ __ __ __

__ __ __ __ __ __ __ __ __

__ __ __ __ __ __ __ __ __

25 of 25

Exercises 5
Using matrix multiplication calculate the rotation of the shape below by 45 about its centre (5, 3)
5 4 3 2 1

y (5, 4) (4, 3) (5, 2)

0 1 2 3 4 5 6 7 8 9 1 0

(6, 3)

26 of 25

Scratch
y
6 5 4 3 2 1

1 0

27 of 25

Equations
Translation:

xnew = xold + dx ynew = yold + dy

Scaling: xnew = Sx xold ynew = Sy yold Rotation xnew = xold cos yold sin ynew = xold sin + yold cos