CS324e - Assignment 6


Placed Online: Wednesday, November 7
Due: Thursday, November 15, no later than 11 pm
Points: 50, about 5% of the final grade
Program Shell: LilacChaserMain.java

Individual Assignment. This is an individual assignment. You must complete the assignment on your own. You must complete the assignment on your own. You may use the examples shown in class as a guide, but you may not get help from anyone besides the instructor and TA. Copying code or getting code from anyone besides the the instructor or TA is cheating and will result in an F in the course. You can discuss approaches to the problem with others as long as you don't write code or look at code. You may get help on syntax errors from others.

The purpose of the assignment is to create a program with a 2D animation

In this assignment you will create an animation using the javax.swing.Timer class. I am providing a shell of the program with some code already completed. The LilacChaserMain.java class also contains the LilacChaserFrame, LilacChaserPanel  and TitlePanel classes. .

Implement a program that displays the Lilac Chaser visual illusion.

The provided shell program creates an animation using the javax.swing.Timer class as discussed in the Introduction to Animation lecture.  We are not using the advanced animation framework from FRC. The LilacChaserPanel is in the center of the frame. A title panel is on the top of the frame and a panel with a slider to control the speed of the animation has been added to the bottom of the frame..

You must implement the rest of the LilacChaserPanel class and the TitlePanel classes. (You should not have to make any changes to the LilacChaserFrame class.)

The LilacChaserPanel performs the following actions:

1. When the run method is called it draws 11 purple patches in a circular pattern. The 12th patch is missing and the background color is shown.

2. When the timer goes off, the actionPerformed method in the anonymous inner class in the LilacChaserFrame class is called and that method in turn calls repaint on the LilacChaserPabel. When repaint is called the second time the next patch clockwise is not drawn. This cycle continues creating the illusion. (Key Insight: you need some way for the panel to keep track of which patch to skip. It isn't hard, but students often struggle with this.)

3. When creating your program it is a good idea to draw all 12 circles at first and get that working before leaving one out. Translating and then rotating the graphics object after drawing each circles makes drawing the patches a lot easier. 

4. The background color is a shade of gray with red, green, and blue all set to 170.

5. You may draw a patch using a gradient  paint or by drawing 10 separate circles.

6. If you draw the path with 10 separate circles: Each patch is series of 10 concentric circles. The RGB color value of the largest, outermost circle is 178, 153, 178. The RGB color value of the next largest circle is 186, 136, 186. The red and blue values keep going up and the green value keeps going down until the smallest, innermost circle is almost pure magenta. (250, 0, 250) on my version. You should not hard code these values. Instead you should calculate them based on the background color and the number of concentric circles. (The program should be written so that it would be relatively easy to change the number of concentric circles in a patch without having to make many other changes.)

6. To draw a patch draw 10 ellipses. The largest one must be drawn first. The size of the largest ellipse is one tenth of the width of the containing panel. (The panel is set to a dimension of 500 by 500.) You can experiment with smaller or larger sizes. Again the program should be written so that these values can be found and changed easily.

Here is a close up of the concentric circles. Yours won't look this crisp because they will be much smaller.

7. Draw a cross hairs in the middle for the viewer to focus on. Your cross hairs must match the one shown above and does not move.

The TitlePanel class simply displays the title at the top of the window, Lilac Chaser.

1. Complete the paintComponent method to create a bold, italicized, sans serif font of size 36. (You could do this with an instance variable as well.)

2. Draw the String in green, centered horizontally and vertically in the panel. Note, the drawString method accepts the x and y coordinates of the baseline of the String not, the upper left corner of its bounding box. You can find the bounds of a String with the following code:

// in the TitlePanels paintComponent method
Graphics2D g2 = (Graphics2D)g;

// f is Font instance variable, TITLE is a String instance variable
FontRenderContext context = g2.getFontRenderContext();
TextLayout txt = new TextLayout(TITLE, f, context);
Rectangle2D bounds = txt.getBounds(); // gives bounds of visible text that will be drawn.
// see http://docs.oracle.com/javase/7/docs/api/java/awt/font/TextLayout.html#getBounds%28%29

// use bounding box to determine x and y necessary to center string when drawn

When you complete the assignment turn in your LilacChaserMain.java files using the turnin program. This page contains instructions for using turnin. Be sure you upload the file to your CS324e folder. Your program will be graded on correctness and style, including breaking the problem up into smaller pieces and the ability to change the program easily. (For example how easy would it be to change the size of the patches or use a different color?)