JavaRanch Home    
 
This page:         last edited 09 October 2007         What's Changed?         Edit
PROTECTED

Code Barn Hello Anim Thread A   

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)

OR

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.

Step-by-Step:

  1. 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.
  2. 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.
  3. 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)
  4. 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.
  5. 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.
  6. Be sure to create and start a Thread object at the end of the init method.



Code


// Simple Animation -- second in a series of 4-- series continues through HelloAnimThreadC
// A rectangle bounces off the edges of the applet, forever. 
// Flickering will be completely fixed in the final HelloAnimThreadC

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

public class HelloAnimThreadA extends Applet implements Runnable 
{
    private int maxWidth , maxHeight ; // animation boundary
    private int currX , currY ; // left,top (x,y) of the animating rectangle
    private int currXVelocity , currYVelocity ; // pixels per move
    private int imageHeight , imageWidth ; // size of animating rectangle
    
    public void init() 
    {
        setBackground( Color.yellow );
        maxWidth = 200 ;
        maxHeight = 200 ;
        imageHeight = 25 ;
        imageWidth = 40 ;
        currXVelocity = 3 ;
        currYVelocity = 3 ;
        
        // set up random position for the rectangle
        currX = (int)( ( Math.random() * 80 ) + 1 );
        currY = (int)( ( Math.random() * 80 ) + 10 );
        
        // create and start the thread 
        Thread animator = new Threadthis );
        animator.start();
    } //close init
        
    public void paint( Graphics g ) 
    {
        g.drawRect( currX , currY , imageWidth , imageHeight );
    } // close paint
        
    public void run() 
    {
        // update location/velocity of the rectangle 
        //(also put the thread to sleep briefly)
        while ( true ) 
        {
            try 
            {
                Thread.sleep( 50 );
            } 
            catch ( InterruptedException e ) 
            {
            }
    
            currX = currX + currXVelocity ;
            currY = currY + currYVelocity ;
    
            // if the rectangle hits the sides or top and bottom,
            // reverse its velocity ( direction )
            if ( ( currX + imageWidth ) >= maxWidth ) 
            {
                currXVelocity = -3 ; 
            }
            else if ( currX <= 0 )
            {
                currXVelocity = 3 ;
            }
    
            if ( ( currY + imageHeight ) >= maxHeight ) 
            {
                currYVelocity = -3 ;
            }
            else if ( currY <= 0 ) 
            {
                currYVelocity = 3 ;
            }
    
            // now call repaint which will ultimately 
            //lead to paint being called
            repaint(); 
        } //close while loop 
    } //close run method
// close class 


CodeBarnApplets

JavaRanchContact us — Copyright © 1998-2014 Paul Wheaton