Sams Teach Yourself Java 2 in 24 Hours

Sams Teach Yourself Java 2 in 24 Hours

By Rogers Cadenhead

Workshop: Follow the Bouncing Ball

This hour's workshop is an animation that definitely couldn't be replicated with an animated .GIF file or any other nonprogramming alternative. You'll write a program that bounces a tennis ball around the screen in lazy arcs, caroming off the sides of the panel that contains the animation. Though a few laws of physics will be broken along the way, you'll learn one way to move an image file around the screen.

Create a new file in your word processor called BouncePanel.java, and enter the text of Listing 24.3 into it. Save and compile the file when you're done.

Example 24.3. The Full Text of BouncePanel.java 

 1: import java.awt.*; 
 2: import javax.swing.*; 
 3: import java.util.*; 
 4: 
 5: public class BouncePanel extends JPanel implements Runnable { 
 6:     Image ball, court; 
 7:     float current = 0F; 
 8:     Thread runner; 
 9:     int xPosition = 10; 
10:     int xMove = 1; 
11:     int yPosition = -1; 
12:     int ballHeight = 185; 
13:     int ballWidth = 190; 
14:     int height; 
15: 
16:     public BouncePanel() {  
17:         super(); 
18:         Toolkit kit = Toolkit.getDefaultToolkit(); 
19:         ball = kit.getImage("tennis.gif"); 
20:         court = kit.getImage("court.jpg"); 
21:         runner = new Thread(this); 
22:         runner.start(); 
23:     } 
24: 
25:     public void paintComponent(Graphics comp) { 
26:         Graphics2D comp2D = (Graphics2D) comp; 
27:         height = getSize().height - ballHeight; 
28:         if (yPosition == -1) 
29:             yPosition = height - 20; 
30:         if ((court != null) && (ball != null)) { 
31:             comp2D.drawImage(court, 0, 0, this); 
32:             comp2D.drawImage(ball, 
33:                (int) xPosition, 
34:                (int) yPosition, 
35:                this); 
36:         } 
37:     } 
38: 
39:     public void run() { 
40:         Thread thisThread = Thread.currentThread(); 
41:         while (runner == thisThread) { 
42:             current += (float) 0.1; 
43:             if (current > 3) 
44:                 current = (float) 0; 
45:             xPosition += xMove; 
46:             if (xPosition > (getSize().width - ballWidth)) 
47:                 xMove *= -1; 
48:             if (xPosition < 1) 
49:                 xMove *= -1; 
50:             double bounce = Math.sin(current) * height; 
51:             yPosition = (int) (height - bounce); 
52:             repaint(); 
53:             try { 
54:                 Thread.sleep(100); 
55:             } catch (InterruptedException e) { } 
56:         } 
57:     } 
58: }

Before you dive into the discussion of what's taking place in this class, you should see what it does. You need to create a program and add the BouncePanel component to the program's graphical user interface.

Create a new file in your word processor called Bounce.java and enter Listing 24.4 into it.

Example 24.4. The Full Text of Bounce.java 

 1: import java.awt.*; 
 2: import javax.swing.*; 
 3: 
 4: public class Bounce extends JFrame { 
 5:     public Bounce() { 
 6:         super("Tennis"); 
 7:         setSize(550, 450); 
 8:         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
 9:         BouncePanel boing = new BouncePanel(); 
10:         Container pane = getContentPane(); 
11:         pane.add(boing); 
12:         setContentPane(pane); 
13:         setVisible(true); 
14:     } 
15: 
16:     public static void main(String[] arguments) { 
17:         Bounce frame = new Bounce(); 
18:     } 
19: }

After saving this file, you need to get a copy of the tennis.gif and court.gif files and put them in the same folder as Bounce.class and BouncePanel.class. This file is available from the same place as the lighthouse image files: the book's Web site at http://www.java24hours.com.

Once you have copied the graphics files into the right place, run the Bounce application by typing this command:

java Bounce

Figure 24.2 shows the application running after both graphics have fully loaded.

24fig02.gif

Figure 24.2 Moving graphics files in an animation.

This application displays the animation on the BouncePanel component: a .GIF file of a tennis ball bounces back and forth in front of a .GIF file depicting a net. When the ball hits a point at the bottom edge of the frame, it rebounds upward close to the top edge. When the ball hits the right or left edge, it bounces in the opposite direction.

The animated sequence in the BouncePanel class illustrates how to animate an image file using Java. It consists of the following steps:

  1. Draw the ball at its current location.
  2. Move the ball according to the rules that have been established for how the ball should move.
  3. Check whether the rules need to be changed based on the ball's new location.
  4. Repeat.

Drawing the Image

The BouncePanel class is threaded, so all its image-manipulation code is placed in a run() method that will be called when the thread is started.

The paintComponent() method is where the court is drawn, followed by the ball at its current location.

Note

If you display the tennis.gif file in a graphics viewer or editing program, you will see that it has a dark gray background around the ball. This background does not show up in the animated sequence because the tennis.gif file has been saved with that dark gray color designated as a transparent color. Java 2 supports transparency in graphics files, making it much easier to animate one image atop another.

The Image object called ball is loaded with the tennis.gif image in the init() method. Several variables are used in the class to keep track of the ball's location and its current rate of movement:

The movement rules that you establish for an animated program will vary depending on what you're trying to show. The Bounce application uses the Math.sin() method to create the slow arcs traveled by the ball.

Share ThisShare This

Informit Network