CPSC 124: Lab 7
Graphics and More Applets

THE TERM COMPUTER GRAPHICS REFERS to all aspects of creating and manipulating images on a computer. The Java AWT has some basic support for graphics in the form of a class called Graphics. This class provides methods for displaying text and images and for drawing basic shapes such as lines and rectangles. This class is discussed in Section 5.4 of the text. For this lab, you will do three exercises using graphics.

Exercise 1: The first exercise is to write an applet with a paint method that can draw two different images. You can use an instance variable to decide which image to draw. The outline of the paint method should be something like this:

       public void paint(Graphics g) {
          if (imageNum == 1) {
                // draw first image  
          }
          else if (imageNum == 2) {
                // draw second image
          }
       }

The images you draw don't have to be very complicated, but they should not be completely trivial. You might want to make one image a slightly different, "hilited" version of the other.

You should then arrange for the image to change when certain events occur. For example, you could change the image every time the user clicks on the applet by writing this:

          public boolean mouseDown(Event evt, int x, int y) {
             if (imageNum == 1)
                imageNum = 2;
             else
                imageNum = 1;
             repaint();  // Don't forget to call repaint() !
             return true;
          }

Another interesting idea is to write mouseEnter and mouseExit handlers that set the value of imageNum so that the picture changes when the mouse cursor moves over the applet and changes back when the cursor leaves the applet.

You can use the "Java Applet Starter" folder from the file server as a basis for this exercise. Turn in a print-out of the file that defines your applet.

Exercise 2: For exercise 2, you will create an animation. An animation is just a sequence of different images, with slight changes from one image to the next, shown rapidly one after the other. It's complicated to write an animation applet in Java from scratch, but the basic format of most animation applets is the same. The folder "Animation Starter" on the file server is a framework that does most of the work for you. In fact, all you have to do is provide a method that can create each of the individual frames in your animation on demand. The applet will call this method each time it needs a frame to be drawn. The method you have to modify is:

    protected void drawFrame(Graphics g, int frameNum, int width, int height) {
          // Draw frame number frameNum in graphics context g.  Width and height
          // give the width and height of the applet
    }

Note that you only draw one frame in this method. The parameter frameNum tells you what frame you have to draw. There is an instance variable named numberOfFrames that tells how many frames there are in the animation. The frames are numbered from 0 through numberOfFrames-1. After all the frames have been shown, the animation starts again from the beginning.

You should use the "Animation Starter" as the starting point for your work. Modify the file MyAnimation.java, which defines the animation applet. Or, if you prefer, you can write a sublclass of MyAnimation in a separate file and override the definition of the drawFrame method. Turn in a printout of your file.

Exercise 3:

Exercise 3 is based on the simple sketching program that you wrote last week. An enhanced version of the program can be found in the folder "KaleidaSketch Applet Starter" on the file server. The exercise is to further enhance the program so that it draws eight-way symmetric curves. Here is the finished applet:

Sorry, you can't use the actual applet,
but here is a picture:

Oops, no pictures either

This is really not so hard. All you have to do is modify a single method in the file SketchCanvas.java. The method, which is called repeatedly as the user moves the mouse, draws a line between two points:

   void line(Graphics g, int x1, int y1, int x2, int y2) {
         // draw a line in the graphics context g from the point (x1,y1)
         // to the point (x2,y2)
      g.drawLine(x1,y1,x2,y2);
   }

You should modify this method so that is draws eight lines. The seven additional lines are obtained by reflecting the original line horizontally, vertically, and diagonally in all possible ways. The eight reflections of a point (a,b) are shown in this picture:

(Diagram of Symmetries)

The horizontal and vertical reflections of (a,b) are labeled. The numbers w and h represent the width and height of the canvas, respectively. The diagonal reflection of (a,b) is labeled as (c,d). If the canvas were a square, (c,d) would just be equal to (b,a). However, because the canvas is not necessarily square, c and d should be defined as:

          c = (w * b) / h;
          d = (h * a) / w;

Turn in a modified copy of SketchCanvas.java. Or if you prefer, just turn is a copy of the new line() method that you create.

If you want a challenge for extra credit, consider adding another pop-up menu to the applet to control the types of symmetry that are applied. For example, you might provide a choice of two-way horizontal symmetry, two-way vertical symmetry, two-way diagonal symmetry, four-way horizontal/vertical symmetry or full eight-way symmetry. Drawing with different forms of symmetry is just a matter of deciding which of the eight possible reflected lines are drawn.

[ Lab Index | Online Notes ]