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)
There are three common types of "model" transformations:
Translation | Rotation | ||
---|---|---|---|
Scaling |
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.
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() |
|
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
Moves subsequent objects by (x, y) units.
Example: translate.html
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).
Rotates objects in the 2D plane by angle radians.
2D canvas rotations are left-handed - a positive angle rotates clockwise.
Example: rotate.html
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() |
|
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.
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
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() |
|
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() |
|
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
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) |
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() | |
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
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.