There are two major goals of today's lesson.  First, to learn how to draw images.   Second, to learn how to use a technique called double buffering that reduces flickering in graphically intensive displays.  The code below illustrates both of these concepts.

Drawing Images

There are 3 steps to drawing an image:

1.   Declare the image, e.g.
            private Image mountainImage;
2.   Read the image into the applet, e.g.
            mountainImage = getImage(getCodeBase(), "coolimg.jpg");
3.   Display the image, e.g.
            g.drawImage(mountainImage, x, y, width, height, notifiee);

For more information, please refer to the language reference section on images.

Double Buffering

The steps involved for double buffering are:

1. Declare a buffer Graphics object, e.g.
       private Graphics bufferGraphics;
2. Declare a buffer Image object, e.g.
       private Image bufferImage;
3. Assign the buffer Image object to a drawable object, e.g.
       bufferImage = createImage(width, height);
4. Assign the buffer Graphics object to a graphics context, e.g.
       bufferGraphics = bufferImage.getGraphics();
5. Draw whatever on the buffer Image object, e.g.
      bufferGraphics.drawImage(whatever, x, y, notifiee);
6. Draw the buffer Image onto the regular graphics surface in the paint routine, e.g.
      g.drawImage(bufferImage, x, y, notifiee);

For more information, please refer to the language reference section on double buffering.

Code Explanation

The applet below imports both the "awt" and the "applet" libraries.   It features both an "init" and a "paint" routine, as well as three applet variables.  The applet variable "mountainImage" eventually contains the image of a mountain.  The applet variable "bufferImage" is used for double buffering, as is the applet variable "bufferGraphics".

The "init" method starts off by setting the background color to a light blue.   It then declares and initializes a new Mediatracker object named "tracker".  The purpose of "tracker" is to keep track of the loading status of the images used by the applet.  Why do you want to track an image's status?  Well, it turns out that sometimes the applet runs faster than the image can load.  When this occurs, the paint routine will not display the images that have not yet loaded.  By keeping track of their status, the applet can ensure that images are loaded before the paint routine is called.

After declaring "tracker", "mountainImage" is now loaded via the "getImage" method.  The image is added to "tracker" via the "addImage" method (along with a unique ID, in this case a 1) and then the "try"/"catch" statements cause the applet to cease progress until all of the images that are being tracked (in this case, just "mountainImage") have been fully loaded.  If you would like to learn more about the "MediaTracker", please consult a more advanced reference.

The "bufferImage" is now created for double buffering.  The width and the size of "bufferImage" are set to match the default display window so that when "bufferImage" is eventually copied to the display window, it will display exactly as expected.  The graphics context for "bufferImage" is now obtained via the "getGraphics" method.  Finally, "mountainImage" is drawn onto "bufferImage" in the top left corner.

The "paint" method does two things.  First, it copies the double buffer ("bufferImage") contents onto the display window with the "drawImage" command.  Then it adds an additional image to the display window with a second "drawImage" command.  The second "drawImage" command draws a second "mountainImage" starting at the lower, right corner of the first "mountainImage" and extending to the bottom right corner of the display window.   Look at the code carefully to be sure that you understand how this is happening!