Chapter 20 - Graphics

Fig. 20.9
Java allows you to draw polygons of almost any shape you can imagine.

Notice that in this example, the polygon is not "closed off." In other words, there is no line between the last point in the polygon and the first one. If you want the polygon to be closed, you must repeat the first point at the end of the array.

The Polygon class provides a more flexible way to define polygons. You can create a Polygon by either passing it an array of x points and an array of y points, or you can add points to it one at a time. Once you have created an instance of a Polygon class, you can use the getBoundingBox method to determine the area taken up by this polygon (the minimum and maximum x and y coordinates):

Rectangle boundingBox = myPolygon.getBoundingBox();

The Rectangle class returned by getBoundingBox contains variables indicating the x and y coordinates of the rectangle and its width and height. You can also determine whether or not a point is contained within the polygon or is outside it by calling inside with the x and y coordinates of the point:

   if (myPolygon.inside(5, 10))
   {
     // the point (5, 10) is inside this polygon
   }

You can use this Polygon class in place of the array of points for either the drawPolygon or fillPolygon methods. The applet in listing 20.6 creates an instance of a polygon and draws a filled polygon. Figure 20.10 shows the output from this applet.

Listing 20.6 Source Code for Polygons.java
import java.applet.*;
import java.awt.*;

//
// This applet creates an instance of a Polygon class and then
// uses fillPoly to draw the Polygon as a filled polygon.

public class Polygons extends Applet
{
// Define an array of X coordinates for the polygon
int xCoords[] = { 10, 40, 60, 30, 10 };

// Define an array of Y coordinates for the polygon
int yCoords[] = { 20, 0, 10, 60, 40 };

public void paint(Graphics g)
{
// Create a new instance of a polygon with 5 points
Polygon drawingPoly = new Polygon(xCoords, yCoords, 5);

// Draw a filled polygon
g.fillPolygon(drawingPoly);
}
}

Fig. 20.10
Polygons created with the Polygon class look just like those created from an array of points.

Color

You may recall learning about the primary colors when you were younger. There are actually two kinds of primary colors. When you are drawing with a crayon, you are actually dealing with pigments. The primary pigments are red, yellow, and blue. You probably know some of the typical mixtures, such as red + yellow = orange, yellow + blue = green, and blue + red = purple. Black is formed from mixing all the pigments together, while white indicates the absence of pigment.

Dealing with the primary colors of light is slightly different. The primary colors of light are red, green, and blue. Some common combinations are red + green = brown (or yellow, depending on how bright it is), green + blue = cyan (light blue), and red + blue = magenta (purple). For colors of light, the concept of black and white are the reverse of the pigments. Black is formed by the absence of all light, while white is formed by the combination of all the primary colors. In other words, red + blue + green (in equal amounts) = white. Java uses a color model called the RGB color model. This means that colors are described by giving the amount of Red, Green, and Blue light in the color.

You define a color in the RGB color model by indicating how much red light, green light, and blue light is in the color. You can do this either by using numbers between zero and 255 or by using floating point numbers between 0.0 and 1.0. Table 20.1 indicates the red, green, and blue amounts for some common colors:Table 20.1 Common Colors and their RGB Values

Color Name      Red Value       Green Value     Blue Value
White   255     255     255
Light Gray      192     192     192
Gray    128     128     128
Dark Gray       64      64      64
Black   0       0       0
Red     255     0       0
Pink    255     175     175
Orange  255     200     0
Yellow  255     255     0
Green   0       255     0
Magenta 255     0       255
Cyan    0       255     255
Blue    0       0       255

You can create a custom color three ways:

Color(int red, int green, int blue)

This creates a color using red, green, and blue values between zero and 255.

Color(int rgb)

This creates a color using red, green, and blue values between 0 and 255, but all combined into a single integer. Bits 16-23 hold the red value, 8-15 hold the green value, and 0-7 hold the blue value. These values are usually written in hexadecimal notation, so you can easily see the color values. For instance, 0x123456 would give a red value of 0x12 (18 decimal), a green value of 34 (52 decimal), and a blue value of 56 (96 decimal). Notice how each color takes exactly 2 digits in hexadecimal.

Color(float red, float green, float blue)

This creates a color using red, green, and blue values between 0.0 and 1.0.

Once you have created a color, you can change the drawing color using the setColor method. For instance, suppose you wanted to draw in pink. A nice value for pink is 255 red, 192 green, and 192 blue. The following paint method sets the color to pink and draws a circle:

public void paint(Graphics g)
{
   Color pinkColor = new Color(255, 192, 192);
   g.setColor(pinkColor);
   g.drawOval(5, 5, 50, 50);
}

You don't always have to create colors manually. The Color class provides a number of pre-defined colors:

Color.white, Color.lightGray, Color.gray, Color.darkGray, Color.black, Color.red, Color.pink, Color.orange, Color.yellow, Color.green, Color.magenta, Color.cyan, Color.blue.

Given a color, you can find out its red, green, and blue values by using the getRed, getGreen, and getBlue methods:

int redAmount, greenAmount, blueAmount;
Color someColor = new Color(0x345678);   // red=0x34, green = 0x56, blue = 0x78

redAmount = someColor.getRed();   // redAmount now equals 0x34
greenAmount = someColor.getGreen();   // greenAmount now equals 0x56
blueAmount = someColor.getBlue();   // blueAmount now equals 0x78

Drawing Modes

The Graphics class has two different modes for drawing figures: paint mode and XOR mode. Paint mode means that when a figure is drawn, all the points in that figure overwrite the points that were underneath it. In other words, if you draw a straight line in blue, every point along that line will be blue. You probably just assumed that would happen anyway, but it doesn't have to. There is another drawing mode called XOR mode, short for eXclusive-OR.

The XOR drawing mode dates back several decades. You can visualize how the XOR mode works by forgetting for a moment that you are dealing with colors and imagining that you are drawing in white on a black background. Drawing in XOR involves the combination of the pixel you are trying to draw and the pixel that is on the screen where you want to draw. If you try to draw a white pixel where there is currently a black pixel, you will draw a white pixel. If you try to draw a white pixel where there is already a white pixel, you will instead draw a black pixel.

This may sound strange, but it was once very common to do animation using XOR. To understand why, you should first realize that if you draw a shape in XOR mode and then draw the shape again in XOR mode, you erase whatever you did in the first draw. If you were moving a figure in XOR mode, you would draw it once; then to move it, you'd draw it again in its old position, erasing it, then XOR draw it in its new position. Whenever two objects overlapped, the overlapping areas looked like a negative: black was white and white was black. You probably won't have to use this technique for animation, but at least you have some idea where it came from.

