Homework 3 - Ehrenstein Illusions

So far, we've been sharpening our pattern recognition and decomposition skills with a variety of visual problems: text and ASCII art. Now we will move onto patterns in full-fledged 2D graphics.

For this homework we'll use the DrawingPanel class from the textbook. DrawingPanel is a simple wrapper around the standard Java graphical user interface (GUI) library that will allow us to draw pretty pictures. While DrawingPanel is not a standard library object, the fundamental concepts at play --- top-left coordinate system, drawing onto a graphics context, and layering --- applying to not just Java but virtually any GUI or graphics application.

You can download DrawingPanel.java here or off of the lecture page from 9/28's lecture.

Part 1: Doodles

First, create a doodle of your own design using the DrawingPanel class. Here are the rules:

• Obviously, your drawing should not contain anything obscene, derogatory, or otherwise offensive.
• Your drawing should be at least 100x100 in size.
• Your drawing should include at least three different shapes and two different colors.
• Your program should not include any infinite loops.

Other than those rules, feel free to draw whatever strikes your fancy. Like the previous homework, you will receive full credit if your program meets the above requirements.

Include your doodle in a class called Doodle in a file called Doodle.java. We'll be posting the coolest doodles on the website, so have fun with it!

Part 2: Ehrenstein Illusions

Many optical illusions rely on a series of patterns in order to generate their effect. A well known optical illusion is the cafe wall illusion. In reality, the cafe wall illusion is simply alternating rows of black and white squares. However, they are offset and thus give the illusion of being sloped when really they are straight lines. Drawing such figures can be tedious because of their repetitive design which makes them an excellent candidate to be drawn by a computer program.

We'll be drawing Ehrenstein illusions, another optical illusion that consists of concentric circles with diamonds inside. Since you wrote the computer program that rendered the drawing, you'll know that the diamond structure is indeed made of straight lines. But if you just stare at the drawing instead, you'll swear that some of them are curved!

Here are some of the basic properties of the above the drawing.

• The DrawingPanel is 500x500 pixels.
• The background of the DrawingPanel is green.
• The background of each square is cyan, the background of the circles are yellow, and the lines themselves are black.

The interesting bits of the drawing are the five figures it contains. Here are their properties.

Location	Position	Size of subfigure	Number of circles	Size of grid	Miscellaneous
Top-left	(0, 0)	75x75	6	N/A	N/A
Top	(105, 15)	50x50	10	7x1	N/A
Left	(10, 100)	70x70	3	2x5	N/A
Middle	(175, 115)	100x100	8	3x3	N/A
Bottom	(200, 430)	25x25	4	10x2	Only circles (no diamond/box)

Your goal is to reproduce this drawing almost exactly (See addendum paragraph below). Note that because of differences in how Java renders shapes on different operating systems, the panel may render slightly differently on your machine versus what is in the above picture, e.g., a circle may become more pixelated. As long as your output looks identical on visual inspection, you will receive full credit for the output.

Addendum:The top grid (7x1) of Ehrenstein squares does not need to match the picture in the write-up exactly. Presumably, you will have one method that stamps out that grid along with the others. If the other grids look correct with your code, but the top grid looks a bit off (in particular, if the circles are skewed to the top-left corner of the box), you will receive full output credit for the assignment.

Please submit your program in a Java class Illusions in a file called Illusions.java.

Design

First of all, remember to download DrawingPanel.java from the links mentioned in the introduction. DrawingPanel.java needs to reside in the same directory as your own .java files. That way when you compile your code, DrawingPanel.java is also compiled.

Also, remember to include the following line at the top of your solutions:

import java.awt.*;

which will tell Java to include classes from the java.awt package that you will need to use your DrawingPanel (namely the Graphics and Color classes).

Like the previous homeworks, you should be on the look out for places to decompose the problem into smaller pieces in order to get full credit for design. To get you started, here are two static methods that you should include in your program:

