Animation







Animation

Illusion of motion produced by rapidly displaying still frames that change

Animation frame rate can be independent of video display frequency

Traditional animation often works at 12 frames per second.
But faster rates will yield smoother motion.

Below ~ 10 fps, animation looks like a slide show, rather than motion



Double Buffering

Double-buffering hides the image being drawn until it is finished.

The previously completed image is displayed while the new one is drawn.

The frame buffer is split into two buffers - front buffer (displayed) and back buffer (drawn into).

Useful for smooth animation.



Double Buffering





Double Buffering

To use double-buffering:

Pass GLUT_DOUBLE flag to glutInitDisplayMode, instead of GLUT_SINGLE

Call glutSwapBuffers() at end of frame (replaces glFlush()) 

def draw():
    glClear(GL_COLOR_BUFFER_BIT)
    ...
    glutSwapBuffers()


glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB)




GLUT Timers

Animation in GLUT can be done using Timer & Redisplay events 

x = 0

def update(dummy):
    glutTimerFunc(33, update, 0)
    global x
    x = x + 1
    glutPostRedisplay()

...

glutTimerFunc(0, update, 0)




OpenGL State

GL rendering consists of geometry + state

Both are passed to graphics hardware via function calls

To draw something, the necessary state attributes (e.g. color) are set first
Then, the geometry (e.g. triangle data) is passed

State is retained until changed
State changes do not affect any geometry already drawn



OpenGL State

State includes: Example: 
glColor3f(1, 1, 0)      # Set current color
glBegin(GL_TRIANGLES)

glVertex2f(0.0, 0.0)    # This triangle is yellow
glVertex2f(0.4, 0.0)
glVertex2f(0.8, 0.8)

glColor3f(1, 0, 1)      # Change current color
glVertex2f(0.0, 0.0)    # This triangle is magenta
glVertex2f(-0.4, 0.0)
glVertex2f(-0.8, -0.8)

glEnd()




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 transformations:





Transformations

Translation Rotation
Scaling




Transformations in OpenGL

A transformation is considered part of OpenGL's state.



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


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





Rotation


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).





Rotation

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

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


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.





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.


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



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