bouncing ball

                    BouncingBall.java

/*************************************************************************
 *  Compilation:  javac BouncingBall.java
 *  Execution:    java BouncingBall
 *  Dependencies: StdDraw.java
 *
 *  Implementation of a 2-d bouncing ball in the box from (-1, -1) to (1, 1).
 *
 *  % java BouncingBall
 *
 *************************************************************************/

public class BouncingBall { 
    public static void main(String[] args) {

        // set the scale of the coordinate system
        StdDraw.setXscale(-1.0, 1.0);
        StdDraw.setYscale(-1.0, 1.0);

        // initial values
        double rx = 0.480, ry = 0.860;     // position
        double vx = 0.015, vy = 0.023;     // velocity
        double radius = 0.05;              // radius

        // main animation loop
        while (true)  { 

            // bounce off wall according to law of elastic collision
            if (Math.abs(rx + vx) > 1.0 - radius) vx = -vx;
            if (Math.abs(ry + vy) > 1.0 - radius) vy = -vy;

            // update position
            rx = rx + vx; 
            ry = ry + vy; 

            // clear the background
            StdDraw.setPenColor(StdDraw.GRAY);
            StdDraw.filledSquare(0, 0, 1.0);

            // draw ball on the screen
            StdDraw.setPenColor(StdDraw.BLACK); 
            StdDraw.filledCircle(rx, ry, radius); 

            // display and pause for 20 ms
            StdDraw.show(20); 
        } 
    } 
} 

 

Bouncing Ball

Timing is everything

This script uses a the setTimeout() Method to perform a sequence of Image Swaps that create the animation.
The setTimeout() Method accepts two arguments, the name of a Function that you want to call and the number of milliseconds you want to wait before calling the Function. The name of the Function needs to be in "quotes", so it looks like this:

setTimeout("someFunction()", 100);

This example waits 100 milliseconds (one tenth of a second) and then calls "someFunction()".
So, this animation is composed of 5 different images of the ball dropping. Each image is about 300 pixels tall, which is the length that the ball drops. In other words, the image never changes position or size, the ball just changes location in each successive image.
As is the standard when doing an image swap, all five of the ball images are Pre-loaded into Image Objects. In this case, each of the image Objects is also loaded into an Array, which makes it easy to refer to them in the script. This process of Pre-loading the image works like this:

var imageArray = new Array();
imageArray[0] = new Image();
imageArray[0].src = "images/ball0.gif";
imageArray[1] = new Image();
imageArray[1].src = "images/ball1.gif";
etc.

To make the ball drop, there is a Function called bounce() which contains a series of setTimeout() Methods that call each of the five images as the ball drops and then calls each of the five images in reverse order as the ball bounces back up. The setTimeout() Methods have longer and longer time intervals specified. The whole series looks like this:

function bounce() {
     setTimeout("document.images['ball'].src = imageArray[0].src", 100);
     setTimeout("document.images['ball'].src = imageArray[1].src", 200);
     setTimeout("document.images['ball'].src = imageArray[2].src", 300);
     setTimeout("document.images['ball'].src = imageArray[3].src", 400);
     setTimeout("document.images['ball'].src = imageArray[4].src", 500);
     setTimeout("document.images['ball'].src = imageArray[5].src", 600);
     setTimeout("document.images['ball'].src = imageArray[4].src", 700);
     setTimeout("document.images['ball'].src = imageArray[3].src", 800);
     setTimeout("document.images['ball'].src = imageArray[2].src", 900);
     setTimeout("document.images['ball'].src = imageArray[1].src", 1000);
     setTimeout("document.images['ball'].src = imageArray[0].src", 1100);
}

This Function takes almost no time to finish, all of the setTimeout() Methods themselves are executed in less than 15 milliseconds. But the commands that they call, which are all image swaps, occur over a 1.1 second time interval because the setTimeout() Methods have specified it that way.
As we'll see in a later class, it's not good to call more than 20 setTimeout Methods at once. It swamps JavaScript and you'll get an error message.