A method that draws Ehrenstein circles. A single combination of a box, diamond, and set of concentric circles makes up a Ehrenstein circle. Note that this subfigure appears repeatedly throughout the diagram albiet with different positions, sizes, etc.. Your method should be flexible enought to account for these possibilities.

The circles themselves are evenly spaced concentric circles. To get a sense of how to draw such figures, you should think of the differences in the radii of the circles as in the following diagram containing 7 concentric circles:

r is the radius of the outer-most circle and a is the distance between successive concentric circles. a is a very important value in computing the relationship between the location and size of each successive concentric circle.

A method that draws a grid of Ehrenstein circles. Given your method to draw a single Ehrenstein circle, you should then construct a method to draw a grid of Ehrenstein circles. You can then use this method to construct each of the grids in the above diagram. This method will need many parameters since in addition to controlling the size of the grid, you will also need to control the particulars of the Ehrenstein circles within the grid.

There is more decomposition that should occur in this homework. Your job is to identify it and write methods to deal with those pieces accordingly.

In general, decomposition is the right way to tackle a problem like this. Breaking a down a seemingly-impossible problem into smaller problems until they look doable is a cornerstone of algorithmic thinking, something you can accomplish here in a very visual way.

Incremental development

In addition to decomposition, you should also exercise your skills in incremental development. In this homework, you need to write methods that generalize to many scenarios. Starting with a method that has many parameters to begin with may be difficult because you won't immediately see how they should be used. Instead, try writing methods that take no parameters, e.g., a method that draws a fixed number of concentric circles to some place on the screen. From there, generalize the method incrementally by adding a parameter, checking to see if everying works as expected, and then repeating the process until your method can handle all the cases it needs to.

Extra Credit

While you develop your program, you may notice that the top grid of Ehrenstein circles is not quite concentric. This is due round-off error. In short, recall that integer division truncates off the decimal. If our calculations include small enough numbers such that the truncated decimal is actually significant, then our overall computation may look off when the math behind it is sound.

It turns out, there's many more ways to introduce such significant round-off error into that computation than I was expecting. So rather than have you agonize over it, I've relaxed the constraints of the homework. However, for the adventurous/curious, I pose the following two extra credit questions worth a point a piece about this specific problem:

• (+1) Reproduce the write-up's picture exactly. Since the deformity likely happens with your circles, then that should be where you are looking to fix the problem. In particular, keep in mind that divisions of small numbers are what cause truncation errors. Try to change how you do the calculation (e.g., order of operations or add/removing operations) to minimize such errors.
• (+1) In the spirit of round-off errors, consider the following code snippet:

  int x = ...;
  int y = ...;
  int ans1 = 2 * (x / (2 * y));
  int ans2 = x / y
  

  Note that, mathematically speaking, ans1 and ans2 should be equal.
  1. Find a pair of values for x and y where ans1 is equal to ans2 and another pair of values for x and y where ans1 is not equal to ans2.
  2. Without removing either of the multiplications by 2 in ans1, what is the minimal change I can make to that expression so that ans1 is always equals to ans2?

  (Note that you must answer both parts 1. and 2. correctly to get the extra credit point for problem 2).

For the first extra credit problem, just note in your header comment at the top of your file that you believe you successively duplicated the top figure exactly, and we'll check it.

For the second extra credit problem, please include in your header comment your answers to both parts. To test things out, you can either use jGRASP's interactions window or a separate .java file to try out different values of x and y. Please do not include any such code in the actual execution of Illusions.java.

(Note: this extra credit is not intended to be difficult, so if you have free time, I highly recommend you do it. This extra credit was the result of students coming to my office hours to discuss the homework. And I found the whole discussion both fun and enlightening. So consider this my way of getting you to think about an interesting side problem with a little point incentive to do so =).

Submission

Please submit your two Java source files, Doodle.java and Illusions.java, electronically via the course website.