Here's the example applet for this page:

Animation should always be done in a separate thread. There are two ways to make a new thread:

• Subclass (extend) the Thread class and override its public void run() method, or
• Implement the Runnable class and implement its public void run() method.

Either way, you have to write a public void run() method. This method is basically an infinite loop, and within the loop you should:

• [optional] Test whether the animation should be running, and if not, don't do anything;
• Make sure the "model" is updated; that is, make any necessary changes to the objects that are going to be displayed (their positions, orientations, colors, etc.);
• Call repaint() to make the changes appear on the screen; and
• "Sleep" for a while before doing the next update.

If you have created an object that extends Thread , you can start it running by calling its start() method, which it inherits from its superclass Thread.

If you have created an object that implements Runnable, you start it running by calling the constructor for Thread that takes your Runnable object as a parameter, then calling this new Thread's start() method, like this:

Thread newThread = new Thread(myRunnableObject);
newThread.start();

The following code is taken, with minor modifications, from Essential Java 2 Fast by John Cowell, pages 216-217.

// <applet code="Bounce.class" width="320" height="220"> </applet>

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

public class Bounce extends Applet implements Runnable {\
  double x, y, oldX, oldY;
  static double xLimit = 300;
  static double yLimit = 200;
  static Color backColor = Color.lightGray;
  boolean running = false;  // A flag to control the animation thread
  
  public void init() {
    setBackground(backColor);
    Thread runner = new Thread(this); // Create the animation thread
    runner.start();                   // Start the animation thread
  }
  
  // This method contains the infinite loop that does the animation
  public void run() {
    double xChange = Math.random();
    double yChange = Math.random();
    x = Math.random() * xLimit;
    y = Math.random() * yLimit;
    oldX = x;
    oldY = y;
    running = true;

    while (true) {
      // Update the model
      x += xChange;
      y += yChange;
      if ((x >= xLimit) || (x <= 0)) xChange = -xChange;
      if ((y >= yLimit) || (y <= 0)) yChange = -yChange;
      // Make changes appear on the screen
      repaint();
      // Sleep until it's time for the next update
      try { Thread.sleep(1); }
      catch (InterruptedException e) { System.exit(0); }
    }
  }
  
  // This is a trick to minimize flicker
  public void update(Graphics g) {
    paint(g);
  }
  
  public void paint(Graphics g) {
    // Test whether the animation should be running
    if (!running) return;
    //erase the old ball by overwriting it
    g.setColor(backColor);
    g.fillOval((int)oldX, (int)oldY, 20, 20);
    //draw the new ball
    g.setColor(Color.red);
    g.fillOval((int)x, (int)y, 20, 20);
    // save the current co-ordinates so we can overwrite
    // this ball next time
    oldX = x;
    oldY = y;
  }
}

See Cowell's book for a more complete explanation of this applet.

The main change I made was to add the runnable flag. This fixes a bug in the original program where you would get a ball drawn at (0, 0), the upper left corner, before its initial x and y values could be set by the run() method.

If your browser is running very slowly after looking at the above applet, that's because the applet doesn't clean up the extra thread when it finishes. Your browser should automatically kill this thread within a minute or so; if not, quit and restart your browser.

Cowell wrote the above applet to demonstrate simple use of threads, and it's a good example for that purpose. However, the Bounce applet is not a good starting point for doing your own animation. The reason is that the code to set up the applet, control the ball, and do the animation is all mixed in together. This is good enough for a small program, but a larger program really requires a better design, such as Model-View-Controller.

Reading Assignment: Using Objects for Animation, pages 47-49 Creating Our First Animation Applet, pages 49-55