handout #6
CSE190L—Object Oriented Programming
& Design
Programming Assignment #2
due: Monday,
This assignment will give you practice with the graphics commands described in chapter 7 of the Horstmann text. You are to use the animation framework presented in lecture (handout #4) as the starting point for your solution. You are allowed to make minor changes to the frame settings in AnimationFrame (e.g., changing the initial size or location of the frame), but otherwise you should use this code without modification. Your job is to fill in an appropriate definition for AnimationPanel.
You are going to animate a famous optical illusion known as the Café Wall Illusion. The first frame should have a checkerboard pattern with a white square in the upper left corner:
We think of the white and black squares as being surrounded by “grout” that is gray. Notice that it is a checkerboard pattern, not a checkerboard. In other words, imagine that there is an infinite checkerboard surface and we have a small window into a certain part of it. You should make sure that in the first frame the upper-left square is a complete white square (as in the image above) surrounded by grout, but that is likely to lead to squares on the far right that are incomplete.
In each successive frame, the odd rows (first, third, fifth, etc) all shift slightly to the right and the even rows (second, fourth, sixth, etc) all shift an equal amount to the left. For example, the sixth frame should look like this:
With this shifting of the rows, there is an optical illusion that the lines don’t appear to be straight even though they are. These images were captured on a Windows machine, so the outer frame might look slightly different on your machine. They key point is to notice what is happening with the checkerboard pattern.
The AnimationFrame calls repaint on the panel at regular intervals. You should write your program so that it cycles every 60 frames. Your rows should shift by the same amount each time in going from one frame to the next and this should bring you back to the original frame with a white square in the upper-left corner after drawing 60 of them. In other words, the 61st frame should be identical to the 1st frame.
In drawing the checkerboard pattern, you should always have 8 rows and the grout size should be 4 pixels. The grout should be gray (not light gray or dark gray, but plain gray). Notice that there is grout on the top and the bottom of the checkerboard. The rest of the available vertical space should go to the cells of the checkerboard, which should be squares. You should paint as many squares as you can that fit within the width of the panel. You don’t have to attempt to paint partial squares. You can, for example, fill a rectangle whose coordinates fall slightly outside the panel. But you shouldn’t paint a lot of excess rectangles that aren’t visible because that would reduce the efficiency of your program. You are allowed to paint at most one such rectangle per row.
In drawing the text at the bottom, you should pick a font size that is 10% of the overall height of the panel (rounded to the nearest integer). You should draw the text slightly above the bottom of the panel. Use the grout size (4 pixels) for this offset of the baseline of the text from the bottom of the window. This vertical offset should also be added to the height of the rectangle surrounding the text. You do not have to include any offset above the text because there tends to be plenty of room above text (to make space for things like accents and because the baseline isn’t quite the bottom of the text anyway). Center the text, draw it in blue and surround it with a cyan background.
You should introduce several constants in your AnimationPanel class: the number of rows (8), the grout size (4 pixels), the cycle length (60) and the ratio of the desired font size relative to the overall height (10%). You may assume that the cycle length is an even number. This ensures that half way through the cycle, we end up with a complementary checkboard pattern with a black square in the upper left corner.
You should introduce private methods to break down the overall task of drawing a frame. Otherwise you will end up with too much code in your paintComponent method. You should only need one field for your AnimationPanel class: a counter to keep track of what frame to draw next. Any values shared by your private methods should be passed as parameters or returned by the methods.
This basic animation is worth 15 of the 20 points for the assignment. For the other 5 points, you should develop your own animation. You should once again use the AnimationFrame class with little or no modification (just frame settings). In writing your panel, you get to pick what you want to animate. If you are borrowing an idea from some other source (e.g., from something you saw on the web or from a particular video game or TV show), be sure to mention the source in the comments for your class. There will be a sliding scale for these 5 points that is somewhat subjective based on creativity and effort.
In writing your two animations, you should limit yourself to the graphics utilities described in chapter 7 of the textbook and the other Graphics2D shapes and transformations (scale, rotate, shear, etc). You should not be using the more procedural methods like fillRect in the Graphics class, although you may call the drawPolygon and fillPolygon methods of the Graphics class that take a Polygon as an argument (these are the only object-oriented drawing methods in the Graphics class).
You are required to submit your homework as zip files of an eclipse project. Instructions for using eclipse are on the handouts page (handout #5) and instructions for how to name and turn in your project are include on the “assignments” page. Because you will have two projects for this homework, they should have the names 2a and 2b (2a should be the checkerboard, 2b should be your animation). Turn in two zip files for the two projects using the catalyst turnin.