A first puppet

The idea of this homework is to animate a puppet, using the fact that the paint() method gets called to redraw a panel every time it is resized (and some other times, too, but they seem to be less consistent.)


Applets are little Java programs which can be included in web pages. The simplest possible Applet looks like this:
import java.applet.Applet; public class A extends Applet { }
The simplest web page which includes an applet would be an .html file including the following code.
<applet code="A.class" height="200" width = 200></applet>

If you run this applet, you'll see that it isn't very exciting. There are various ways to doll up applets, one of which is adding a paint() method.

The paint(Graphics g) method

When an Applet is drawn for the first time, or when it is resized, and sometimes when it is uncovered, its paint(java.awt.Graphics) method is called. The paint() method can use the various Graphics methods to draw pictures.

Here's an example of an Applet with a paint method:

import java.awt.Color; import java.awt.Graphics; import java.applet.Applet; public class B extends Applet { public void paint(Graphics g){ this.setBackground(Color.GREEN); int h = this.getHeight(); int w = this.getWidth(); g.setColor(Color.RED); g.fillOval(w/4, h/4, w/2, h/2); } }

The Graphics object

You should definitely look at the documentation for the Graphics class, for example at http://java.sun.com/j2se/1.5.0/docs/api/java/awt/Graphics.html.

Briefly, you can use the Graphics object to draw lines, ovals, rectangles, Polygons.


Animation is done by redrawing a slightly changed figure. In Java, one way to do this is to use an instance variable to keep track of which figure you want to draw. Here is an applet which draws a circle in a different place each time it is painted. It does this by incrementing a variable on each call to paint().
import java.awt.Graphics; import java.applet.Applet; public class C extends Applet { int h = 0; public void paint(Graphics g){ g.fillOval(50, h, 10, 10); h = (h+1)%this.getHeight(); } }
Notice how I use the getHeight() method here; although not relevant to the idea of animation, it gives an added smidgeon of control to the puppeteer.

Depending on your browser, you may need to modify your html file to pass the resize request on to Java. Here's how I did it for Firefox:

<applet code="C.class" height = "100%" width = "100%"></applet>
Here the "100%" means that the applet should occupy all of the browser's screen; therefore, every time the browser window is resized, the applet is also resized, and its paint() method is called.

A sample puppet

Both C.java and B.java can be manipulated as puppets by resizing their windows, but neither is very artistic. D.java is only minimally better. It is intended to be winking at you.
import java.awt.Color; import java.awt.Graphics; import java.applet.Applet; public class D extends Applet { int h = 0; public void paint(Graphics g){ g.setColor(Color.PINK); //new Color(255,128,128)); g.fillOval(100, 120, 76, 100); h = (h+1)%4; g.setColor(Color.BLUE); g.fillOval(126,160, 4,h+1); g.fillOval(146,160,4, 4); } }

What I expect you to do

I'd like you to draw a stickman who waves his hand from side-to-side. You may find that drawing the stickman on a piece of graph paper first, and figuring out the locations of his joints, makes writing the Java program much easier.

You will turn in:

  1. A development diary
  2. Copies of all the code you wrote, including both Java and HTML code. If you just used the HTML file generated by TextPad, print it out.
  3. Screen shots of your puppet.
  4. A note from someone who saw your puppet work. Your roommate, your mother ... It's not that I don't trust you, it's that anytime you do something this neat you should show it off.