CIT 591 Assignment 1: Simple Drawing
Fall 2005, David Matuszek

Purposes of this assignment:

To introduce you to the BlueJ IDE
To get you started programming in Java

General idea of the assignment:

There are three parts to this assignment.

Use BlueJ to create and run a simple application.
Use BlueJ to create and run a simple applet.
Modify the applet to draw a more interesting picture.

Part I -- The “Hello, World” Application

Since we haven't yet had a chance to actually talk about Java in class, this is a sort of tutorial on BlueJ, where I give you the code to enter. One thing you need to know in advance is that capitalization matters. Capitalize everything in the program exactly as shown.

To begin:

Start BlueJ. From the "Start menu" (green ball) choose Seas Applications, then BlueJ.
Create a Project. Choose Project --> New Project.... For File name: type in HelloWorld (as one word, no spaces) and click Create.
Create a class. Click the New Class... button, type in HelloWorld (no spaces) for the class name, make sure that Class is selected, and click Ok.

You should see an orange box appear, containing the name of your new class. The blue stripes on it indicate that the class has not yet been "compiled," that is, made ready to run.
Edit the new class. Either double-click on the orange box, or right-click on it and choose Open Editor. Either way, you will get an editor window with some "starter code" in it. The blue text and the grey text are comments; they are for the human reader, and are ignored by the compiler. You should replace (your name) on the fifth line with your name (omit the parentheses). On line 29, near the bottom of the program, replace // put your code here with the following line:

System.out.println("Hello, World!");

Note: If you don't have line numbers in the left margin of your editor window, go to Options --> Preferences --> Editor and check Display line numbers.
Compile. Click either the Compile button in the editor window, which compiles this one class, or the Compile button in the main BlueJ window, which compiles all your classes (at the moment, you have only the one class). You may have to move the editor window in order to see the main BlueJ window.

If you compiled successfully, the blue lines in the orange box should go away, and a message at the bottom of the editor window should say Class compiled - no syntax errors. If you didn't compile successfully, you will get an error message at the bottom of the editor window; check your changes very carefully to make sure you've typed everything correctly, then try again.
Run your program. Right-click on the orange box and choose void main(String[] args). In the dialog box that appears, don't change anything, just click Ok. If you did everything correctly, a new window should open, containing the words Hello, World!

While there is a Save command on the BlueJ menu, you don't need to use it. Your project is automatically saved for you, each time you compile.

Part II -- Dr. Dave's Drawing applet

An applet is a program that runs only in a Web page. Fortunately, BlueJ will create the Web page for you, if you like. This applet will just create and display a simple drawing.

