1

2D Transformations

2

Rotation About the OriginTo rotate a line or polygon, we must

rotate each of its vertices.

To rotate point (x1,y1) to point (x2,y2) we observe:

From the illustration we know that:x1 = rcosA y1= rsinAx1 = rcos(A+B) y2= rsin(A+B)

x-axis

(x1,y1)

(x2,y2)

A

Br

(0,0)

y-axis

From the double angle formulas: sin (A + B) = sinAcosB + cosAsinB

cos (A + B) = cosAcosB - sinAsinB

Substituting: y2 = rcosAcosB – rsinAsinB

Therefore: y2 = y1cosB + x1sinB

We have x2 = x1cosB - y1sinB

y2 = x1sinB + y1cosB

3

TranslationsMoving an object is called a translation. We translate a point by adding to

the x and y coordinates, respectively, the amount the point should be shifted in the x and y directions. We translate an object by translating each vertex in the object.

x2 = x2 + tx y2 = y1 + ty

Ty

Tx

4

Scaling

Changing the size of an object is called a scale. We scale an object by scaling the x and y coordinates of each vertex in the object.

x2 = sxx1 y2 = syy1

5

Homogeneous CoordinatesAlthough the formulas we have shown are usually the most efficient way to implement

programs to do scales, rotations and translations, it is easier to use matrix transformations to represent and manipulate them.

In order to represent a translation as a matrix operation we use 4 x 4 matrices and pad our points to become 4x1 matrices. We are using 4x4 matrices because everything is done in 3D in OpenGL

Point P = (x, y, 0, 1) (make it a 4x1 before matrix multiplication)

cos ø -sin ø 0 0

Rø = sin ø cos ø 0 0

0 0 1 0

0 0 0 1

Sx 0 0 0

S = 0 Sy 0 0

0 0 1 0

0 0 0 1

1 0 0 Tx

T = 0 1 0 Ty

0 0 1 0

0 0 0 1

6

Composite Transformations - ScalingGiven our three basic transformations we can create other transformations.

Scaling with a fixed point

A problem with the scale transformation is that it also moves the object being scaled.

Scale a line between (2, 1) (4,1) to twice its length.(2 0 0 0) (2) = (4)

(0 1 0 0) (1) (1)

(0 0 1 0) (0) (0)

(0 0 0 1) (1) (1)

(2 0 0 0) (4) = (8)

(0 1 0 0) (1) (1)

(0 0 1 0) (0) (0)

(0 0 0 1) (1) (1)

0 1 2 3 4 5 6 7 8 9 10

Before

After

7

Composite Transforms - Scaling (cont.)If we scale a line between (0, 1) (2,1) to twice its length, the left-hand

endpoint does not move.

(2 0 0 0) (0) = (0)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

(2 0 0 0) (2) = (4)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

(0,0) is known as a fixed point for the basic scaling transformation. We can use composite transformations to create a scale transformation with different fixed points.

0 1 2 3 4 5 6 7 8 9 10

Before

After

8

Fixed Point ScalingScale by 2 with fixed point = (2,1)1. Translate the point (2,1) to the origin2. Scale by 23. Translate origin to point (2,1)

3 2 1(1 0 0 2) (2 0 0 0) (1 0 0 -2) = (2 0 0 -2)(0 1 0 1) (0 1 0 0) (0 1 0 -1) (0 1 0 0)(0 0 1 0) (0 0 1 0) (0 0 1 0) (0 0 1 0)(0 0 0 1) (0 0 0 1) (0 0 0 1) (0 0 0 1)

(2 0 0 -2) (2) = (2)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

(2 0 0 -2) (4) = (6)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

0 1 2 3 4 5 6 7 8 9 10

Before

After

9

More Fixed Point ScalingScale by 2 with fixed point = (3,1)1. Translate the point (3,1) to the origin2. Scale by 23. Translate origin to point (3,1)

(1 0 0 3) (2 0 0 0) (1 0 0 -3) = (2 0 0 -3)(0 1 0 1) (0 1 0 0) (0 1 0 -1) (0 1 0 0)(0 0 1 0) (0 0 1 0) (0 0 1 0) (0 0 1 0)(0 0 0 1) (0 0 0 1) (0 0 0 1) (0 0 0 1)

(2 0 0 -3) (2) = (1)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

(2 0 0 -3) (4) = (5)(0 1 0 0) (1) (1)(0 0 1 0) (0) (0)(0 0 0 1) (1) (1)

0 1 2 3 4 5 6 7 8 9 10

Before

After

10

Rotation about a Fixed PointRotation Of ø Degrees About Point (x,y)

• Translate (x,y) to origin

• Rotate

• Translate origin to (x,y)

(1 0 0 x) (cosø -sinø 0 0) (1 0 0 -x) (cosø sinø 0 -xcosø + ysinø + x )

(0 1 0 y) (sinø cosø 0 0) (0 1 0 -y) =(-sinø cosø 0 -xsinø - ycosø + y)

(0 0 1 0) (0 0 1 0) (0 0 1 0) (0 0 1 0 )

(0 0 0 1) (0 0 0 1) (0 0 0 1) (0 0 0 1 )

You rotate the box by rotating each vertex.

(x,y) (x,y)

11

Shears

Original Data y Shear x Shear

1 0 0 0 1 b 0 0

a 1 0 0 0 1 0 0

0 0 1 0 0 0 1 0

0 0 0 1 0 0 0 0

GRAPHICS --> x shear --> GRAPHICS

12

ReflectionsReflection about the y-axis Reflection about the x-axis

-1 0 0 0 1 0 0 0

0 1 0 0 0 -1 0 0

0 0 1 0 0 0 1 0

0 0 0 1 0 0 0 1

13

More ReflectionsReflection about the origin Reflection about the line y=x

-1 0 0 0 0 1 0 00 -1 0 0 1 0 0 00 0 1 0 0 0 1 0

0 0 0 1 0 0 0 1