You are on page 1of 14

2D Transformations

Larry F. Hodges
(modified by Amos Johnson)

Rotation About the Origin

y-axis

To rotate a line or polygon, we must


rotate each of its vertices.

(x2,y2)

(x1,y1)

To rotate point (x1,y1) to point (x2,y2)


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

Rotation About the Origin


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
Reflection about the y-axis
-1
0
0

0
1
0

Larry F. Hodges
(modified by Amos Johnson)

0
0
1

Reflection about the x-axis


1
0
0

0
-1
0

0
0
1

13

More Reflections
Reflection about the origin
-1
0
0

0
-1
0

Larry F. Hodges
(modified by Amos Johnson)

0
0
1

Reflection about the line y=x


0
1
0

1
0
0

0
0
1

14