Create a Project. Choose Project --> New Project.... For File name: type in DrawingApplet (as one word, no spaces) and click Create. (If you like, you can first close the earlier project by choosing Project --> Close, but this isn't necessary).
Create a class. Click the New Class... button, type in Drawing for the class name, select Applet, and click Ok. You should see the familiar orange box with blue stripes appear.

Edit the new class. Either double-click on the orange box, or right-click on it and choose Open Editor. Once again you will get some "starter code," but it's a lot more complicated than for an application. This time, just select all the text and hit the Delete key on your keyboard--we'll type in everything from scratch.

Here's the code. It's fairly long, so you are better off copying it from your browser window and pasting it into BlueJ. If you do type it in, remember to be very careful of capitalization. (Text color is not important.)

import java.awt.*;
import javax.swing.*;


public class Drawing extends JApplet {
 
    public void paint(Graphics g) {
        g.setColor(Color.BLACK);
        g.drawRect(10, 10, 80, 80); // x, y, width, height
        
        g.setColor(Color.BLUE);
        g.fillRect(110, 10, 80, 80);
        
        g.setColor(Color.DARK_GRAY);
        g.drawOval(210, 10, 80, 80);
        
        g.setColor(Color.CYAN);
        g.fillOval(310, 10, 80, 80);
        
        g.setColor(Color.LIGHT_GRAY);
        // startAngle, degrees
        g.drawArc(10, 110, 80, 80, 0, 45);
        
        g.setColor(Color.MAGENTA);
        g.fillArc(110, 110, 80, 80, 45, 90);
        
        g.setColor(Color.ORANGE);
        // x, y, width, height, arcWidth, arcHeight
        g.drawRoundRect(210, 110, 80, 80, 40, 40);
        
        g.setColor(Color.PINK);
        g.fillRoundRect(310, 110, 80, 80, 20, 60);
        
        g.setColor(Color.RED);
        // startX, startY, endX, endY
        g.drawLine(10, 210, 90, 290);
        
        g.drawString("ABC123", 110, 210 + 50);
        
        // Now for something more complicated
        g.setColor(Color.BLACK);
        g.drawPolygon(new int[] { 250, 290, 210 },
                      new int[] { 210, 290, 290 }, 3);

        g.setColor(Color.YELLOW);
        g.fillPolygon(new int[] { 320, 350, 380, 310, 390 },
                      new int[] { 290, 210, 290, 240, 240 }, 5);
    }
}

Compile. Click either the Compile button in the editor window or the Compile button in the main BlueJ window. Fix any errors.
Run the applet. Right-click on the orange box and choose Run Applet. In the dialog box that appears, make sure Run Applet in appletviewer is checked, enter 300 for Height and 400 for Width, and click Ok. If all goes well, you should get a variety of figures, in a 3 x 4 grid.

Part III -- Your own Drawing applet

Create a third project named MyDrawingProject, and create an applet class called MyDrawing. Use the following code to get started:

import java.awt.*;
import javax.swing.*;


public class MyDrawing extends JApplet {


    public void paint(Graphics g) {
        // Replace this line with your code
    }
}

Try to make sense of the above applet, then create a drawing of your own. Draw something recognizable (a person, a house, a car, etc.), not something abstract. It will help if you understand the x-y coordinate system (described briefly below), but you don't have to understand everything; you should be able to do this assignment by imitating my applet, copying lines and changing numbers as necessary.

The variable g is the "Graphics" that you are drawing on, and is a part of every drawing command.

The named colors you can use are RED, ORANGE, YELLOW, GREEN, CYAN, BLUE, PINK, MAGENTA, BLACK, DARK_GRAY, GRAY, LIGHT_GRAY, and WHITE. (You can create other colors, but these are the only ones that have names.)

Java uses an X-Y coordinate system, where the units are pixels (picture elements, usually about 72 pixels per inch). X=0, Y=0 is the top left corner of the applet window. If the applet window is 400 pixels wide and 300 pixels high (as in the previous applet), then the bottom right corner is X=400, y=300.

Most of the drawing commands take place within a rectangle defined by (x, y, width, height), where x is the number of pixels in from the left edge and y is the number of pixels down from the top edge. Values outside the applet window are legal, but are not drawn on the screen.

Here is a brief explanation of the commands I used in my drawing applet. (If you want a more detailed explanation, take your browser to http://java.sun.com/j2se/1.5.0/docs/api/, click on java.awt in the upper left pane, then click on Graphics in the lower left pane. The large pane on the right will show detailed explanations of these and other commands.)

g.setColor(color): Use the specified color for subsequent drawing commands.
g.drawRect(x, y, width, height): Draw the outline of a rectangle starting at x, y, with the given width and height.
g.fillRect(x, y, width, height): Draw a solid rectangle starting at x, y, with the given width and height.
g.drawOval(x, y, width, height): Draw the outline of a circle included in the rectangle starting at x, y, with the given width and height.
g.fillOval(x, y, width, height): Draw a solid circle included in the rectangle starting at x, y, with the given width and height.
g.drawArc(x, y, width, height, startAngle, degrees): Draw an arc of a circle whose center is the center of the circle included in the rectangle starting at x, y, with the given width and height. The arc starts at startAngle (0 is the 3 o'clock position) and continues counterclockwise for the specified number of degrees.
g.fillArc(x, y, width, height, startAngle, degrees): Draw a sector (wedge) of a circle whose center is the center of the circle included in the rectangle starting at x, y, with the given width and height. The sector starts at startAngle (0 is the 3 o'clock position) and continues counterclockwise for the specified number of degrees.
g.drawRoundRect(x, y, width, height, arcWidth, arcHeight): Draw the outline of a rectangle with rounded corners starting at x, y, with the given width and height. The amount of "roundedness" is given by arcWidth and arcHeight.
g.fillRoundRect(x, y, width, height, arcWidth, arcHeight): Draw a solid rectangle with rounded corners starting at x, y, with the given width and height. The amount of "roundedness" is given by arcWidth and arcHeight.
g.drawLine(x1, y1, x2, y2): Draw a line from the point (x1, y1) to the point (x2, y2).
g.drawString("Some quoted string", x, y): Draws the characters inside quotes starting at the position (x, y). Unlike the other methods, the point (x, y) is the bottom left corner of the first letter.
g.drawPolygon(xArray, yArray, n): Draws the outline of a polygon. The sequence of points is given by the n corresponding values in xArray and yArray. For example, the command
g.drawPolygon(new int[] { 250, 290, 210 }, new int[] { 210, 290, 290 }, 3);
will draw a triangle using the 3 points (250, 210), (290, 290), and (210, 290).
g.fillPolygon(xArray, yArray, n)
: Draws a solid polygon. The sequence of points is given by the n corresponding values in xArray and yArray.When the edges of the polygon cross, some areas may be considered to be "outside" the polygon, hence not colored in.

Turn in:

You should work through Parts I and II, but turn in only Part III, MyDrawing. For this assignment, you only need to turn in the one file, which should be named MyDrawing.java. Turn in your program electronically, using Blackboard. (See my Instructions for Using Zip Files and Blackboard).

Most class assignments will be done by teams, but this one you should do by yourself. You can get help from your classmates, and you should be willing to help your classmates if they ask for help, but basically you should do the work yourself.

Due date:

September 15, before midnight.