A SIMPLE JAVA GRAPHICS EXAMPLE

In this section of the tutorial we are going to create a very simple graphics program to introduce graphical programming in Java. This program will allow the user to press the mouse button and draw a circle with a radius of 5 pixels. You can press the button anywhere on the magenta screen and get a blue dot.

Below is a sample (applet) of the program that we will create. You can click with mouse in the magenta area to see how it works.

Please get a Java compatible browser

(Note that every time you click on the screen the old circle is erased and also that the center of a dot is not at the cursor position. These problems are addressed later in this tutorial. For simplicity's sake, let's just concentrate on the new methods and ideas introduced in this program.)

THE SOURCE CODE

import java.awt.*;

1: public class circle extends java.applet.Applet {
2:    private int mouseX, mouseY;
3:    private boolean mouseclicked = false;
4:
5:	  public void init()  {
6:		setBackground(Color.magenta);
7:	  }
8:
9:   public boolean mouseDown(Event e, int x, int y ) {
10:       mouseX=x; mouseY=y;
11:       mouseclicked = true;
12:       repaint();
13:       return true;
14:   }
15:
16:    public void paint( Graphics g ) {
17:       g.setColor(Color.blue);
18:       if (mouseclicked) {
19:           g.fillOval(mouseX, mouseY, 10, 10);
20:           mouseclicked = false;
21:       }
22:   }    
23:}

Let's first look at Line 5: the init() method. This method does the same thing as in previous programs. It is the first method called when the window is drawn. In this example, it simply paints the background the color magenta.

Next, let's discuss the mouseDown() method. This method is an event handler that determines if a mouse button was pressed. It does not care which button on the mouse was pressed. It only cares if a button was pressed. The values passed to this event handler are an Event object and the x and y coordinates of the location where the mouse button was pressed. Line 11 just changes the instance variable mouseclicked to true to let the applet instance know that the user pressed a button within its graphics context area. Now look at line 12. Here is where the repaint() method is called. This method will update the screen by calling the paint() method.

Now on to the new method: paint(). This method is called when a component in the window is asked to redraw itself. It is usually called only when the object is first made visible, or when some event changes the display area. The parameter is a graphics context object ( an instance of class Graphics).

Line 17 sets the drawing (pen) color to blue by using the graphics context method setColor(Color).

Line 18 checks to make sure a mouseDown() event has ocurred; otherwise, we would not want to draw an circle.

Line 19 invokes the graphics routine fillOval() with the x and y coordinates of the point where the mouse was pressed and a height and width of the bounding rectangle of the circle. Notice that when you drew the circles, they were drawn with the top left of the circle at about where the mouse was clicked. This is because the x and y coordinates sent to fillOval() are the top left corner of the bounding rectangle in which the oval is to be placed. Thus here we are requesting fillOval() to paint the filled oval that is inscribed in the 10 pixel by 10 pixel rectangle (square) with the upper left corner at pixel (mouseX, mouseY). In the next version of this program, we change it so that the center of the circle (rather than the upper left corner of the bounding rectangle) is placed at where the mouse is clicked. For further information on some of the graphic routines click on java.awt.Graphics.

Notice that in the paint() method there is no code that clears the screen. So why is the screen being cleared everytime the user presses the mouse button? The reason is that the repaint() method calls the update() method (both are inherited from the Applet class), and the default implementation of the update() method clears the screen and calls the paint() method. To fix this problem the update() method needs to be overridden and changed to not clear the screen. The program below is the executable of circle_right.java. It contains the overridden update() method and also the code to place the center of the circle at the point where mouse was clicked.

CIRCLE_RIGHT PROGRAM

Please get a Java compatible browser.

THE CODE

import java.awt.*;
 
public class circle_right extends java.applet.Applet {
    private int mouseX, mouseY;
    private boolean mouseclicked = false;
 
    public void init() {
        setBackground(Color.magenta);
    }
 
    public boolean mouseDown(Event e, int x, int y ) {
        mouseX=x; mouseY=y;
        mouseclicked = true;
        repaint();
        return true;
    }

    public void paint( Graphics g ) {
        g.setColor(Color.blue);
        if (mouseclicked) {
            g.fillOval((mouseX-5), (mouseY-5), 10, 10);
            mouseclicked = false;
        }
    }    

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

As you can see, the update() method is overridden and no longer clears the screen. It only calls the paint() method. Also, the code has been changed to have the center of the circle be at the mouse click by subtracting 5 from X and 5 from y. (Thus moving the upper left corner of the bounding rectangle 5 pixels left and 5 pixels up.)

CONCLUSION

Hopefully, now you have become familiar with some of the basic techniques of working with graphics in Java. In the next section of the tutorial, we will create graphics for our Hilo game by loading in images of playing cards.