CS 124, Fall 2009
Lab 4: Some Loops and Some Animation

The lab for today starts with two exercises on while loops and for loops. The third exercise returns to the topic of GUI programming, which was started in Lab 2, and extends the drawing to multiple "frames" to make an animation.

You will need a copy of FirstAnimation.java, which you will use in Exercise 3. You can copy it from the course folder, for example by giving the following command in your lab4 directory:

cp /classes/f09/cs124/FirstAnimation.java .

This lab is due next Thursday, at the start of next week's lab, as usual. The Math Quiz project from Lab 3 will be due next Friday, October 2.

More Fun with while

For the first exercise, you will write another program that uses a while loop to solve a problem. The problem is to simulate a race between two contestants. In each time interval, a contestant runs a random amount in the range 12 to 18 (that is, 12 + 6*Math.random()). The race ends when either contestant has run a distance of 100. At that time, the contestant who has run the farthest is the winner.

The program should output the distance traveled after each time interval. When the race ends, it should report the winner. For example, the output might look like this:

      And they're off...

            1. The runners are at 15.23 and 15.80
            2. The runners are at 27.46 and 31.41
            3. The runners are at 44.05 and 46.00
            4. The runners are at 57.20 and 58.20
            5. The runners are at 70.32 and 73.36
            6. The runners are at 83.26 and 86.47
            7. The runners are at 99.54 and 103.60

      Contestant B wins by 4.061840823257683

(You need a while loop to do this, since you can't be sure how many time steps there will be before the race ends.)

Getting Started with for

For the second exercise, write a program that simulates a baseball game in the following sense. In each inning, each team scores some random number of runs. Add the number of runs to the team's score. Report the score after each inning. Use a for loop to run the game for nine innings. At the end, say which team won. If the scores are the same at the end of nine innings, you can say that the game is a tie. (Of course, that's not the way baseball really works. If you like, you can discuss with me how you might make the simulation more realistic.) The output should look something like:

    Score after inning 1:
        Yankees 1
        Mets 2
    Score after inning 2:
        Yankees 5
        Mets 2
     Score after inning 9:
        Yankees 12
        Mets 7
     The Yankees win.

You should think about the best way to give a team a "random number of runs." Just picking a random number between, say, 0 and 5, is a possibility, but not very realistic. You might think about trying for something more realistic. (Extra credit might be given for nice approaches to increasing the realism of the simulation.)


For the third exercise, you will create an animation. A computer animation is simply a sequence of images that are displayed to the user one after the other. Each image is a "frame" in the animation. If there are only small changes from one frame to the next, and if the frames are played fairly quickly, the user will perceive continuous motion.

For an example, you should compile and run the FirstAnimation program. The animation in this example is abstract. The frames are drawn in the paintComponent() method. In Lab 2, you learned how to use drawing commands in paintComponent() to draw a single image. However, the FirstAnimation program is set up so that paintComponent() is called over and over, once every 50 milliseconds. Each time it is called, its job is to draw the next frame of the animation.

There is a globally defined variable named tickCount that can be used in the paintComponent() method. Each time the method is called, the value of tickCount will be increased by one. You can use the value of tickCount to compute some of the data that you use in your drawing; this is what will make one frame different from the next.

The sample animation repeats every 200 frames (about 10 seconds). It computes a variable named fractionDone which tells it how far along it is in the 200-frame animation. The value of fractionDone ranges from 0 at the start of the animation to 1 at the end. The basic technique used in the animation is called "tweening" or "morphing". Suppose that you have a quantity x. You know the value of x at the beginning of the animation, and the value at the end of the animation. Then the value in each frame is given by the formula:

x = startValue + (endValue - startValue)*fractionDone;

or, if x is an int,

x = (int)( startValue + (endValue - startValue)*fractionDone );

This basic technique is used to move a red rectangle across the bottom of the window by "morphing" the variable redSquareX. FirstAnimation.java also has some more advanced examples for you to consider.

One interesting effect is to do a color animation, in which the color of an object changes from frame to frame. In order to do this, you need to know something about specifying colors in Java. The command

g.setColor( new Color( r, g, b ) );

can be used to set a drawing color. The quantities r, g, and b must be integers in the range 0 through 255. These numbers represent the amount of red, green, and blue in the color. You can produce a color animation by morphing the values of r, g, and/or b. You can also make a translucent color by adding another parameter:

g.setColor( new Color( r, g, b, a ) );

When a is 0, the color is fully transparent (and therefor invisible). When a is 255, the color is fully opaque. FirstAnimation morphs the a component of a color to create a rectangle that becomes less and less transparent as the animation proceeds.

You should change the code in paintComponent() to draw an animation of your choice. Grading will be based partially on ambition. I prefer something that looks like a (simple) animation of real objects. For example, a house or snowman with a sky that fades from light blue to dark blue as the sun sets. Maybe some stars could come out, or clouds could move across the sky, or puffs of smoke could rise from a chimney, or a car could pass by, or a light can come on in the house when it gets dark, or grass can grow, or.... Use your imagination.

Note that this exercise is not about loops or control statements. It more about calculation. Of course, you can use control statements in your code if you want.