CS 312 - Programming Project #5
Graphics and Loops

Assignment purpose: Practice with parameters, for loops, objects, and graphics

Based on an assignment by Stuart Reges and Marty Stepp (programming exercise #1, chapter 3G of Building Java Programs).

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 requires you to draw a complex figure with a parameterized method.  You will want to look at the book or the slides on graphics for examples.

For this assignment you are limited to the language features in chapters 1 through 3 (including 3G) of the textbook.

Part 1: Drawing1.java (4 points)

This part of the assignment is meant to give you some practice with the DrawingPanel and Graphics classes.  You can either produce a specific output or you can design your own output.  If you want to design your own, it must meet the following criteria:

This flexibility will allow you to be creative and to draw any figure you like.  After the assignment is turned in, we may anonymously show off some of the figures drawn by students for everyone to see.

If you don’t want to design your own drawing, then you should meet the following criteria.  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 and lower-right quadrants 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 quadrant.  The inside of the oval should be red throughout and the lines should be black.  You do not have to draw an outline around the oval.

Below is a picture of what your drawing panel should look like if you choose to do this default figure.

Part 2: Drawing2.java (16 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.  The upper-left corner has exactly one such subfigure that is 100 pixels wide and has 10 concentric circles.  The concentric circles are enclosed in a square and drawn in black against a green background.  The panel also has three square grids that are composed of multiple copies of this basic subfigure.  The overall panel has a cyan background and is 550 pixels wide and 450 pixels high.

The four figures on your drawing panel should have the following properties.


(x, y) position

number of rows and columns

size of each subfigure, in pixels

number of concentric circles in each subfigure

top-left figure

(0, 0)

single subfigure

100 x 100


bottom-left figure

(12, 155)

8 x 8

30 x 30


top-right figure

(305, 10)

4 x 4

48 x 48


bottom-right figure

(300, 225)

3 x 3

70 x 70


You are required to have two particular static methods that are described below.  This program does not require a lot of lines of code, but the computations are not trivial and you must use parameters to generalize the problem. You might very well find yourself overwhelmed with the amount of detail you have to handle all at once.  The key is to not to try to handle all the detail at once, rather work on one part of the problem at a time and try to ignore the other parts. The techniques of decomposition and iterative enhancement described in chapter 1 of the textbook 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 image, so it makes sense to have a separate method for producing it.  Start with the subfigure in the upper-left part of the screen.  It’s not in a grid pattern, it’s just the subfigure itself (one set of concentric circles in a square).

Your first version of this method could draw the specific subfigure in the upper-left corner (always drawing it in that position, always making it 100 pixels wide, always having 10 concentric circles). This is called hard coding a method. It solves one specific problem. This can be a good start to get a feel for how to solve a problem, but solving one specific problem isn't always that useful. Computer scientists and programmers are always looking to generalize a solution so that it solves many  problems. Generalize the method that draws a box with concentric circles inside it using parameters. What information do you need to generalize the problem? To be able to draw the box anywhere, with any size, and  with any number of circles inside it? You should be able to call this method that draws a box with concentric circles inside it with different sizes, different locations and different numbers of concentric circles.

The drawing commands we are using are defined in terms of integers, which leaves open the possibility that things won’t divide up evenly.  You don’t have to worry about this possibility.  In particular, you may assume that the subfigure size will always be a multiple of twice the number of concentric circles you are supposed to draw. (e.g., 10 circles in a figure 100 wide (size is 100, 10 circles, 2 * 10 = 20, 100 is a multiple of 20), 5 circles in a figure 30 wide (size is 30, 30 is a multiple of 10), 6 circles in a figure 48 wide (size is 48, 48 is a multiple of 12), 7 circles in a figure 70 wide (size is 70, 70 is a multiple of 14)).

Once you have completed the parameterized static method that produces one of these subfigures, write another static method that produces a square grid of these subfigures.  You will call this method three different times to produce the three grids of the overall image.  Obviously it will have a lot of parameters to be flexible enough to draw each of these three grids.  The key point is that a single method can be used that produces all three grids. This is somewhat similar to the example done during the simple graphics lectures.

In grading, we will require 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 that is called three different times to produce the three grids.  We will expect you to use good style (indentation, commenting, good variable names, etc.).  Be sure to include a brief comment with each method (e.g., explaining what the parameters represent).  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. You will need to compile the DrawingPanel class first, then your Drawing1 and Drawing2 classes.

The standard Java classes (Graphics and Color) are part of the java.awt package, so you will need the following import statement:

import java.awt.*;

Stylistic Guidelines:

For this assignment you are limited to the language features in Chapters 1 through 3; you are not allowed to use more advanced features to solve the problem.  You cannot, for example, make use of if/else statements to solve this task.  You will, however, use the DrawingPanel and Graphics classes described at the end of Chapter 3 as well as the color constants from the Color class, as described in Chapter 3.

Continue to use static methods to structure your solution as described previously; this time, write static methods that use parameters. In grading, we will require two static methods: one that draws a subfigure with just one square and its concentric circles, and one for producing a grid of such subfigures that is called many different times to produce the various figures on the screen.

Give meaningful names to methods and variables in your code.  Follow Java's naming standards about the format of ClassNames, methodAndVariableNames, and CONSTANT_NAMES.  Localize variables whenever possible -- that is, declare them in the smallest scope in which they are needed.

Include a comment at the beginning of your program with basic information and a description of the program and include a comment at the start of each method.

Submission and Grading:

Name your Part 1 file Drawing1.java and your Part 2 file Drawing2.java.  You do not have to turn in DrawingPanel.java.  This assignment is worth 20 points total.

Part of your program's score will come from its "external correctness."  External correctness for Part 1 measures whether you have met the constraints on the figure as specified on the first page, including having sufficient number of shapes and colors.  External correctness for Part 2 measures whether the figure you draw matches exactly what is expected.

Drawing2.java will be weighted more heavily than Drawing1.java.

The rest of your program's score will come from its "internal correctness."  Internal correctness will only be measured for Part 2; you will not be penalized for stylistic issues on Part 1.  Internal correctness measures whether your source code follows the stylistic guidelines specified in this document.  This includes using for loops to capture repetition in the figures, capturing the structure of the figure using the two parameterized static methods specified, commenting, naming identifiers, and indentation of your source code.

Did you remember to: