CSCI 201 -- Using graphics classes I

One of the main motivations for Java was to allow the programming of graphical applications. One of these type of applications is the Applet, Java programs that run inside of a web browser. Applets use Java frames to create a drawing space for pictures and animations.

In this lab we will also draw some pictures, but we'll put out frames inside a normal application window. Your biggest challenge for the lab will be reading about Java's Graphics class. It's powerful and has lots, maybe even too many, methods.

Downloading the project framework

Download Stonehenge.zip, a ZIP file containing a NetBeans project named Stonehenge and unZIP this project into your csci/201 directory. Try to make your Projects panel look something like the following picture before continuing.
Stonehenge projects panel

Take a minute to look at the StonehengeMain.java file. This contains the main method for your application. There isn't much to it, only a single line. 

public static void main(String[] args) {
    edu.unca.cs.LabAids.FrameMaker.Component2Frame(new Stonehenge(), "Stonehenge") ;
}

We've actually done the hard work for you by providing a Java method Component2Frame that places a frame around a simple component. You don't need to modify this file unless you think it would be fun to change the title of your frame.

By the way, the Java code for Component2Frame is present in your project. It in a file called FrameMaker.java within the edu.unca.cs.LabAids project. You can and will use this class to create other Java graphical applications; however, you should not modify this class.

Modifying the project

Building and running

Now take a look at the Stonehenge class within the Stonehenge.java file. This is the class that implements a Java component. This is done by extending a java.swing.JComponent in your class definition.

There is a class constructor that is used to specify the preferred size of the graphical component. This size isn't fixed in stone. You'll still be able to resize the window with your mouse. 

Stonehenge() {
    setPreferredSize(new Dimension(900, 600)) ;
}

Continue to look on down your program until you find the paint method. This method is invoked, by the Java run-time system, to draw objects on the screen. Right now it's pretty simple. It sets the drawing color to blue and then draws four rectangles. 

    g.setColor( Color.blue ) ;
    g.fillRect( 100, 200, 100, 300 ) ;
    g.fillRect( 300, 200, 100, 300 ) ;
    g.fillRect( 500, 200, 100, 300 ) ;
    g.fillRect( 700, 200, 100, 300 ) ;

Go ahead and build and run the project You'll get a view of a few of Stonehenge's mystical vertical pillars.
First Run
This is how UNCA professors of ancient European history believe that Stonehenge looked after the first 201 years of construction.

Run your program. If all goes well, you should see an incomplete Stonehenge.

Completing Stonehenge

Your job is to modify your program so that it gives a more accurate, though still boring, rendition of Project Stonehenge, as shown below.
Later Run

You improve Stonehenge by adding two rectangles to the display. To help you out, let's talk a little about your present Java file. The file starts by importing classes from the java.awt package.

Stonghenge contains only one method, paint, which is responsible for creating the display. This method always receives a single parameter, a Graphics object. We can give the parameter any name we choose, but in this case we have named it simply origG. You might note that we immediately copy origG into another Graphics variable g. This is because one of us read some Sun documentation that told us that we shouldn't modify the Graphics object passed to the paint method. We're not sure why, but we do as told.

Let's take a look at some of the statements of the paint method. The first three statements obtain the size of the window. 

    Dimension PanelSize = getSize() ;
    int PanelWidth  = PanelSize.width ;
    int PanelHeight = PanelSize.height ;

This may seem unnecessary as we set the size of the window when we created it; but the "user" may have resized the window, so we really do need to check.

Next we create a copy of the graphic object and then we make the drawing blue by passing in the color Color.blue to the setColor() method. 

    Graphics g = origG.create() ;
    // All modifications go here!
    g.setColor( Color.blue ) ;

Now we can draw the four rectangles and fill them with our chosen color using the fillRect. This method has four parameters corresponding to the four pieces of input it needs to do its job. Let's take a look, in order, at the four parameters used in our first call to fillRect. 

    g.fillRect( 100, 200, 100, 300 ) ;
  1. The x coordinate of the upper-left corner of the rectangle. This is 100 pixels from the left edge of the drawing area.
  2. The y coordinate of the upper-left corner of the rectangle. This is 200 pixels down from the top of the drawing area.
  3. The width of the rectangle, 100 pixels.
  4. The height of the rectangle, 300 pixels.

By the way, a pixel is one of those million tiny dots that make up the monitor screen.

Your Assignment

You now know enough to add the two additional rectangles needed to complete this assignment. You may have to dust off your high school geometry skills to figure out how to size and place them. But give it a try.

Since it would be rather boring just to paint it all in blue, you might want to look at the Java documentation for the Color class to see how you could make a rainbow of stones. If you are adventurous, you could think about using the drawSting method of Graphics to add your name to the drawing. And, if you are truly adventurous, you can modify the code so that the pillars shrink and grow as you resize the window.

Show your instructor your running application.