Using the Basic Animate Class

In this section I will show you how to create a very simple animation. We will create a ball that bounces around the screen. This application can be seen in Figure 3.3.

Figure 3.3: The bouncing ball

You can also see the applet running in Applet 3.1.

Applet 3.1: Bouncing ball

The source code used to produce this application is shown in Listing 3.4.

Listing 3.4: A bouncing ball example (BouncingBall.java)

import java.awt.*;
import java.applet.*;
import java.awt.event.*;

public class BouncingBall extends BasicAnimate
{
  /**
   * When this class is ran as an application, how wide should it be.
   */   
  public static final int IDEAL_WIDTH = 640;

  /**
   * When this class is ran as an application, how tall should it be.
   */   
  public static final int IDEAL_HEIGHT = 480;

  /**
   * What is the size of the bouncing ball.
   */   
  public final int SIZE = 32;

  /**
   * What is the current x-coordinate of the ball.
   */ 
  private int x = 0;

  /**
   * What is the current y coordinate of the ball. 
   */   
  private int y = 0;

  /**
   * What is the current x-direction of the ball, 1=right, -1=left
   */   
  private int dx = 1;

  /**
   * What is the current y-direction of the ball, 1=down, -1=Up
   */ 
  private int dy = 1;

  /**
   * What is the width of the page that we should check, takes into
   * account how wide the ball is.
   */   
  private int checkWidth;

  /**
   * What is the height of the page that we should check, takes into
   * account how tall the ball is.
   */   
  private int checkHeight;

  /**
   * This method sets up the bouncing ball example.
   *
   */  
  public void init()
  {
    super.init();
    checkWidth = getWidth() - SIZE;
    checkHeight = getHeight() - SIZE;
    setPulseLength(10);
  }

  /**
   * This method renders each frame of the bouncing ball.
   *
   * @param g The off-screen graphics object to paint to.
   */  
  public void paintOffscreen(Graphics g)
  {
    super.paintOffscreen(g);
    x += dx;
    y += dy;
    g.setColor(Color.WHITE);
    g.fillOval(x, y, SIZE, SIZE);

    // bounce if needed
    if ((x > checkWidth) || (x < 0))
      dx = -dx;
    if ((y > checkHeight) || (y < 0))
      dy = -dy;

  }

  /**
   * The main method is called when the class is to be ran
   * as a Java application. This method creates a frame and
   * attaches the applet to the frame. 
   *
   * @param args Not used.
   */  
  public static void main(String args[])
  {
    Applet applet = new BouncingBall();
    Frame frame = new Frame();
    frame.addWindowListener(new WindowAdapter()
    {
      public void windowClosing(WindowEvent e)
      {
        System.exit(0);
      }
    });

    frame.add(applet);
    frame.setSize(IDEAL_WIDTH, IDEAL_HEIGHT);
    frame.show();
    applet.init();
  }
}

As you can see the bouncing ball example implements its own "paintOffscreen" method. This method makes use of several variables. The "x" and "y" variables hold the location of the ball. The "dx" and "dy" variables hold the direction in "x" and "y" that the ball is heading. The "dx" and "dy" variables are both added to "x" and "y" each time. So if "dx" were -1 then x would be decreased each time. This would cause the ball to move to the left. Likewise, if "dx" were 1, then 1 would be added to "x" each time. This would cause the ball to move to the right.

Now lets examine the "paintOffscreen" method for the bouncing ball example. The method begins by calling the parent method, which paints a black background. If you want a different color, paint it yourself.

super.paintOffscreen(g);

Next the "x" and "y" are moved by the values in "dx" and "dy".

x += dx;
y += dy;

Next the ball is painted. The color is set to white, the constant SIZE defines how big the ball is. In this case it is 32.

g.setColor(Color.WHITE);
g.fillOval(x, y, SIZE, SIZE);

The ball may have reaced the edge of the screen. If it has, then the coordinate that went outside the screen will be reversed. For example, if "dx" were 1 and the ball had moved out of bounds to the right, then dx = -dx would result in a "dx" of -1.

// bounce if needed
if ((x > checkWidth) || (x < 0))
  dx = -dx;
if ((y > checkHeight) || (y < 0))
  dy = -dy;

This "paintOffscreen" method will result in a bouncing ball.