2-D Transformations

Introduction

See and hear Dr. Jim Foley introduce 2-D transformations.

Note: this is a QuickTime movie recorded on an SGI and we recommend that you use an SGI to view it and all other videos herein.

In order to manipulate an object in two dimensional space, we must apply various transformation functions to the object. This allows us to change the position, size, and orientation of the objects

A transformation is a function that maps every position (x,y) into a new posistion (x',y'). Instead of applying the transformation to every point in every line that makes up the object, we simply apply the function to the objects vertices and then draw new lines between the resulting new endpoints.

There are five basic 2D Transformation functions:

Translation
Scale
Rotation
Shear
Reflection

Test yourself

Use these quiz buttons throughout the page to test your knowledge of 2D transformations. (Some of the material in the quiz is not covered explicitly in this page.)

Translation

The Translation function allows us to move an object in the x-y plane. This is accomplished by adding a translation distance to the x and y coordinates of the original vertex.

x' = x + Tx
y' = y + Ty

In this example, the object is translated to a new position

A Translation

Dr. Foley's explanation of translations.

You can go to the exploratory materials to experiment the concept of translation. (You need to be running the HotJava browser.)

Scale

Dr. Foley's explanation of scaling.

The scale function allows us to change the size of an object. Each of the vertex's original coordinates are multiplied by a scaling factor:

x' = x*Sx
y' = y*Sy
where Sx, Sy > 0

If Sx = Sy, the propotions of the object are unchanged

If the scaling factors are less than one, the object will appear smaller and closer to the origin. If the scaling factors are greater than one, the object will appear larger and further from the origin.

This change in position can be compensated for by scaling from a fixed point, usually a corner of the center.

This example shows how scaling works:

A Scaling Transformation: Sx = 0.5 Sy = 2

You can go to the exploratory materials to experiment the concept of scaling. (You need to be running the HotJava browser.)

Rotation

Dr. Foley's explanation of rotations.

An object can be rotated about the origin by a specific rotation angle ß. This is accomplished by applying the Rotation transformation to each vertex of the object.

In order to rotate point (X1,Y1) to point (X2,Y2), we note the following: 

sin(A + B) = Y2/r     cos(A + B) = X2/r
sinA = Y1/r           cosA = X1/r

From the double angle formulas 

sin(A + B) = sinA * cosB + cosA * sinB

Substituting yields 

Y2/r = (Y1/r) * cosB + (X1/r) * sinB
Y2 = Y1cosB + X1sinB

Therefore 

X2 = X1cosB - Y1sinB
Y2 = X1sinB + Y1cosB

The following example demonstrates the Rotation transformation

A Rotation of 45 degrees

You can go to the exploratory materials to experiment the concept of rotation. (You need to be running the HotJava browser.)

Test yourself

Matrix Representation of 2D Transformations

Transformation functions are usually represented in matrix form. This enables all three transformation functions to be treated as matrix multiplications. Matrices also provide an efficient method for performing sequences of transformations without calculating intermediate coordinate values. In order to use the matrix representation, we must express our points in Homogeneous Coordinates. This entails adding a non-zero third coordinate, W, to a point. Therefore,

(X,Y) would yield (Xh,Yh,W)
where Xh = X*W and Yh = Y*W

For 2D transformations, we set W = 1 by dividing X and Y by W.

We can now represent the basic transformation functions as 3X3 matrices. Applying a transformation to a point is accomplished by multiplying the homogenous coordinates of the point by the appropriate transformation matrix.

The Translation transformation becomes 


    (X')     (1  0  Tx)   (X)
    (Y')  =  (0  0  Ty) * (Y)
    (1 )     (0  0  1 )   (1)

The Scale transformation relative to the origin becomes 


    (X')     (Sx  0  0)   (X)
    (Y')  =  (0  Sy  0) * (Y)
    (1 )     (0  0   1)   (1)

The Rotation transformation about the origin becomes 




    (X')     (cosØ  -sinØ  0)   (X)
    (Y')  =  (sinØ   sinØ  0) * (Y)
    (1 )     (0      0     1)   (1)

Composite Transformations

[Video Clip]

The use of sequences of transformations allows us to simplify difficult problems. The transformation sequence can be concatenated into a single composite matrix through matrix multiplication.

For example, consider rotating an object around an arbitrary point P1. Our rotation transformation works around the origin. However, we can break down this problem into three seperate problems which can be solved using the transformations we know about.

  1. Translate P1 to origin
  2. Rotate
  3. Translate the point at the origin back to P1

This series of steps can be performed as follows: 


  
    Undo
 Translation         Rotation                Translation
  (1  0  X)   (cosØ  -sinØ  0)   (1  0  -X)
  (0  1  Y) * (sinØ   cosØ  0) * (0  1  -Y)
  (0  0  1)   (0        0   1)   (0  0   1)


   (cosØ  -sinØ   X(1 - cosØ) + YsinØ)
=  (sinØ   cosØ   Y(1 - cosØ) - XsinØ)
   (0        0             1         )

A Composite Transformation: Translate to Origin, Rotate 45 degrees, and Translate back

Other Transformations

In addition to the three basic transformations discussed above, there are two additional transformation

Shear
Reflection

Shear

The shear transformation distorts an object by scaling one coordinate using the other. 


Original Data           Y Shear         X Shear

The following are the matrix respresentations of the two types of shear: 


           X Shear                Y Shear
         (1   a   0)            (1   0   0)
  SHx =  (0   1   0)    SHy =   (b   1   0)
         (0   0   1)            (0   0   1)

The terms a and b are proportionality constants.

A X Shear

A Y Shear

Reflection

The Reflection transformation produces a mirror image of the object with respect to a specefied axis, point, or line.

The matrix used to reflect about the y-axis is: 


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

A Reflection about the Y-axis

The matrix used to reflect about the x-axis is: 


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

A Reflection about the X-axis

In order to reflect about the origin, we use: 


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

A Reflection about the Origin

To reflect about the line Y = X, we use: 


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

A Reflection about the line Y = X

Exploratory Material

This is a link to an application that will allow you to explore different combinations and sequences of the transformations that you have read about on this page through a maze game. Click on this link 2D Transformation game to access the application. (You need to be running Java-Capable browser such as Netscape 2.)

Derivation Example

A detailed example shows a function for moving from world to screen coordinates using transformations. Click here to access the example.

Test yourself