Java Project: Animate

due: Tuesday, February 10, 4pm

In this project, you will build a simple keyframe animation system by adding code to an existing application framework. The resulting application will be a Java 1.0 applet.

Keyframe Animation
In traditional keyframe animation, one animator draws the most important frames of an animation (the keyframes), and another artist fills in the rest of the frames (the in-betweens). In keyframe animation software systems, the in-betweens are generated automatically from the keyframes. The simplest way to generate an in-between is to linearly interpolate between the two surrounding keyframes.

As an example, let's animate a bouncing ball. Since we don't want to deal with deformation yet, make it a bouncing bowling ball. The animator has specified that at time t0=0, the ball is in the air at position p0 = (0, 10), and that one time step later, at time t1=1, the ball is on the ground at position p1 = (5, 0). We need to figure out where the ball is between times t0 and t1. Let's say that our time increment is 0.1; this means that we want to generate 10 frames for every time step. Intuitively, at time t=0.1, the ball is 1/10th of the way along a path from p0 to p1. Interpolation is the process of finding that position, and linear interpolation means that the path is a straight line. So, using linear interpolation, the position at time t=0.1 is p = (0.5, 9).

System Overview
Our keyframe animation system has two modes: draw mode and animate mode. In draw mode, the user interacts with a simple drawing program to create and edit shapes. By moving, resizing, and reshaping these simple shapes, the user can create snapshots of a picture changing over time. These snapshots are the keyframes of the animation. To set a keyframe from a particular set of shapes, the user simply sets the current time field to indicate when the animation should look exactly like that picture and hits the Set Keyframe button. The start time, end time, and time increment of the animation can be changed by editing the appropriate fields.

To play the animation, the user hits the Play Animation button, and the system switches into animate mode. The in-between frames are generated by linearly interpolating the positions and sizes of the shapes, and the animation is played. The animation loops until the user stops it by clicking in the window, hitting the Stop Animation button, or choosing a drawing tool. The user can edit the animation by setting new keyframes or editing existing keyframes. To go to a particular time in the animation, the user sets the current time field and hits the Edit Keyframe button.

System Design

key: key.gif
canvas
classes:
canvases.gif
draw classes: drawClasses.gif
keyframe
classes:
keyframeClasses1.gif
more keyframe
classes:
keyframeClasses2.gif

Requirements
Your job is to fill in some of the blanks in the implementation of the keyframe animation system. For full credit, you must do the following:

  1. implement drawing, translating and reshaping of polygons, polylines, and ellipses
hint: write InteractiveEllipse and InteractivePolyline classes, modeled after draw.InteractiveRect
2. allow user to change selected shape from filled to unfilled
3. make interpolation work
hint: write keyframe.LinearInterpolator::getValue, keyframe.InterpPolygon::shapeAtTime, and keyframe.InterpPolygon::setPoly
4. make the animation go
hint: write keyframe.AnimateCanvas::run

Extra Credit

This project has many possibilities for extra credit. Among these are the following:

  Drawing 1. allow user to change line width for unfilled shapes *
2. allow user to change background color *
3. allow user to delete shapes *
4. allow uniform scaling of drawn shapes **
5. allow multiple selection **
6. allow user to group and ungroup shapes **
7. allow user to change shape order **
Animating 1. allow user to delete a keyframe *
2. allow keyframing only for selected shapes **
3. implement pause and rewind *
4. implement a different kind of interpolation (i.e. not linear) *
5. implement color interpolation *
6. implement rotation interpolation ***
Other allow user to save and load animations ***
  * = not too hard
** = kind of hard
*** = hard

Demo Applet
A demo applet is online at http://www.cs.washington.edu/homes/jpower/java/keyframe.html.

Java Code
The code will be available on the NT boxes by the end of today. Watch your email.

Handin Instructions
Watch your email.