When using XOR on a color system, you think of the current drawing color as the white from the above example and identify another color as the XOR color-or the black. Because there are more than two colors, the XOR mode makes interesting combinations with other colors, but you can still erase any shape by drawing it again.

To change the drawing mode to XOR mode, just call the setXORMode and pass it the color you want to use as the XOR color. The applet in listing 20.7 shows a simple animation that uses XOR mode to move a ball past a square.

Listing 20.7 Source Code for BallAnim.java
import java.awt.*;
import java.applet.*;
import java.lang.*;

//
// The BallAnim applet uses XOR mode to draw a rectangle
// and a moving ball. It implements the Runnable interface
// because it is performing animation.

public class BallAnim extends Applet implements Runnable
{
   Thread animThread;

   int ballX = 0;     // X coordinate of ball
   int ballDirection = 0;   // 0 if going left-to-right, 1 otherwise

// Start is called when the applet first cranks up. It creates a thread for
// doing animation and starts up the thread.

   public void start()
   {
     if (animThread == null)
     {
        animThread = new Thread(this);
        animThread.start();
     }
   }

// Stop is called when the applet is terminated. It halts the animation
// thread and gets rid of it.

   public void stop()
   {
     animThread.stop();
     animThread = null;
   }

// The run method is the main loop of the applet. It moves the ball, then
// sleeps for 1/10th of a second and then moves the ball again.

   public void run()
   {
     Thread.currentThread().setPriority(Thread.NORM_PRIORITY);

     while (true)
     {
        moveBall();
        try {
          Thread.sleep(100);   // sleep 0.1 seconds
        } catch (Exception sleepProblem) {
// This applet ignores any exceptions if it has a problem sleeping.
// Maybe it should take Sominex
        }
     }
   }

   private void moveBall()
   {
// If moving the ball left-to-right, add 1 to the x coord
     if (ballDirection == 0)
     {
        ballX++;

// Make the ball head back the other way once the x coord hits 100

        if (ballX > 100)
        {
          ballDirection = 1;
          ballX = 100;
        }
     }
     else
     {

// If moving the ball right-to-left, subtract 1 from the x coord
        ballX--;

// Make the ball head back the other way once the x coord hits 0
        if (ballX <= 0)
        {
          ballDirection = 0;
          ballX = 0;
        }
     }

     repaint();
   }

   public void paint(Graphics g)
   {
     g.setXORMode(getBackground());
     g.fillRect(40, 10, 40, 40);
     g.fillOval(ballX, 0, 30, 30);
   }
}

Figure 20.11 is a snapshot of the BallAnim applet in action. Notice that the ball changes color as it passes over the square. This is due to the way the XOR mode works.

Fig. 20.11
XOR drawing produces an inverse effect when objects collide.

Drawing Text

The Graphics class also contains methods to draw text characters and strings. As you have seen in the "Hello World" applet, you can use the drawString method to draw a text string on the screen. Before plunging into the various aspects of drawing text, you should be familiar with some common terms for fonts and text, as follows:

• Baseline-This refers to the imaginary line the text is resting on.
• Descent-This is how far below the baseline a particular character extends. Some characters, such as g and j, extend below the baseline.
• Ascent- This is how far above the baseline a particular character extends. The letter d would have a higher ascent than the letter x.
• Leading-This is the amount of space between the descent of one line and the ascent of the next line. If there was no leading, such letters as g and j would almost touch such letters as M and H on the next line.

The term "ascent" in Java is slightly different from the same term in the publishing world. The publishing term "ascent" refers to the distance from the top of the letter x to the top of a character, where the Java term "ascent" refers to the distance from the baseline to the top of a character.

Figure 20.12 illustrates the relationship between the descent, ascent, baseline, and leading.

Fig. 20.12
Java's font terminology originated in the publishing field, but some of the meanings have been changed.

You may also hear the terms proportional and fixed associated with fonts. In a fixed font, every character takes up the same amount of space. Typewriters (if you actually remember those) wrote in a fixed font. Characters in a proportional font only take up as much space as they need. You can use this book as an example.

The text of the book is in a proportional font, which is much easier on the eyes. Look at some of the words and notice how the letters only take up as much space as necessary. (Compare the letters i and m, for example.) The code examples in this book, however, are written in a fixed font (this preserves the original spacing). Notice how each letter takes up exactly the same amount of space.

