CS124, Fall 2001
Lab 5: Animation

For this lab, you will write a simple animated applet. Because of the test next Monday and the assignment due next Friday, there is no lab report due next week. You will turn in the exercise from this lab along with your work from Lab 6, on Friday, October 12.

The directory /home/cs124/lab5 contains the files that you need for this lab. Copy it into your home directory and use the cd command to switch to your lab5 directory.

Exercise: A Segmented Animation

A computer animation consists of a series of "frames" that are displayed one after the other. Each frame is a separate picture. There are slight changes from one frame to the next. When they are shown one after the other, the eye perceives continuous motion. You will write an animation by "extending" the existing class SimpleAnimationApplet. This class takes care of all the advanced aspects of running the animation. All you have to do is define a drawFrame() subroutine to say what should be done in order to draw one of the frames of the animation.

The sample program Anim1.java, which we looked at in class, defines an applet that shows a fairly simple animation loop. The loop has three "segments". In the first segment, a square shrinks down to a horizontal line. In the second, a horizontal line pivots about one of endpoints until it becomes vertical. In the third, a vertical line grows into a square. The three segments fit together nicely: the last frame of one segment is the same as the first frame of the next. Here's the applet:

For this lab, you should make your own segmented animation. You can do this by editing the file Anim1.java. You will probably want to change the number of frames in the animation by changing the 85 in the statement setFrameCount(85) to a different number. To define your animation, you will want to replace the body of the drawFrame() subroutine. In your version of this subroutine, you will still want to fill the entire frame with a background color before drawing anything else. You also might want to use the basic outline of my if statement, which does the job of breaking the animation into three segments. (You are not required to use three segments. Two is sufficient. You can use more than three if you like.)

We discussed animation in class, and the material is also covered in Section 3.7 of the text. Some of the graphics routines that you can use were introduced in Lab 4. To those, I should add the drawLine(x1,y1,x2,y2) routine, which draws a straight line segment from the point with coordinates (x1,y1) to the point with coordinates (x2,y2). It's possible that you might want to use a triangle or other polygon in your pictures. Here is a subroutine that will draw a triangle. You can copy it into your program if you need it.

   /**
    *  Draw a filled-in triangle with vertices at the points (x1,y1), 
    *  (x2,y2), and (x3,y3).  The polygon is drawn on the drawing 
    *  surface represented by g.
    */
   void fillTriangle(Graphics g, int x1, int y1, int x2, int y2, int x3, int y3) {
      Polygon poly;
      poly = new Polygon();
      poly.addPoint(x1,y1);
      poly.addPoint(x2,y2);
      poly.addPoint(x3,y3);
      g.fillPolygon(poly);
   }

Note that this subroutine would be called by saying something like fillTriangle(g,10,10,190,10,100,190) rather than g.fillTriangle(10,10,190,10,100,190), since it is a part of the class you are writing, not part of the Graphics object g.

As you work on your program, you can use the command appletviewer Anim1.html to run the applet. After you have finished, copy the Anim1.class and Anim1.html files into your www directory to make your applet available on the Web. (The applet also requires the file SimpleAnimationApplet.class. This should already be in your www directory from Lab 2. If not, you should also copy this file.)

Make a printout of your Anim1.java file using a2ps. Turn this in on October 12 along with your work from the next lab. Posting the applet on the Web is also a required part of the assignment.

---

David Eck (eck@hws.edu), 27 September 2001