Transformations 2D

It is essential for a graphics system to allow the user to change the way objects appear. Some of the effects we might desire include:
1) Changing the size of an object
2) Changing the objects position on the screen
3) Changing its orientation

When defining a 2D object, we produce one basic description of its shape and through the use of transformations, we may view it differently.

Viewing transformations include:
1) Translation ( moving an object)
2) Scaling (changing an objects size)
3) Rotation (turning an object on an axis)

2D Transformations

These transformations are linear meaning that straight lines are transformed into straight lines. This implies that an object that is composed entirely of straight lines (i.e. points connected by edges) can be transformed by simply transforming the vertices and then connecting the edges.

(1) Translation - consists of a shift of the object parallel to itself in any direction in the (x,y)-plane.

Tx = amount of x-shift
Ty = amount of y-shift

Xt = X + Tx
Yt = Y + Ty

Problem: Translate the triangle (10,10), (20,10), (15,20) 10 units to the right and 5 units up.

(2) Scaling - consists of elongating or shrinking the object in the x-direction and in the y-direction by two independent factors, Sx and Sy.

Xs = X*Sx
Ys = Y*Sy

Problem: Scale the original triangle above to twice its size.

(3) Rotation - consists of rotating the object around the point (0,0). The rotation of the point (X,Y) into the point (Xr,Yr) is expressed by:

Clockwise Rotation by angle theta about (0,0):

Xr = Xcos(theta) + Ysin(theta)
Yr = -Xsin(theta) + Ycos(theta)

Note: It is the case that cos(-theta) = cos(theta) and sin(-theta) = -sin(theta).

Counterclockwise Rotation by angle theta about (0,0):

Xr = Xcos(theta) - Ysin(theta)
Yr = Xsin(theta) + Ycos(theta)

Problem: Rotate the original triangle by 45 degrees clockwise about the origin given sin(45)=.7071 and cos(45)=.7071.

Concatenation of Transformations

In the examples above, scaling and rotation were done relative to the origin (0,0). What if we want to scale or rotate relative to some arbitrary point?

We've already mentioned rotating about an arbitrary point goes like the following:

1) Translate that point to the origin
2) Rotate about the origin either cw or ccw
3) Translate back

Homogeneous Coordinates and Matrices

Matrix representations for translation, scaling, and rotation are:

P' = P + T ; P' = P * S ; P' = P * R

The goal is to treat ALL three transformations in a consistent or homogeneous way.

2D transformations can be represented uniformally by a 3x3 matrix. In general, we can transform a point (x,y) to (x',y') using some combination of the tralslation, scaling, and rotation formulas described earlier.

In matrix form, we have:

                    
[x' y' 1] = [x y 1] a  d  0
                    b  e  0
                    c  f  1

The 3x3 matrix completely specifies the transformation.

Note: The addition of the third element of unity to [x y] allows us to transform the point (x,y) by a 3x3 matrix.

The following now become the general transformations:

Translation of point (x,y) by (Tx,Ty):


[Xt Yt 1] = [X Y 1]  1  0  0
                     0  1  0
                     Tx Ty  1

Scaling of point (x,y) by (Sx,Sy):


[Xs Ys 1] = [X Y 1]  Sx 0  0
                     0  Sy 0
                     0  0  1

Rotation of point (x,y) by theta (cw):


[Xr Yr 1] = [X Y 1]  cos(theta)  -sin(theta)   0
                     sin(theta)   cos(theta)   0
                     0            0            1

Rotation of point (x,y) by theta (ccw):


[Xr Yr 1] = [X Y 1]  cos(theta)   sin(theta)   0
                     -sin(theta)  cos(theta)   0
                     0            0            1

Problem: Scale a point (x,y) by 5 and then translate it with Tx=10 and Ty=15.

[x' y' 1] = [x y 1]  5  0  0
                     0  5  0
                     0  0  1

[x'' y'' 1] = [x' y' 1]  1  0  0
                         0  1  0
                        10 15  1

OR

[x'' y'' 1] =  [x y 1] 5  0  0    1  0  0
                       0  5  0    0  1  0
                       0  0  1   10 15  1

OR

[x'' y'' 1] = [x y 1]  5  0  0
                       0  5  0
                      10 15  1
Problem: Rotate a point (2,3) through a cw angle 90 degrees about the point (1,1). cos(90)=0 and sin(90)=1. What is the new point produced?

Note1: Concatenating transformations is done by multiplying the matrices in the order that they exist (are to be applied).

Note2: In general, a matrix of the form below, produces two general equations of the form:

Xt = ax + cy + e
Yt = bx + dy + f

a  b  0
c  d  0
e  f  1

©1995 Douglas J. Ryan
Douglas J. Ryan/ryand@tardis.pacificu.edu