Now, to draw a string using the Graphics class, you simply call drawString and give it the string you want to draw and the x and y coordinates for the beginning of the baseline (that's why you needed the terminology briefing). You may recall the "Hello World" applet used this same method to draw its famous message:

public void paint(Graphics g)
{
   g.drawString("Hello World", 10, 30);
}

You can also draw characters from an array of characters or an array of bytes. The format for drawChars and drawBytes is:

   void drawChars(char charArray[], int offset, int numChars, int x, int y)
   void drawBytes(byte byteArray[], int offset, int numChars, int x, int y)

The offset parameter refers to the position of the first character or byte in the array to draw. This will most often be zero because you will usually want to draw from the beginning of the array. The applet in listing 20.8 draws some characters from a character array and from a byte array.

Listing 20.8 Source Code for DrawChars.java
import java.awt.*;
import java.applet.*;

//
// This applet draws a character array and a byte array

public class DrawChars extends Applet
{
char[] charsToDraw = { 'H', 'i', ' ', 'T', 'h', 'e', 'r', 'e', '!' };

byte[] bytesToDraw = { 65, 66, 67, 68, 69, 70, 71 }; // "ABCDEFG"

public void paint(Graphics g)
{
g.drawChars(charsToDraw, 0, charsToDraw.length, 10, 20);

g.drawBytes(bytesToDraw, 0, bytesToDraw.length, 10, 50);
}
}

You may find that the default font for your applet is not very interesting. Fortunately, you can select from a number of different fonts. These fonts have the potential to vary from system to system, which may lead to portability issues in the future; but for the moment, HotJava and Netscape support the same set of fonts.

In addition to selecting between multiple fonts, you may also select a number of font styles: Font.PLAIN, Font.BOLD, and Font.ITALIC. These styles can be added together, so you can use a bold italic font with Font.BOLD + Font.ITALIC.

When choosing a font, you must also give the point size of the font. The point size is a printing term that relates to the size of the font. There are 100 points to an inch when printing on a printer, but this does not necessarily apply to screen fonts. A typical point size value for printed text is either 12 or 14. The point size does not indicate the number of pixels high or wide; it is simply a relative term. A point size of 24 is twice as big as a point size of 12.

You create an instance of a font by using the font name, the font style, and the point size. The following declaration creates the Times Roman font that is both bold and italic and has a point size of 12:

   Font myFont = new Font("TimesRoman", Font.BOLD + Font.ITALIC, 12);

The getFontList method in the Toolkit class returns an array containing the names of the available fonts. The applet in listing 20.9 uses getFontList to display the available fonts in a variety of styles.

Listing 20.9 Source Code for ShowFonts.java
import java.awt.*;
import java.applet.*;

//
// This applet uses the Toolkit class to get a list
// of available fonts, then displays each font in
// PLAIN, BOLD, and ITALIC style.

public class ShowFonts extends Applet
{
   public void paint(Graphics g)
   {
     String fontList[];
     int i;
     int startY;

// Get a list of all available fonts
     fontList = getToolkit().getFontList();

     startY = 15;

     for (i=0; i < fontList.length; i++)
     {
// Set the font to the PLAIN version
        g.setFont(new Font(fontList[i], Font.PLAIN, 12));
// Draw an example
        g.drawString("This is the "+
          fontList[i]+" font.", 5, startY);
// Move down a little on the screen
        startY += 15;

// Set the font to the BOLD version
        g.setFont(new Font(fontList[i], Font.BOLD, 12));
// Draw an example
        g.drawString("This is the bold "+
          fontList[i]+" font.", 5, startY);
// Move down a little on the screen
        startY += 15;

// Set the font to the ITALIC version
        g.setFont(new Font(fontList[i], Font.ITALIC, 12));
// Draw an example
        g.drawString("This is the italic "+
          fontList[i]+" font.", 5, startY);

// Move down a little on the screen with some extra spacing
        startY += 20;
     }
   }
}

Fig. 20.13
Java provides a number of different fonts and font styles.

Drawing Images

The Graphics class provides a way to draw images with the drawImage method:

   boolean drawImage(Image img, int x, int y, ImageObserver observer)

   boolean drawImage(Image img, int x, int y, int width, int height,
     ImageObserver observer)

The observer parameter in the drawImage method is an object that is in charge of watching to see when the image is actually ready to draw. If you are calling drawImage from within your applet, you can pass this as the observer because the Applet class implements the ImageObserver interface.

To draw an image, however, you need to get the image first. That is not provided by the Graphics class. Fortunately, the Applet class provides a getImage method that you can use to retrieve images. The applet in listing 20.10 retrieves an image and draws it. Figure 20.14 shows the output from this applet.

Listing 20.10 Source Code for DrawImage.java
import java.awt.*;
import java.applet.*;

//
// This applet uses getImage to retrieve an image

// and then draws it using drawImage

public class DrawImage extends Applet
{
   private Image samImage;

   public void init()
   {
     samImage = getImage(getDocumentBase(), "samantha.gif");
   }

   public void paint(Graphics g)
   {
     g.drawImage(samImage, 0, 0, this);
   }
}

Fig. 20.14
You can draw any .GIF in a Java applet with the drawImage method.

One problem you may face in trying to display images is that the images may be coming over a slow network link (for instance, a 14.4K modem). When you begin to draw the image, it may not have arrived completely. You can use a helper class called the MediaTracker to determine whether an image is ready for display.

To use the MediaTracker, you must first create one for your applet:

MediaTracker myTracker = new MediaTracker(this);   // "this" refers to the applet

Next, try to retrieve the image you want to display:

Image myImage = getImage("samantha.gif");

Now you tell the MediaTracker to keep an eye on the image. When you add an image to the MediaTracker, you also give it a numeric id. This id can be used for multiple images so that when you want to see if an entire group of images is ready for display, you can check it with a single id. As a simple case, you can just give an image an id of zero:

myTracker.addImage(myImage, 0);   // Track the image, give an id of 0

Once you have started tracking an image, you can load it and wait for it to be ready by using the waitForID method:

myTracker.waitForID(0);   // Wait for all images with id of 0 to be ready

You can also wait for all images using the waitForAll method:

myTracker.waitForAll();

You may not want to take the time to load an image before starting your applet. You can use the statusID method to initiate a load, but not wait for it. When you call statusID, you pass the id you want to status and a boolean flag to indicate whether it should start loading the image. If you pass it true, it will start loading the image:

myTracker.statusID(0, true);   // Start loading the image

A companion to statusID is statusAll, which checks the status of all images in the MediaTracker:

myTracker.statusAll(true);   // start loading all the images

The statusID and statusAll methods return an integer that is made up of the following flags:

• MediaTracker.ABORTED if any of the images have aborted loading
• MediaTracker.COMPLETE if any of the images have finished loading
• MediaTracker.LOADING if any images are still in the process of loading
• MediaTracker.ERRORED if any images encountered an error during loading

You can also use checkID and checkAll to see if an image has been successfully loaded. All the variations of checkAll and checkID return a boolean value that is true if all the images checked have been loaded.

boolean checkID(int id);

This returns true if all images with a specific id have been loaded. It does not start loading the images if they are not loading already.

boolean checkID(int id, boolean startLoading);

This returns true if all images with a specific id have been loaded. If startLoading is true, it will initiate the loading of any images that are not already being loaded.

boolean checkAll();

This returns true if all images being tracked by this MediaTracker have been loaded, but does not initiate loading if an image is not being loaded.

boolean checkAll(boolean startLoading);

This returns true if all images being tracked by this MediaTracker have been loaded. If startLoading is true, it will initiate the loading of any images that have not started loading yet.

The applet in listing 20.11 uses the MediaTracker to watch for an image to complete loading. It will draw text in place of the image until the image is complete; then it will draw the image.

Listing 20.11 Source Code for ImageTracker.java
import java.awt.*;
import java.applet.*;
import java.lang.*;
//
// The ImageTracker applet uses the media tracker to see if an
// image is ready to be displayed. In order to simulate a
// situation where the image takes a long time to display, this
// applet waits 10 seconds before starting to load the image.
// While the image is not ready, it displays the message:
// "Image goes here" where the image will be displayed.

public class ImageTracker extends Applet implements Runnable
{
   Thread animThread;   // Thread for doing animation
   int waitCount;     // Count number of seconds we have waited
   MediaTracker myTracker;   // Tracks the loading of an image
   Image myImage;     // The image we are loading

   public void init()
   {
// Get the image we want to show
     myImage = getImage(getDocumentBase(), "samantha.gif");

// Create a media tracker to track the image
     myTracker = new MediaTracker(this);

// Tell the media tracker to track this image
     myTracker.addImage(myImage, 0);
   }
     
   public void run()
   {
     Thread.currentThread().setPriority(Thread.NORM_PRIORITY);

     while (true)
     {
// Count how many times we've been through this loop
        waitCount++;

// If we've been through 10 times, call checkID and tell it to start
// loading the image
        if (waitCount == 10)
        {
          myTracker.checkID(0, true);
        }
          
        repaint();
        try {
// Sleep 1 second (1000 milliseconds)
          Thread.sleep(1000);   // sleep 1 second
        } catch (Exception sleepProblem) {
        }
     }
   }

   public void paint(Graphics g)
   {
     if (myTracker.checkID(0))
     {
// If the image is ready to display, display it
        g.drawImage(myImage, 0, 0, this);
     }
     else
     {
// Otherwise, draw a message where we will put the image
        g.drawString("Image goes here", 0, 30);
     }
   }

   public void start()
   {
     animThread = new Thread(this);
     animThread.start();
   }

   public void stop()
   {
     animThread.stop();
     animThread = null;
   }

}

Keyboard and Mouse Events

Your applet can receive information about the keyboard and mouse. You can be notified when a key is pressed and when it is released; when the mouse enters the applet window and when it leaves the applet window; when the mouse button is pressed and when it is released; and when the mouse moves and when the mouse is dragged (moved with the button held down).

Keyboard Events

The keyDown method is called whenever a key is pressed. Its companion method, keyUp, is called whenever a key is released. You will normally just be concerned with a key being pressed, so you can usually ignore the keyUp method. The format for keyDown and keyUp is the following:

public boolean keyDown(Event event, int keyCode)
public boolean keyUp(Event event, int keyCode)

Where:

• event is an Event class that contains specific information about the keyboard event (the key press or the key release).
• keyCode is the key that was pressed.

All of your event handling methods, such as keyDown and keyUp, should return a value of true.

For regular ASCII characters, the keyCode is the ASCII value of the character pressed. For instance, if you press the g key, the keyCode would be 107. You could also cast the keyCode to a character value, in which case it would be the character g. If you were to hold down shift and press g, the keyCode would be 71, representing the character value G. If you hold down control and press g, the keyCode would be 7.

You can also determine if the shift, control, or alt (sometimes called meta) keys have been pressed by checking the shiftDown, controlDown, and metaDown methods in the event class. For example:

public boolean keyDown(Event event, int keyCode)
{
   if (event.shiftDown())
   {
     // someone pressed shift
   }

   if (event.controlDown())
   {
     // someone pressed control
   }

   if (event.metaDown())
   {
     // someone pressed meta (or alt)
   }
   return true;
}

Because the codes for certain keys vary from system to system, Java defines a number of key codes that can be used on all systems. These key codes are as follows:

• Event.F1-Event.F12 function keys F1 through F12
• Event.LEFT left arrow key
• Event.RIGHT right arrow key
• Event.UP up arrow key
• Event.DOWN down arrow key
• Event.END end key
• Event.HOME home key
• Event.PGDN page down key
• Event.PGUP page up key

Mouse Events

You can receive information about the mouse through a number of different methods. The mouseDown event is called whenever the mouse button is pressed:

public boolean mouseDown(Event event, int x, int y)

Where:

• event is the Event class containing information about the event.
• x and y are the coordinates where the mouse button was pressed.

You may also want to know when the mouse button is released. You can use the mouseUp method, which takes the same arguments as mouseDown:

public boolean mouseUp(Event event, int x, int y)

The mouseEnter and mouseExit methods are called whenever the mouse enters the applet area or leaves it. These methods also take the same arguments as mouseDown:

public boolean mouseEnter(Event event, int x, int y)
public boolean mouseExit(Event event, int x, int y)

You can also track the movement of the mouse with mouseMove and mouseDrag. mouseMove is called whenever the mouse is moved while the button is up; mouseDrag is called when the mouse is moved while the button is down. These methods also take the same arguments as mouseDown:

public boolean mouseMove(Event event, int x, int y)
public boolean mouseDrag(Event event, int x, int y)

The applet in listing 20.12 uses keyboard events and mouse events to manipulate shapes. The applet in listing 20.13 makes use of a utility class called Shape, which extends the Polygon class to enable a polygon to be moved around the screen easily.

Listing 20.12 Source Code for Shape.java
import java.awt.*;
//
// The Shape class is an extension of the Polygon class that adds
// a method for moving the Polygon to a different location. It makes
// a copy of the original coordinates, then when you move it to a new
// location, it just adds the new position to each coordinate. In other words,
// if you moved the shape to (100,100), moveShape would add 100 to each x
// coordinate and each y coordinate. You should give the coordinates relative
// to 0, 0.

public class Shape extends Polygon
{
   private int[] originalXpoints;
   private int[] originalYpoints;

   public int x;
   public int y;

   public Shape(int x[], int y[], int n)
   {
     super(x, y, n);

// Make a copy of the x coordinates
     originalXpoints = new int[n];
     System.arraycopy(x, 0, originalXpoints, 0, n);

// Make a copy of the x coordinates
     originalYpoints = new int[n];
     System.arraycopy(y, 0, originalYpoints, 0, n);

   }

   public void moveShape(int newX, int newY)
   {
     int i;

// Add the new X and new Y values to the original coordinates, and make that
// the new position of this shape.

     for (i=0; i < npoints; i++)
     {
        xpoints[i] = originalXpoints[i] + newX;
        ypoints[i] = originalYpoints[i] + newY;
     }
   }
}
Listing 20.13 Source Code for ShapeManipulator.java
import java.awt.*;
import java.applet.*;

//
// The ShapeManipulator applet lets you drag a shape
// around the screen by holding down the left mouse
// button. It uses three different shapes: a triangle,
// a square, and a pentagon. You can switch between these
// by hitting 't', 's', and 'p' respectively.
//
// This applet makes use of the Shape class, which extends
// the functionality of Polygon to enable the polygon to be
// moved to a new location with a single method call.

public class ShapeManipulator extends Applet
{

    private int squareXCoords[] = { 0, 40, 40, 0 };
    private int squareYCoords[] = { 0, 0, 40, 40 };

    private int triangleXCoords[] = { 0, 20, 40 };
    private int triangleYCoords[] = { 40, 0, 40 };

    private int pentXCoords[] = { 0, 20, 40, 30, 10 };
    private int pentYCoords[] = { 15, 0, 15, 40, 40 };

    private int shapeX;   // the X and Y of the current shape
    private int shapeY;

    private Shape currentShape;   // What shape we are dragging

    private Shape triangle;
    private Shape square;
    private Shape pentagon;

    public void init()
    {
        shapeX = 0;
        shapeY = 0;

        triangle = new Shape(triangleXCoords, triangleYCoords, 3);
        square = new Shape(squareXCoords, squareYCoords, 4);
        pentagon = new Shape(pentXCoords, pentYCoords, 5);

        currentShape = triangle;   // Start with a triangle
    }

    public void paint(Graphics g)
    {
        g.fillPolygon(currentShape);   // Draw the current shape
    }

    public boolean mouseDrag(Event event, int mouseX, int mouseY)
    {
        shapeX = mouseX; // make shape coordinates = mouse coordinates
        shapeY = mouseY;

// Now move the shape to its new coordinates
        currentShape.moveShape(shapeX, shapeY);

// Even though the shape is moved, we still need to call repaint to update
// the display.
        repaint();

        return true;   // always do this in event handlers
    }

    public boolean keyDown(Event event, int keyCode)
   {

// Check the keyCode to see if it is a t, an s, or a p

     if ((char)keyCode == 't')
     {
        currentShape = triangle;
     }
     else if ((char)keyCode == 's')
     {
        currentShape = square;
     }
     else if ((char)keyCode == 'p')
     {
        currentShape = pentagon;
     }

// because we may have changed the shape, make sure the current shape
// is moved to the current shape X and Y

     currentShape.moveShape(shapeX, shapeY);

// Make sure the screen shows the current shape
     repaint();

     return true;
   }
}

Clipping

Clipping is a technique in graphics systems to prevent one area from drawing over another. Basically, you draw in an rectangular area, and everything you try to draw outside the area gets "clipped off." Normally, your applet is clipped at the edges. In other words, you cannot draw beyond the bounds of the applet window. You cannot increase the clipping area; that is, you cannot draw outside the applet window, but you can further limit where you can draw inside the applet window. To set the boundaries of your clipping area, use the clipRect method.

The applet in listing 20.14 reduces its drawing area to a rectangle whose upper-left corner is at (10, 10) and is 60 pixels wide and 40 pixels high, and then tries to draw a circle. Figure 20.15 shows the output from this applet.

Listing 20.14 Source Code for Clipper.java
import java.applet.*;
import java.awt.*;

//
// This applet demonstrates the clipRect method by setting
// up a clipping area and trying to draw a circle that partially
// extends outside the clipping area.
// I want you to go out there and win just one for the Clipper...

public class Clipper extends Applet
{
   public void paint(Graphics g)
   {
// Set up a clipping region
     g.clipRect(10, 10, 60, 40);

// Draw a circle
     g.fillOval(5, 5, 50, 50);
   }
}

Fig. 20.15
The clipRect method reduces the drawing area and cuts off anything that extends outside it.

Within a paint method, once you change your clipping area, you cannot restore the old clipping area. In other words, you can only reduce your drawing area; you can never expand it. Even the clipping area is clipped, so if part of your new clipping area extends outside the old clipping area, only the portion of the new clipping area that falls within the old clipping area will be used. The clipping area lasts for the rest of your paint method; but the next time your paint method is called, the clipping area will be reset.

Animation Techniques

You may have noticed a lot of screen flicker when you ran the Shape Manipulator applet. It was intentionally written to not eliminate any flicker so you could see just how bad flicker can be. What causes this flicker? One major cause is that the shape is redrawn on the screen right in front of you. The constant redrawing catches your eye and makes things appear to flicker. A common solution to this problem is a technique called double-buffering.

The idea behind double-buffering is that you create an off-screen image, and do all your drawing to that off-screen image. Once you are finished drawing, you copy the off-screen image to your drawing area in one quick call so the drawing area updates immediately.

The other major cause of flicker is the update method. The default update method for an applet clears the drawing area, then calls your paint method. You can eliminate the flicker caused by the screen clearing by overriding update to simply call the paint method:

public void update(Graphics g)
{
   paint(g);
}

There is a danger with changing update this way. Your applet must be aware that the screen has not been cleared. If you are using the double-buffering technique, this should not be a problem because you are replacing the entire drawing area with your off-screen image anyway.

The ShapeManipulator applet can be modified easily to support double-buffering and eliminate the screen-clear. In the declarations at the top of the class, you add an Image that will be the off-screen drawing area:

private Image offScreenImage;

Next, you add a line to the init method to initialize the off-screen image:

offScreenImage = createImage(size().width, size().height);

Finally, you create an update method that does not clear the real drawing area, but makes your paint method draw to the off-screen area and then copies the off-screen area to the screen (see listing 20.15).

Listing 20.15 An update method to support double-buffering.
public void update(Graphics g)
{
// This update method helps reduce flicker by supporting off-screen drawing
// and by not clearing the drawing area first. It enables you to leave
// the original paint method alone.

// Get the graphics context for the off-screen image
    Graphics offScreenGraphics = offScreenImage.getGraphics();

// Now, go ahead and clear the off-screen image. It is O.K. to clear the
// off-screen image, because it is not being displayed on the screen.
// This way, your paint method can still expect a clear area, but the
// screen won't flicker because of it.

    offScreenGraphics.setColor(getBackground());

// We've set our drawing color to the applet's background color, now
// fill the entire area with that color (i.e. clear it)
    offScreenGraphics.fillRect(0, 0, size().width,
        size().height);

// Now, because the paint method probably doesn't set its drawing color,
// set the drawing color back to what was in the original graphics context.
    offScreenGraphics.setColor(g.getColor());

// Call the original paint method
    paint(offScreenGraphics);

// Now, copy the off-screen image to the screen
    g.drawImage(offScreenImage, 0, 0, this);
}

Manipulating Images

Java's methods for manipulating images are different from some of the more conventional graphics systems. In order to support network-based operations, Java has to support an imaging paradigm that supports the gradual loading of images. You don't want your applet to have to sit and wait for all the images to download. Java's Producer-Consumer model takes the gradual loading of images into account. Java also uses the concept of filters to allow you to change the image as it passes from producer to consumer. It may seem like a strange way to deal with images at first, but it is really very powerful.

Producers, Consumers, and Observers

Java's model for manipulating images is more complex than on other systems. Java uses the concept of image producers and image consumers. An example of an image producer might be an object responsible for fetching an image over the network, or it might be a simple array of bytes that represent an image. The image producer can be thought of as the source for the image data. Image consumers are objects that make use of the image data.

The image consumers are typically low-level drawing routines that display the image on the screen. The interesting thing about the producer-consumer model is that the producer is "in control." The ImageProducer uses the setPixels method in the ImageConsumer to describe the image to the consumer.

The best way to illustrate this mechanism is to trace the process of loading an image over the network. First of all, the ImageProducer starts reading the image. The first thing it will read from the image is the width and height in the image. It will notify its consumers (notice that a producer can serve multiple consumers) of the dimension of the image using the setDimensions method. Figure 20.16 illustrates the relationship between an ImageProducer and an ImageConsumer.

Fig. 20.16
The ImageProducer reads the image dimensions from the image file and passes the information to the ImageConsumer.

Next, the producer will read the color map for the image. The producer determines from this color map what kind of color model the image uses and calls the setColorModel method in each consumer. Figure 20.17 illustrates how the producer passes color information to the consumer.

Fig. 20.17
The producer uses the setColorModel method to relay color information to the consumer.

The producer calls the setHints method in each consumer to notify them how it intends to deliver the image pixels. This enables the consumers to optimize their pixel handling if possible. Some of the values for the hints are ImageConsumer.RANDOMPIXELORDER, ImageConsumer.TOPDOWNLEFTRIGHT, ImageConsumer.COMPLETESCANLINES, ImageConsumer.SINGLEPASS, and ImageConsumer.SINGLEFRAME. Figure 20.18 illustrates how the producer passes hints to the consumer.

Fig. 20.18
The producer passes hints to the consumer to indicate how it will send pixels.

Now, the producer finally starts to "produce" pixels, calling the setPixels method in the consumers to deliver the image. This may be done in many calls, especially if it is delivering one scan line at a time for a large image. Or it may be one single call if it is delivering the image as a single pass (ImageConsumer.SINGLEPASS). Figure 20.19 shows the producer passing pixel information to the consumer.

Fig. 20.19
The producer uses the setPixels method to pass pixel information to the consumer.

Finally, the producer calls the imageComplete method in the consumer to indicate that the image has been delivered. If there was a failure in delivery-for instance, the network went down as it was being transmitted- then the imageComplete method will be called with a parameter of ImageConsumer.IMAGEERROR or ImageConsumer.IMAGEABORT. Another possible status is that this image is part of a multi-frame image (a form of animation) and there are more frames to come. This would be signaled by the ImageConsumer.SINGLEFRAMEDONE parameter. When everything is truly complete, imageComplete is called with the ImageConsumer.STATICIMAGEDONE parameter. Figure 20.20 shows the producer wrapping up the image transfer to the consumer.

Fig. 20.20
The producer uses the imageComplete method to tell the consumer it is through transferring the image.

This method enables Java to load images efficiently while not stopping to wait for them all to load before it begins. The ImageObserver interface is related to the producer-consumer interface as sort of an "interested third party." It enables an object to receive updates whenever the producer has released some new information about the image.

You may recall that when you used the drawImage method you passed this as the last parameter. You were actually giving the drawImage method a reference to an ImageObserver. The Applet class implements the ImageObserver interface. The ImageObserver interface contains a single method called imageUpdate:

boolean imageUpdate(Image img, int flags, int x, int y, int width, int height)

Not all the information passed to the imageUpdate method is valid all the time. The flags parameter is a summary of flags that tell what information is now available about the image. The possible flags are as follows:

• ImageObserver.WIDTH Width value is now valid.
• ImageObserver.HEIGHT Height value is now valid.
• ImageObserver.PROPERTIES Image properties are now available.
• ImageObserver.SOMEBITS more pixels are available (x, y, width, height indicate the bounding box of the pixels now available).
• ImageObserver.FRAMEBITS Another complete frame is now available.
• ImageObserver.ALLBITS The image has been loaded completely.
• ImageObserver.ERROR There was an error loading the image.
• ImageObserver.ABORT The loading of the image was aborted.

These flags are usually added together, so an imageUpdate method might test for the WIDTH flag with the following:

   if ((flags & ImageObserver.WIDTH) != 0) {
     // width is now available
   }

Image Filters

The Java image model also enables you to filter images easily. The concept of a filter is similar to the idea of a filter in photography. It is something that sits between the image consumer (the film) and the image producer (the outside world). The filter changes the image before it is delivered to the consumer. The CropImageFilter is a pre-defined filter that crops an image to a certain dimension (i.e., it only shows a portion of the whole image). The FilteredImageSource class enables you to put a filter on top of an ImageProducer. The applet in listing 20.16 takes an image and applies a CropImageFilter to it to only display a part of the image. Figure 20.21 contains the output from this applet, showing a full image, and a cropped version of the image.

Listing 20.16 Source Code for CropImage.java
import java.awt.*;
import java.awt.image.*;
import java.applet.*;

//
// This applet creates a CropImageFilter to create a
// cropped version of an image. It displays both the original
// and the cropped images.

public class CropImage extends Applet
{
   private Image originalImage;
   private Image croppedImage;
   private ImageFilter cropFilter;

   public void init()
   {
// Get the original image
     originalImage = getImage(getDocumentBase(), "samantha.gif");

// Create a filter to crop the image in a box starting at (25, 30)
// that is 50 pixels wide and 50 pixels high.

     cropFilter = new CropImageFilter(25, 30, 50, 50);

// Create a new image that is a cropped version of the original

     croppedImage = createImage(new FilteredImageSource(
        originalImage.getSource(), cropFilter));
   }

   public void paint(Graphics g)
   {
// Display both images
     g.drawImage(originalImage, 0, 0, this);
     g.drawImage(croppedImage, 0, 150, this);
   }
}

Fig. 20.21
The CropImageFilter allows you to display only a portion of an image.

Copying Memory to an Image

One possible type of image producer is an array of integers representing the color values of each pixel. The MemoryImageSource class does just that. You create the memory image, then create a MemoryImageSource to act as an image producer for that memory image. Next, you create an image from the MemoryImageSource. The applet in listing 20.17 creates a memory image, a MemoryImageSource, and finally draws the image in the drawing area. Figure 20.22 shows the output from this applet.

Listing 20.17 Source Code for MemoryImage.java
import java.applet.*;
import java.awt.*;
import java.awt.image.*;

//
// This applet creates an image using an array of
// pixel values.

public class MemoryImage extends Applet
{
   private final static int b = Color.blue.getRGB();
   private final static int r = Color.red.getRGB();
   private final static int g = Color.green.getRGB();

// Create the array of pixel values. The image will be 10x10
// And resembles a square bull's-eye with blue around the outside,
// green inside the blue, and red in the center.

   int pixels[] = {
      b, b, b, b, b, b, b, b, b, b,
      b, b, b, b, b, b, b, b, b, b,
      b, b, g, g, g, g, g, g, b, b,
      b, b, g, g, g, g, g, g, b, b,
      b, b, g, g, r, r, g, g, b, b,
      b, b, g, g, r, r, g, g, b, b,
      b, b, g, g, g, g, g, g, b, b,
      b, b, g, g, g, g, g, g, b, b,
      b, b, b, b, b, b, b, b, b, b,
      b, b, b, b, b, b, b, b, b, b};
   
   Image myImage;

   public void init()
   {
// Create the new image from the pixels array. The 0, 10 means start
// reading pixels from array location 0, and there is a new row of
// pixels every 10 locations.
     myImage = createImage(new MemoryImageSource(10, 10,
        pixels, 0, 10));
   }

   public void paint(Graphics g)
   {
// Draw the image. Notice that the width and height we give for the
// image is 10 times its original size. The drawImage method will
// scale the image automatically.
     g.drawImage(myImage, 0, 0, 100, 100, this);
   }
}

Fig. 20.22
The MemoryImageSource class allows you to create your own images from pixel values.

Copying Images to Memory

The PixelGrabber class is sort of an inverse of the MemoryImageSource. Rather than taking an array of integers and turning it into an image, it takes an image and turns it into an array of integers. The PixelGrabber acts as an ImageConsumer. You create a PixelGrabber, give it the dimensions of the image you want and an array in which to store the image pixels, and it gets the pixels from the ImageProducer.

The PixelGrabber is useful if you want to take an existing image and modify it. Listing 20.18 is an applet that uses the PixelGrabber to get the pixels of an image into an array. It then enables you to color sections of the image by picking a crayon and touching the area you want to color. To redisplay the image, it uses the MemoryImageSource to turn the array of pixels back into an image. The applet runs pretty slowly on a 486/100, so you need a lot of patience.

Listing 20.18 Source Code for Crayon.java
import java.applet.*;
import java.awt.*;
import java.awt.image.*;
//
// The Crayon applet uses the PixelGrabber to create an array of pixel
// values from an image. It then enables you to paint the image using
// a set of crayons, and then redisplays the image using the
// MemoryImageSource.
// If you want to use other images with this applet, make sure that
// the lines are done in black, because it specifically looks for black
// as the boundary for an area.
// Also, beware, this applet runs very slowly on a 486/100

public class Crayon extends Applet
{
   private Image coloringBook;   // the original image
   private Image displayImage;   // the image to be displayed

   private int imageWidth, imageHeight;   // the dimensions of the image

// the following two arrays set up the shape of the crayons

   int crayonShapeX[] = { 0, 2, 10, 15, 23, 25, 25, 0 };
   int crayonShapeY[] = { 15, 15, 0, 0, 15, 15, 45, 45 };

// We use the Shape class defined earlier so we can move the crayons
// to a new location easily.
   private Shape crayons[];

// The color class doesn't provide a default value for brown, so we add one.
   private Color brown = new Color(130, 100, 0);

// crayonColors is an array of all the colors the crayons can be. You can
// add new crayons just by adding to this array.

   private Color crayonColors[] = {
     Color.blue, Color.cyan, Color.darkGray,
     Color.gray, Color.green, Color.magenta,
     Color.orange, Color.pink, Color.red,
     Color.white, Color.yellow, brown };

   private Color currentDrawingColor;   // the color we are coloring with

   private int imagePixels[];   // the memory image of the picture

   boolean imageValid = false;   // did we read the image in O.K.?

// blackRGB is just used as a shortcut to get to the black pixel value
   private int blackRGB = Color.black.getRGB();   

   public void init()
   {
     int i;
     MediaTracker tracker = new MediaTracker(this);

// Get the image we will color
     coloringBook = getImage(getDocumentBase(), "smileman.gif");

// tell the media tracker about the image
     tracker.addImage(coloringBook, 0);

// Wait for the image, if we get an error, flag the image as invalid
     try {
        tracker.waitForID(0);
        imageValid = true;
     } catch (Exception oops) {
        imageValid = false;
     }

// Get the image dimensions
     imageWidth = coloringBook.getWidth(this);
     imageHeight = coloringBook.getHeight(this);

// Copy the image to the array of pixels
     resetMemoryImage();

// Create a new display image from the array of pixels
     remakeDisplayImage();

// Create a set of crayons. We determine how many crayons to create
// based on the size of the crayonColors array
     crayons = new Shape[crayonColors.length];

     for (i=0; i < crayons.length; i++)
     {
// Create a new crayon shape for each color
        crayons[i] = new Shape(crayonShapeX,
          crayonShapeY, crayonShapeX.length);

// The crayons are lined up in a row below the image
        crayons[i].moveShape(i * 30,
          imageHeight + 10);
     }
// Start coloring with the first crayon
     currentDrawingColor = crayonColors[0];
   }

// resetMemoryImage copies the coloringBook image into the
// imagePixels array. 

   private void resetMemoryImage()
   {
     imagePixels = new int[imageWidth * imageHeight];
     
// Set up a pixel grabber to get the pixels
     PixelGrabber grabber = new PixelGrabber(
        coloringBook.getSource(),
        0, 0, imageWidth, imageHeight, imagePixels,
        0, imageWidth);
     
// Ask the image grabber to go get the pixels
     try {
        grabber.grabPixels();
     } catch (Exception e) {
        // Ignore for now
        return;
     }
     
// Make sure that the image copied correctly, although we don't
// do anything if it doesn't.

     if ((grabber.status() & ImageObserver.ABORT) != 0)
     {
        // uh oh, it aborted
        return;
     }

   }

// getPixel returns the pixel value for a particular x and y
   private int getPixel(int x, int y)
   {
     return imagePixels[y * imageWidth + x];
   }

// setPixel sets the pixel value for a particular x and y
   private void setPixel(int x, int y, int color)
   {
     imagePixels[y*imageWidth + x] = color;
   }

// floodFill starts at a particular x and y coordinate and fills it, and all
// the surrounding pixels with a color. The doesn't paint over black pixels,
// so they represent the borders of the fill.
// The easiest way to code a flood fill is by doing it recursively: you
// call flood fill on a pixel, color that pixel, then it calls flood fill
// on each surrounding pixel and so on. Unfortunately, that usually causes
// stack overflows because recursion is pretty expensive.
// This routine uses an alternate method. It makes a queue of pixels that
// it still has to fill. It takes a pixel off the head of the queue and
// colors the pixels around it, then adds those pixels to the queue. In other
// words, a pixel is really added to the queue after it has been colored.
// If a pixel has already been colored, it is not added, so eventually, it
// works the queue down until it is empty.

   private void floodFill(int x, int y, int color)
   {
// If the pixel we are starting with is already black, we won't paint
     if (getPixel(x, y) == blackRGB)
     {
        return;
     }

// Create the pixel queue. Assume the worst case where every pixel in the
// image may be in the queue.
     int pixelQueue[] = new int[imageWidth * imageHeight];
     int pixelQueueSize = 0;

// Add the start pixel to the queue (we created a single array of ints,
// even though we are enqueuing two numbers. We put the y value in the
// upper 16 bits of the integer, and the x in the lower 16. This gives
// a limit of 65536x65536 pixels, that should be enough.)

     pixelQueue[0] = (y << 16) + x;
     pixelQueueSize = 1;

// Color the start pixel
     setPixel(x, y, color);

// Keep going while there are pixels in the queue
     while (pixelQueueSize > 0)
     {

// Get the x and y values of the next pixel in the queue
        x = pixelQueue[0] & 0xffff;
        y = (pixelQueue[0] >> 16) & 0xffff;
   
// Remove the first pixel from the queue. Rather than move all the
// pixels in the queue, which would take forever, just take the one
// off the end and move it to the beginning (order doesn't matter here).

        pixelQueueSize--;
        pixelQueue[0] = pixelQueue[pixelQueueSize];
        
// If we aren't on the left side of the image, see if the pixel to the
// left has been painted. If not, paint it and add it to the queue
        if (x > 0) {
          if ((getPixel(x-1, y) != blackRGB) &&
             (getPixel(x-1, y) != color))
          {
             setPixel(x-1, y, color);
             pixelQueue[pixelQueueSize] = 
               (y << 16) + x-1;
             pixelQueueSize++;
          }
        }

// If we aren't on the top of the image, see if the pixel above
// this one has been painted. If not, paint it and add it to the queue
        if (y > 0) {
          if ((getPixel(x, y-1) != blackRGB) &&
             (getPixel(x, y-1) != color))
          {
             setPixel(x, y-1, color);
             pixelQueue[pixelQueueSize] = 
               ((y-1) << 16) + x;
             pixelQueueSize++;
          }
        }

// If we aren't on the right side of the image, see if the pixel to the
// right has been painted. If not, paint it and add it to the queue
        if (x < imageWidth-1) {
          if ((getPixel(x+1, y) != blackRGB) &&
             (getPixel(x+1, y) != color))
          {
             setPixel(x+1, y, color);
             pixelQueue[pixelQueueSize] = 
               (y << 16) + x+1;
             pixelQueueSize++;
          }
        }

// If we aren't on the bottom of the image, see if the pixel below
// this one has been painted. If not, paint it and add it to the queue
        if (y < imageHeight-1) {
          if ((getPixel(x, y+1) != blackRGB) &&
             (getPixel(x, y+1) != color))
          {
             setPixel(x, y+1, color);
             pixelQueue[pixelQueueSize] = 
               ((y+1) << 16) + x;
             pixelQueueSize++;
          }
        }
     }
   }

// remakeDisplayImage takes the array of pixels and turns it into an
// image for us to display
   private void remakeDisplayImage()
   {
     displayImage = createImage(new MemoryImageSource(
        imageWidth, imageHeight, imagePixels, 0, imageWidth));
   }

// The paint method is written with the assumption that the screen has
// not been cleared ahead of time, that way we can create an update
// method that doesn't clear the screen, but doesn't need an off-screen
// image.

   public void paint(Graphics g)
   {
     int i;

// If we got the image successfully, draw it, otherwise, print a message
// saying we couldn't get it

     if (imageValid)
     {
        g.drawImage(displayImage, 0, 0, this);
     }
     else
     {
        g.drawString("Unable to load coloring image.", 0, 50);
     }

// Draw the crayons
     for (i=0; i < crayons.length; i++)
     {
// Draw each crayon in the color it represents
        g.setColor(crayonColors[i]);
        g.fillPolygon(crayons[i]);

// Get the box that would enclose the crayon
        Rectangle box = crayons[i].getBoundingBox();

// If the crayon is the current one, draw a black box around it, if not,
// draw a box the color of the background around it (in case the current
// crayon has changed, we want to make sure the old box is erased).

        if (crayonColors[i] == currentDrawingColor)
        {
          g.setColor(Color.black);
        }
        else
        {
          g.setColor(getBackground());
        }

// Draw the box around the crayon
        g.drawRect(box.x, box.y, box.width, box.height);
     }
   }

// Override the update method to call paint without clearing the screen

   public void update(Graphics g)
   {
     paint(g);
   }

   public boolean mouseDown(Event event, int x, int y)
   {
     int i;

// Check each crayon to see of the mouse was clicked inside of it. If so,
// change the current color to that crayon's color. We use the "inside"
// method to see if the mouse x,y is within the crayon shape. Pretty handy!

     for (i=0; i < crayons.length; i++)
     {
        if (crayons[i].inside(x, y))
        {
          currentDrawingColor = crayonColors[i];
          repaint();
          return true;
        }
     }

// If the mouse wasn't clicked on a crayon, see if it was clicked within
// the image. This assumes that the image starts at 0, 0.
     if ((x < imageWidth) && (y < imageHeight))
     {
// If the image was clicked, fill that section of the image with the
// current crayon color
        floodFill(x, y, currentDrawingColor.getRGB());

// Now re-create the display image because we just changed the pixels
        remakeDisplayImage();
        repaint();
        return true;
     }

     return true;
   }
}

Color Models

The image producer-consumer model also makes use of a ColorModel class. As you have seen, the images passed between producers and consumers are made up of arrays of integers. Each integer represents the color of a single pixel. The ColorModel class contains methods to extract the red, green, blue, and alpha components from a pixel value. You are familiar with the red, green, and blue color components from the earlier discussion on color, but the alpha component may be something new to you.

The alpha component represents the transparency of a color. An alpha value of 255 means that the color is completely opaque, while an alpha of zero indicates that the color is completely transparent. The default color model is the RGBdefault model, which encodes the four color components in the form 0xaarrggbb. The left-most eight bits are the alpha value; the next eight bits are the red component followed by eight bits for green and, finally, eight bits for blue. For example, a color of 0x12345678 would have an alpha component of 0x12 (fairly transparent), a red component of 0x34, a green component of 0x56, and a blue component of 0x78. Any time you need a color model and you are satisfied with using the RGBdefault model, you can use getRGBDefault:

ColorModel myColorModel = ColorModel.getRGBDefault();