CS 312 Assignment, Graphics

Programming Assignment 3: Individual Assignment. You must complete this assignment by yourself. You cannot work with anyone else in the class or with someone outside of the class. You may not copy solutions from the world wide web. You are encouraged to get help from the instructional staff.

Placed online: Tuesday, 9/15
20 points, ~2% of total grade
Due: no later than 11 pm, Thursday, 9/24
General Assignment Requirements

The purposes of this assignment are:

Based on an assignment by Stuart Reges and Marty Stepp. Thanks to Stuart for the idea of using optical illusions as the picture to draw. Inspiration from the Optical Illusions & Visual Phenomena website maintained by Michael Bach.

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.  Review the book or the slides on simple graphics and more graphics for examples of how to use these classes to draw graphics.

For par 2 of this assignment you are limited to the language features in chapters 1 through 3 of the textbook.

Part 1: drawingOne() (4 points)

This part of the assignment is meant to give you some practice with the DrawingPanel and Graphics classes. 

Complete the drawingOne() method in the ScintillationGrid.java program. Do not alter the method signature for the drawingOne() method in any way.

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 show off some of the figures drawn by students for everyone to see. For this part of the assignment you may use any Java features you are familiar with or learn on your own. For part one you are NOT restricted to chapters 1 - 3 of the book. Also, you can find more methods to call on the Graphics objects besides the ones we covered in class.

If you donít want to design your own output, then complete the following image.  Construct a DrawingPanel with a width of 400 and a height of 200.  It has a green background and has 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 draw a red oval that has horizontal and vertical lines that divide it into four equally sized parts.  Draw the largest oval that doesnít go outside the quadrant.  The inside of the oval is red throughout and the lines are black.  You do not have to draw an outline around the oval.

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

See the assignments page for links interesting examples of previous students' work. Note, you just need to meet the minimum requirements to get the four points, but it to try and do something more interesting. You can create some very interesting effects with loops.

Part 2: Scintillation Grid (16 points)

On part two your are restricted to the Java programming concepts from chapters 1 through 3 of the book.

For the second part of the assignment create methods in ScintillationGrid.java that print out multiple versions of the scintillation grid optical illusion. Here is a single example of a scintillation grid:

If you loosely focus on one of the white circles the other white circles will appear to contain an inner black dot. But if you shift your focus to one of those outer white circles the black dot disappears.

Here is the Wikipedia article on the phenomenon.

Add methods to ScintillationGrid.java that can display multiple versions of the scintillation grid inside of a DrawingPanel.

This image has several levels of structure. The overall panel has a cyan background and is 900 pixels wide and 650 pixels high.

Drawn inside the panel are four scintillation grids. Each grid consists of a black square, a grid of gray lines (both vertical and horizontal) and a a white circle drawn at the intersection of lines.

The four figures in the example sown above have the following properties


(x, y) position

size of large square

size of small squares

number of lines

thickness of lines

top-left figure

(0, 0)





top-right figure

(400, 50)





bottom-left figure (50, 400) 220 100 1 20

bottom-right figure

(500, 500)






Create one method that given a graphics object and the other necessary values for a grid, draws a complete figure. Create a structured solution to the problem and remove redundancy when possible.

The basic algorithm is to draw the black, background rectangle, then draw the horizontal and vertical lines (which are gray rectangles), and then draw the white circles. (Using the fillOval method)

Note, the circles are larger in width and height than the thickness of the lines. The width of the circles is 40% or 2 pixels bigger than the thickness of a line, whichever is bigger. (Hint: use integer division and the Math.max method.)

Here are some tips on how to approach the problem. Start with one piece of this problem.  Have the drawGird method just do the black background rectangle. Then do the vertical lines. Then do the horizontal lines. Finally do the circles. Be sure to test each best of code and be sure that it is working before going on to the next. You will find it very useful to work out the geometry on paper first.

You are required to have a method to draw the entire grid which relies on other methods to do the lines and circles. You must create the picture above in your program with 4 calls to your method that draws a grid with different parameters.

We 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 must be named ScintillationGrid.java

Remember that to run your program you must download the file DrawingPanel.java from the class web page and if you are using BlueJ add it to the project.  Compile the DrawingPanel class first, then your ScintillationGrid program.

The standard Java classes (Graphics and Color) are part of the java.awt package, so the following lines have been included in the shell files.

import java.awt.Graphics;
import java.awt.Color;

When run, your ScintillationGrid produces DrawingPanel the image shown above with the exact same four smaller scintillation grids.

In the final version of your program DO NOT call method drawingOne() from main or anywhere else in the program.

Provided Files:
File Responsibility
DrawingPanel.java Provided by me.
ScintillationGrid.java (A shell file with a main method and the header file.) Me and you. (mostly you.)

Checklist: Did you remember to:

Back to the CS 312 homepage.