Transformations

A transformation is a function that converts a set of (X,Y,Z) coordinates into another set of (X,Y,Z) coordinates.

(So far we're working in 2D - (X,Y) coordinates - but OpenGL treats this as 3D coordinates with Z=0)






Transformations

There are three common types of "model" transformations:






Transformations

Translation Rotation
 
Scaling





Transformations as State

A transformation is considered part of the rendering state, in 'classic' OpenGL and in the 2D canvas.



Transformations are defined before the geometry that they should affect.



When drawing, vertex data is transformed by the currently active transformation.






Transformations in OpenGL

glBegin(GL_TRIANGLES)
glVertex2f(0.0, 0.0)
glVertex2f(0.5, 0.0)
glVertex2f(0.25, 0.5)
glEnd()
     
glTranslatef(0.5, -0.2, 0.0)
glBegin(GL_TRIANGLES)
glVertex2f(0.0, 0.0)
glVertex2f(0.5, 0.0)
glVertex2f(0.25, 0.5)
glEnd()
     





Translation

OpenGL

glTranslatef(x, y, z)

Moves subsequent objects by (x, y, z) units.


Note: there is no 2D glTranslate function; for a 2D translation, pass 0 for z.


Example: basicXform.py

HTML5 2D Canvas

context.translate(x, y);

Moves subsequent objects by (x, y) units.


Example: translate.html






Rotation

OpenGL

glRotatef(angle, x, y, z)

Rotates objects around the axis (x, y, z), by angle degrees.

In 2D, use 0, 0, 1 as the axis.



OpenGL rotations are right-handed - a positive angle rotates counter-clockwise (in 2D).

HTML5 2D Canvas

context.rotate(angle);

Rotates objects in the 2D plane by angle radians.

2D canvas rotations are left-handed - a positive angle rotates clockwise.

Example: rotate.html






Rotation

Rotations are around the origin, not necessarily the center of an object.

This is true both in OpenGL and the 2D canvas.

glBegin(GL_TRIANGLES)
glVertex2f(0.5, 0.0)
glVertex2f(0.8, 0.0) 
glVertex2f(0.65, 0.5)
glEnd()
     
glRotatef(90.0, 0.0, 0.0, 1.0)
glBegin(GL_TRIANGLES)
glVertex2f(0.5, 0.0)
glVertex2f(0.8, 0.0)
glVertex2f(0.65, 0.5)
glEnd()
     





Scaling

OpenGL

glScalef(GLfloat x, GLfloat y, GLfloat z)

Scales objects by the factor x in the X direction, y in the Y direction, and z in the Z direction.

In 2D, pass 1 for z.

A uniform scale - changing the size of an object without distorting it - is done with x = y = z.

HTML5 2D Canvas

canvas.scale(x,y);

Scales objects by the factor x in the X direction, and y in the Y direction.

A uniform scale - changing the size of an object without distorting it - is done with x = y.

Example: scale.html






Scaling

As with rotation, scaling is relative to the origin.

glBegin(GL_TRIANGLES)
glVertex2f(0.5, 0.0)
glVertex2f(0.8, 0.0)
glVertex2f(0.65, 0.5)
glEnd()
     
glScalef(0.25, 0.5, 1.0)
glBegin(GL_TRIANGLES)
glVertex2f(0.5, 0.0)
glVertex2f(0.8, 0.0)
glVertex2f(0.65, 0.5)
glEnd()
     





Multiple Transformations

Individual transformations can be combined.

Each transformation call accumulates with all the previous transformations.

glColor3f(0, 0, 1)
drawTriangle() 

glTranslatef(0.25, 0.25, 0.0)
glColor3f(0, 1, 0)
drawTriangle()

glTranslatef(-0.25, -1.0, 0.0)
glColor3f(1, 0, 0)
drawTriangle()





Identity Transformation

glLoadIdentity()

An identity transformation does nothing - it transforms a point (x,y,z) back into itself.


glLoadIdentity() will clear the current transformation back to identity.


context.setTransform(1, 0, 0, 1, 0, 0) accomplishes the same thing in the 2D canvas.


Example: interactiveXform.py






Order

Transformations are not, in general, commutative.

This means that applying the same transformations in different orders can produce different results.

no transformation glTranslatef(0.5, 0, 0)
glRotatef(45, 0, 0, 1)
glRotatef(45, 0, 0, 1)
glTranslatef(0.5, 0, 0)





Order

Multiple transformations are effectively applied in reverse order.
i.e., the last transformation (the one immediately before the geometry function calls) is the first one applied to the raw vertex data.

glTranslatef(0.5, 0, 0)
glRotatef(45, 0, 0, 1)
drawTriangle()





Example

An object can be animated by adding transformations over time
i.e. making further calls to glTranslate / glRotate / glScale without doing glLoadIdentity between frames

This does not work well in general - only for a single object

Best to keep track of a position & orientation (& size) for each object, and apply transformations from scratch on each frame

Example: animXform.py






Homework #3

DUE: Wednesday, October 3

Write a program that animates simple, non-representational objects, mimicking the motion from some other source.

That is, find something that has several objects moving in some interesting or recognizable way; e.g. a video game, a group of animals, a Busby Berkeley dance sequence, weather, etc. Make your program draw some shapes, such as squares or triangles (preferably multiple colors), and move the shapes to imitate your source.

The program does not have to be interactive, merely animated. It can run continuously without an end, or for some finite amount of time. There should be at least 3 objects.



Creative Commons License
This document is by Dave Pape, and is released under a Creative Commons License.