Win a copy of Kotlin in Action this week in the Kotlin forum!
    Bookmark Topic Watch Topic
  • Mark post as helpful
  • send pies
  • Report post to moderator

You must turn on Java for applets to work.

IMPORTANT: This is the second in a series of four applet examples for animation. After this, see HelloAnimThreadB, and HelloAnimThreadC. Make sure you understand this example and the fist one -- HelloAnimThreadFirst -- before moving on.

ALSO IMPORTANT: This is still not the ideal way to animate. It flickers and is not entirely smooth. In HelloAnimThreadB and C, you will see an improved technique which builds on the example below but adds a few new features.

Explanation of HelloAnimThreadA applet

Number of classes: 1 (HelloAnimThreadA.class)

What it does: Animates a small rectangle across the screen, bouncing when it hits the edges of the applet space.

How to do animation in Java:

You have two choices for animation:

1) Display a series of different images (as you often do with gif animations)


2) Display just a single image, but keep updating that image's location on the screen

Of course, you can combine the two methods, as we did with the moving cows in the Roundup game... there are four different "looks" (different .gif files) for each cow, but the cows also move across the screen.

In this animation series of applets, we draw a rectangle on the screen using a method of the Graphics class, rather than drawing a .gif image.

Animation Overview for this applet:

In a permanent loop, update / change the x and y coordinates of a rectangle and then repaint it in the new location. To the user, this will appear as a moving rectangle.


  • Define instance variables for the rectangles size and x,y screen coordinates (which represent the top left corner of the rectangle), and the right and bottom of the applet (max width and max height). Also define instance variables for the rectangles x and y velocity. This determines how many pixels (and in which direction) the rectangle will move with each loop.
  • Implement a run() method (did we mention that this applet implements the runnable interface? You'll see why in a minute...). This run method contains the infinite loop (while (true)) that drives the animation.
  • In the run method, update the x and y instance variables so the rectangle will be drawn at a new location The x and y will also be checked for the rectangle hitting the edges of the applet. If the rectangle hits an edge, the velocity will be reversed for that dimension (i.e. if the rectangle hits the top, then the y velocity will be reversed so the rectangle will start traveling down again -- y will be incremented positively instead of negatively)
  • At the end of the run method, call repaint() (a method the applet can respond to). Repaint will ultimately lead to the applet's paint() method being called. Don't call paint directly! In HelloThreadAnimB and C, you will be calling paint, but it can only be called under special circumstances you'll look at in those other examples.
  • Override the paint() method, and give it something to do: Draw the rectangle in a new position, using the instance variables for x, y and the size (height and width) of the rectangle.
  • Be sure to create and start a Thread object at the end of the init method.

      Bookmark Topic Watch Topic
    • New Topic
    Boost this thread!