handout #9
CSE142—Computer Programming I
Programming Assignment #3
due: Monday,
This assignment will give you practice with
value parameters, Java objects and graphics.
You will be using a special class called DrawingPanel
written by Stuart and a class called Graphics that is part of the Java class
libraries. You will also refer to
various color constants from a class called Color that is also part of the
standard Java class libraries.`
The assignment is divided into two parts. The first is meant to be a warm-up to get you
used to basic drawing operations. The
second part will allow you to practice drawing a complex figure with a
parameterized method. You will want to
look at handout #8 for an example of how to use these various classes to draw.
For this assignment you are limited to the
language features in chapters 1 through 3.
Remember that you are not to use more advanced features to solve the
problem. You can’t, for example, make
use of if/else statements to solve this task.
You
will, however, have to make use of a few classes for graphics that are not
described in the chapters. The first is
a class called DrawingPanel written by Stuart (you
will need to download this from the class home page to the directory where you
will store your Java program). The DrawingPanel class has the following public methods.
|
Method |
Description |
|
DrawingPanel(int
width, int height) |
Constructs a DrawingPanel with the given width and height. |
|
setBackground(Color c) |
Sets the background
color for the panel to the given color. |
|
getGraphics() |
Returns a reference to
the Graphics context for this drawing panel. |
To use a DrawingPanel,
you should construct one with a particular width and height, set its background
color if you want to (default is light gray), then get its graphics context and
do whatever drawing you are interested in using the graphics context.
You will specify colors using the color
constants from the standard Java class called Color. The names of these constants are in all
uppercase and are self-explanatory. The
Color class defines the following constant colors: BLACK, BLUE, CYAN,
DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA,
The
getGraphics method of the DrawingPanel
class returns a reference to an object of type Graphics. This class is part of the Java class
libraries and it has many methods. You
will only be expected to use a small subset of those methods.
The methods of the
Graphics class that we will be using are listed below.
|
Method |
Description |
|
drawRect(x, y, width, height) |
Draw a rectangle with
upper-left corner (x,y) and
given width and height. |
|
drawOval(x, y, width, height) |
Draw an oval whose bounding
rectangle has upper-left corner (x, y) and has the given width and height. |
|
drawLine(x1, y1, x2, y2) |
Draw a line from (x1,
y1) to (x2, y2). |
|
setColor(Color c) |
Set the current color
for drawing and filling to the given color. |
|
fillRect(x, y, width, height) |
Fill a rectangle with
the current color whose upper-left corner is (x, y) and the given width and
height. |
|
fillOval(x, y, width, height) |
Fill an oval with the
current color whose bounding rectangle has upper-left corner (x, y) and has the
given width and height. |
The drawRect method is
similar to the fillRect method. The only difference is that drawRect just draws an outline of a rectangle while fillRect paints the entire rectangle (inside as well as
border). Similarly the drawOval method draws the outline of an oval while fillOval paints the entire area. The oval methods are defined in terms of a
“bounding rectangle.” The idea is to
draw the largest oval possible that doesn’t go outside the bounding rectangle. Obviously if you use width and height that
are equal you will get squares and circles instead of rectangles and ovals.
Notice that all coordinates are specified as
integers. Each (x, y) position
corresponds to a different pixel on the computer screen. The word “pixel” is a shorthand
for “picture element” and represents a single dot on the computer screen. The coordinate system assigns the upper-left
corner of a panel to (0, 0). As we move
to the right of this position, the x coordinate goes up. As we go down from this position, the y
coordinate goes up. For example, suppose
that you construct a DrawingPanel with a width of 200
pixels and a height of 100 pixels. Then
the upper-left corner has coordinates (0, 0) and the lower-right corner has
coordinates (200, 100).
(0, 0)
+-----------+
|
|
|
|
|
|
+-----------+
(200, 100)
This is likely to be confusing at first because
in math classes you probably used coordinate systems where y values went down
as you moved down.
Part 1: Drawing1.java (5 points)
This
part of the assignment is meant to give you some practice with the DrawingPanel and Graphics classes. You are to construct a DrawingPanel
with a width of 400 and a height of 200.
It should have a green background and should have two solid black lines
(one horizontal and one vertical) that divide it into 4 equally sized
quadrants.
In the upper-left quadrant you are to draw a red
oval that has horizontal and vertical lines that divide it into four equally
sized parts. You should draw the largest
oval that doesn’t go outside the upper-left quadrant. The inside of the oval should be red
throughout and the lines should be black.
In each of the other three quadrants you are to
draw a blue diamond that is as large as it can be without going outside the
quadrant. Each diamond should be
composed of blue lines, but the inside of the diamond should be in the
background color. In other words, you are
just drawing lines, not filling in a color inside the lines.
Below is a picture of what your drawing panel
should look like.
Your class should be called Drawing1 and
should be stored in a file called Drawing1.java. It should have at least two static methods
other than main that are used to break up the problem into smaller chunks. You should include a comment at the beginning
of your program as well as short comments on each method.
Part 2:
Drawing2.java (15 points)
This
second part of the assignment will involve more complex computations with a
figure that has several levels of structure.
You are to produce the following image.
This image has several levels of structure. You will find that there is a basic subfigure
that occurs throughout, which is a square with concentric circles in it. These subfigures are replicated to form a
square of such figures. And there are three
such squares in the overall image. The
subfigure in the upper-left has upper-left coordinates (0,0)
and is a 4-by-4 square of subfigures each 36 pixels wide with 6 concentric
circles. The subfigure below that has
upper-left coordinates (25, 175) and is a 6-by-6 square of subfigures each 24
pixels wide with 4 concentric circles. The subfigure to the right has
upper-left coordinates (180, 75) and is a 5-by-5 square of subfigures each 40
pixels wide with 5 concentric circles.
The overall panel has a green background and is
400 pixels wide and 375 pixels high.
Each of the subfigures is yellow with black circles and squares. You are to write a program that exactly
reproduces this image. In doing so, you
should introduce a static method that is called three different times to create
the three different subfigures. You do
not have to introduce class constants for the parameters of these three
subfigures, but obviously you will have to pass a large number of parameters to
this method to indicate exactly what subfigure to draw.
This program does not require a lot of lines of
code, but the computations are not simple.
You might very well find yourself overwhelmed with the amount of detail
you have to handle all at once. A
computer scientist named Brian Kernighan has said that, “Controlling complexity
is the essence of computer programming,” which is why this makes a good
exercise for a young computer scientist.
You will find that the techniques of decomposition and iterative
enhancement described in chapter 1 will help you in this situation.
Start with one piece of this problem. In particular, you should write a static
method that draws one square with concentric circles inside of it. That subfigure is repeated throughout this
figure, so it makes sense to have a separate method for producing it. You will want to make sure that it has enough
parameters that you can draw subfigures of different sizes at different
locations on the screen and with different numbers of concentric circles. You might first want to have it produce a
specific number of concentric circles or a specific size or be drawn at a
specific position, but eventually it needs to be made flexible through the use
of value parameters.
Once you have completed the static method that produces
one of these subfigures, write another static method that produces a square
grid of these subfigures. This
higher-level method is the one that you will call three times from your main
method to produce the three grids in the picture.
In grading, we will expect to see these two
static methods: one for a subfigure with just one square and its concentric
circles and one for producing a grid of such figures. We will expect you to use good style
(indentation, commenting, good variable names, etc.). Your program should be stored in a file
called Drawing2.java
Remember that to run your files Drawing1.java
and Drawing2.java, you will have to download the file DrawingPanel.java
from the class web page (the class that Stuart wrote) and store it in the same
folder where you will be storing your classes.
The DrawingPanel file will be available under
the “assignments” link from the class web page.
The standard Java classes (Graphics and Color) are part of the java.awt package, so you need to include the following line
of code at the beginning of your class file to access them:
import java.awt.*;
Turn in your two program files using electronic turnin. You do not
have to turn in DrawingPanel.java.