INT32GP 2006: Lecture #01 Week #12

INT32GP Graphics Programming
Lecture: Tweening

Introduction
Interpolation Algorithm 2D
Managing Data
Interpolation Algorithm 3D
Example Programs
Reading from File in C

Introduction

We can create interesting animations by "tweening" one image into another.

simplest if two images are polylines (GL_LINE_LOOP, GL_LINE_STRIP)
start with shape of first image, end with shape of second image, in between a blend of the two
same number of vertices per image

Interpolation Algorithm 2D

array of vertices (x,y) representing first image
array of vertices (x,y) representing second image
Set up an array of in between images (array of arrays of vertices) representing the stages of from first image to second image.

t = 0.0
for(i = 0; i < NUM_STAGES; i++)
   for(j = 0; j < numVertices; j++){
      x1 = firstImage[j][x];
      x2 = secondImage[j][x];
      stage[i][j][x] = (1.0 - t)*x1 + t*x2;
      y1 = firstImage[j][y];
      y2 = secondImage[j][y];
      stage[i][j][y] = (1.0 - t)*y1 + t*y2;
   }
   t = t + INCREMENT;
   if(t >= 1.0) t=1.0;
}

For small values of t, the tween looks like the first image. As t gets larger it looks like a blend, and as t gets close to 1.0 it looks more like the second image.

Desktop Check

Finish the desktop check of the interpolation algorithm.

For an increment of 0.05, how many stages do we need to take t to 1.0?

For an increment of 0.1, how many stages do we need to take t to 1.0?

Example: Tweening Vertices

Walk through the interpolation and rendering code for a program to tween two vertices - both vertices start in the centre of the window and then tween to different positions.

We can animate the change from the first image to the second by displaying the stages in succession (use double buffering).
If we traverse the array of images from last to first, we animate back from the second image to the first.

Walk through the animation code - double buffering, controlling animation with the left mouse button, idling, inserting a delay.

Managing Data

To tween images, first we need data structures to hold the x and y values for each image.
We want another data structure to hold many images representing the tweens (stages of the change process). The alternative is to interpolate at each step and this slows down the display.
Since we are using arrays, not dynamic data structures, we specify a maximum size (maximum number of vertices).

Our code should ensure that no more than the maximum number of vertices are read into arrays.

We also need to keep track of how many vertices there actually are.
The size of the array of tween image is set by the number of tweening stages we specify.

/*
** manage tweening
*/
#define MAX_VERTICES 360
#define NUM_STAGES 21
#define INCREMENT 0.05;

vertex2d startTween[] = {
	{0.0, 0.0},
	{0.0, 0.0},
};

vertex2d endTween[] = {
	{ 1.5,  1.5},
	{-1.5,  1.5},
};

vertex2d stage[NUM_STAGES][MAX_VERTICES];

GLint numVertices = 2;
GLint stageNum    = 0;
GLboolean incrementing = GL_TRUE;

Interpolation Algorithm 3D

We can insert code to interpolate and tween 2d shapes into a 3d programs. However, the shapes will be in the one 2d plane (z = 0).

To interpolate and tween 3d shapes, we enhance the algorithm.

Use 3d data structures.

typedef GLdouble vertex3d[3];

vertex3d start3d[] = {
	{ -0.9, -0.9, -10.0 },
	{  0.9, -0.9,  -5.0 },
	{  0.9,  0.9,  -3.0 },
	{ -0.9,  0.9,  -2.0 }
};

vertex3d end3d[] ={
	{ -0.8, -0.8, 1.0 },
	{  0.8, -0.8, 2.0 },
	{  0.8,  0.8, 3.0 },
	{ -0.8,  0.8, 5.0 }
};

vertex3d stage3d[NUM_STAGES][MAX_VERTICES];

GLint num3dVertices = 4;

Set up the stages at the beginning of the program, interpolating 3 coordinates.

   t = 0.0;
   for(i = 0; i < NUM_STAGES; i++){
      for(j = 0; j < num3dVertices; j++){
         for(coordinate = x; coordinate <= z ; coordinate++){
            temp1 = start3d [j][coordinate];
            temp2 = end3d   [j][coordinate];
            stage3d[i][j][coordinate] = (1.0-t) * temp1 + t * temp2;
         }
      }
      t += INCREMENT;
      if( t > 1.0) t = 1.0;
   }
}

Render the 3d array.

void render3d(vertex3d * image, int numVertices, int primitive){
   int i;
   glBegin(primitive);
      for(i = 0; i < numVertices; i++)
         glVertex3dv(image[i]);
   glEnd();
}

   glColor3fv(colour[green]);
   render3d(stage3d[stageNum], num3dVertices, GL_POINTS);

Example Programs

In line_tween.c, two vertices are rendered as well as the line joining the two vertices. Only one of the vertices changes position. When animated, the line changes size.
In line_strip_tween.c, the ends of a line strip are tweened.
In fish_tween_01.c, two fish images are tweened. The arrays for the begin and end image could also be kept in a separate file eg. fishtweens.h.
- To animate the fish, we need to move it at the same time as tweening it. This is best done using a translation. The animation can be planned so that the fish appears to circle round from one side of the window to the other.
- How may the fish be filled in with colour?
Suggest other uses for tweening.

Reading from File in C

More general programs can be written so that images are read in from file.

For example, tween_01.c, expects the user to specify two files on the command line. By entering fish1.txt first and fish2.txt second, tweens are set up from the file. By entering rectangle.txt instead of one with the fish specification, tweening between a rectangle and fish is set up.

File (external) data structure - an integer value, representing the number of vertices in the file followed by floating point x and y coordinates - one per line.

Walk through the code.

If file names not entered as arguments on the command line, exit with an appropriate error message.
If can't open either file exit with appropriate message.
If error when closing either file, exit without processing.
If error reading an integer, exit without processing.

Design two files - house.txt and t.txt that will result in the example house to T tween. Design the vertices so that they fit within the world coordinate system as specified below.

   glMatrixMode(GL_PROJECTION);
   glLoadIdentity();
   gluOrtho2D(0.0, 1.0, 0.0, 1.0);

INT32GP Graphics Programming Lecture: Tweening