You are on page 1of 14

# 2D Transformations

Larry F. Hodges
(modified by Amos Johnson)

y-axis

## To rotate a line or polygon, we must

rotate each of its vertices.

(x2,y2)

(x1,y1)

we observe:

B
A
(0,0)

x-axis

## From the illustration we know that:

sin (A + B) = y2/r cos (A + B) = x2/r
sin A = y1/r

Larry F. Hodges
(modified by Amos Johnson)

cos A = x1/r

From the double angle formulas:

## sin (A + B) = sinAcosB + cosAsinB

cos (A + B)= cosAcosB - sinAsinB

Substituting:

## y2/r = (y1/r)cosB + (x1/r)sinB

Therefore:

y2 = y1cosB + x1sinB

We have

x2 = x1cosB - y1sinB
y2 = x1sinB + y1cosB

P2 =
(x2)
(y2)
Larry F. Hodges
(modified by Amos Johnson)

P1

## (cosB -sinB) (x1)

(sinB cosB) (y1)
3

Translations
Moving 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.
P2 = P 1 + T
Ty

Tx

P1 = ( x1 )
( y1 )

T = ( tx )
( ty )

P2 = (x1 + tx)
(y1 + ty)

Larry F. Hodges
(modified by Amos Johnson)

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.
P2 = S .P1

S = (sx 0)
(0 sy)

P1 = ( x1 )
( y1 )

P2 = (sxx1)
(syy1)

Larry F. Hodges
(modified by Amos Johnson)

Homogeneous Coordinates
Although 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 3 x 3 matrices and
pad our points to become 1 x 3 matrices.
cos -sin
R = sin
0
0

0
cos
1

Sx

S = 0

Sy

Tx

T = 0

Larry F. Hodges
(modified by Amos Johnson)

(x)
Point P = (y)
(1)

Ty

## Composite Transformations - Scaling

Given 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) = (4)
(2 0
0)
(1)
(1)
(0 1
0)
(1)
(1)
(0 0
1)
(2 0
(0 1
(0 0

0)
0)
1)

(4)
(1)
(1)

= (8)
(1)
(1)

Before
After

Larry F. Hodges
(modified by Amos Johnson)

10

## 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 1
(0 0

0)
0)
1)

(2 0
(0 1
(0 0

0)
0)
1)

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

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

Before
After

10

(0,0) is known as a fixed point for the basic scaling transformation. We can
used composite transformations to create a scale transformation with
different fixed points.
Larry F. Hodges
(modified by Amos Johnson)

Fixed
Point
Scaling
Scale by 2 with fixed point = (2,1)

## Translate the point (2,1) to the origin

Scale by 2
Translate origin to point (2,1)

(1 0
(0 1
(0 0

2)
1)
1)

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

-2)
0)
1)

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

(2)
(1)
(1)
=

(4)
(1)
(1)

Larry F. Hodges
(modified by Amos Johnson)

(2)
(1)
(1)
(6)
(1)
(1)

Before
After

10

## More Fixed Point Scaling

Scale by 2 with fixed point = (3,1)
Translate the point (3,1) to the origin
Scale by 2
Translate origin to point (3,1)
(1 0 3)
(0 1 1)
(0 0 1)

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

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

(1)
(1)
(1)

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

(5)
(1)
(1)

Larry F. Hodges
(modified by Amos Johnson)

Before
After

10

10

## Rotation about a Fixed Point

Rotation of Degrees About Point (x,y)
Translate (x,y) to origin
Rotate
Translate origin to (x,y)
(x,y)

(1 0
(0 1
(0 0

x)
y)
1)

Larry F. Hodges
(modified by Amos Johnson)

(x,y)

## (cos -sin 0)(1 0 -x)

(cos -sin -xcos + ysin + x )
(sin cos 0)(0 1 -y) = (sin cos -xsin - ycos + y )
(0
0
1)(0 0 1)
(0
0
1
)
You rotate the box by rotating each vertex.

11

Shears

Original Data

y Shear

x Shear

1 0 0
a 1 0
0 0 1

1
0
0

b
1
0

0
0
1

## GRAPHICS --> x shear --> GRAPHICS

Larry F. Hodges
(modified by Amos Johnson)

12

Reflections
-1
0
0

0
1
0

Larry F. Hodges
(modified by Amos Johnson)

0
0
1

1
0
0

0
-1
0

0
0
1

13

More Reflections
-1
0
0

0
-1
0

Larry F. Hodges
(modified by Amos Johnson)

0
0
1

0
1
0

1
0
0

0
0
1

14