Homework 5: A Moving Scene

Short Description:

Write a program that displays multiple animated wire mesh objects.

This assignment is worth 20 points.

Goals

When you finish this homework, you should

have created a SceneObject class that can be used to display multiple instances of ModelDisplay.
used transformation matrices to locate items in a static scene.
used transformation matrices to perform basic animation.

Formal Description

Part 1, SceneObject

In the last assignment you created a javascript class that holds a model with points and barycentric coordinates. You have been given a ModelDisplay class that can display one of these models. Your first task is to create a SceneObject class which can use these classes to display instances of a model at multiple locations.

The SceneObject class should support the following methods

A constructor which takes an instance of our canvas and a ModelDisplay object and constructs a SceneObject.
Display(): takes no constructors but displays the object in the proper location using the proper color.
Color(vec4 color): sets the edge color of the object.
Pop(): removes the top matrix from the matrix stack
Push(mat4 trans): adds the matrix trans to the top of the stack
Top(): returns the matrix at the top of the stack. This matrix is not removed from the stack.

We may add methods to this list in the future.

The SceneObject maintains a stack of transformation matrices. The matrix on the bottom of the stack is applied to the point, then the next matrix and so on. The result of

obj.Push(A);
obj.Push(B);
obj.Push(C);

would be the transformation matrix T = C×B×A.

Do not recalculate this matrix every time display is called. I had a member variable, transform, which contained the current composition of transformation matrices. When a matrix was pushed or popped, this local variable was recalculated.

Please name your implementation file sceneObject.js, your class SceneObject and make sure your function names are correct. I will test your class separately.

Your class may rely on the canvas holding two uniform locations

edgeColorPos is the location of a vec4 which will be used to draw the edge color
mat1Pos is the location of a mat4 which is the first transformation applied to the points of the model.

My code included something like:

     gl.uniform4fv(canvas.edgeColorPos, ...
     gl.uniformMatrix4fv(canvas.mat1Pos,  ...

Part 2, Make a scene

Using this newly created object, build a scene. This scene should consist of four parts

in the upper left hand corner of the screen should be an object that changes colors.
- When animated, cycles through the various hue values.
- Pressing "C" toggles continuous animation on/off
- Pressing "c" takes a single animation step.
In the upper right hand corner of the screen is an object that is following a path in this area of the screen.
- The path can be as simple as a circle, or preferably, a figure eight.
- If you wish, you may have several objects "racing" around this track.
- The "race" should occur in some plane other than the xy plane.
- Pressing "B" toggles continuous animation on/off.
- Pressing "b" takes a single animation step.
In the lower right corner should be a non-symmetric object that can be rotated.
- It should be centered in the quadrant.
- It should stay centered in the quadrant.
- Pressing "j" should rotate it in place by 5 degrees about the x it's axis.
- Pressing "k" should rotate it in place by 5 degrees about the y it's axis.
- Pressing "l" should rotate it in place by 5 degrees about the z it's axis.
The lower left corner is up to you. There should be at least one model present and it should have some form of animation. The animation must be documented on the web page.

Please do not disable the x-X, y-Y, z-Z rotations in the default file.

Documentation

Your interface should built in a html file. This file should contain documentation discussing the project, including information such as

Problems encountered
Interesting techniques employed
Sources of information
Collaborators
Notes on additions
Screen shots of interesting results.

Please use relative references to your code in the html file. This will allow me to extract the file in my local environment.

Discussion

You should rename your .js files to be .prog so that the tar file can be submitted trough the email.
Please include your own .js model files. Make sure that these are in t your directory.
- I have a set located here that you may use.
- You may also trade models among yourselves freely.
- If you wish to contribute any of your models to my set, please send email.
If you wish, you may start with these files.
Please include the common files from ../Common
You must use one model at least three different times.
You must use at least two different models.

Submission

When you have finished your assignment, please submit a tar file containing all files needed for this project. Please do not post your project on line until after grades have been assigned.