GUI Design Project, Spring 1997


There is just one programming project planned for this semester. If you finish it early, I'll be glad to recommend additional work!

The genesis of this project is an animated sign that the Westinghouse Corporation put up near the Long Island Expressway entrance to the Queens Midtown Tunnel about 20 years ago. There were three copies of the Westinghouse logo (a circle with a stylized 'W' in the middle), and different elements of each logo could be illuminated independently. When the temporal pattern of flashing lights is right, the lights appear to move (the "Phi Phenomenon"), and this sign had great movement! It was programmed to do go through various patterns, which never seemed to repeat, and often were very clever. Unfortunately, the sign was not really reliable -- there always seemed to be one or two segments that didn't work right, and it was eventually removed.

This semester, we are going to bring the Westinghouse Sign back to life!

The assignment will be done as a sequence of steps, and you will be required to submit a working version of each step before beginning work on the next step.

Step 1: Draw a Circle

This step is due March 18. Write a program which draws a blue circle on a white background. The circle must (appear to) be hollow; the circumfrence of the circle must be "reasonably" thick, and the circle must occupy a fixed proportion of the middle of the window even when the window is resized.

Step 1b: Draw Three Logos

You do not have to submit this step. However, you should complete this step before working on Step 2. Draw three Westinghouse Logos. The sizes and line thicknesses must adjust to the size of the window, and their horizontal/vertical alignment must respond to the aspect ratio of the window. The three logos should touch each other, or be very close to each other, in order to make future animations more interesting.

Step 2: Animate Three Logos

This step is due April 4. Each of the three logos is to be composed of (at least) 14 picture segments: six segments of the circle, and eight components of the W. Your program is to cycle through 42 steps, during each of which just one segment is "illuminated." (You may provide a different animation sequence, provided it demonstrates that you can turn each segment on and off independently.)

Step 3: Program the Animation

Create a "script" that consistes of a sequence of frames. For each frame, specify its duration and which segments are to be illuminated (or which segments are different from the previous frame). Your program is to cycle through an "interesting" script.

Step 4: Read Script Files

Add a mechanism so that your program can read a script from a disk file. Add a menu bar to the application, and use the "File/Open" menu to read in a new script file.

Step 5: User Programming

Add graphical interface components so the user can create a new script. For each frame, the user clicks on the picture elements to be illuminted, and adjusts the duration of the frame using a slider or text-entry box (or both). The user should have single-step, play-once, play-continuously, and editing capabilities. Add a "File/Save As" menu for saving scripts, and a "Help" option.

The editing/composing operations are to take place in a separate window from the animation.


There are lots of things you could add to your project to make it more interesting and instructive. For example, there could be options for controlling the background color or image; the logos could be allowed to move around on the plane of the display; the logos could be three dimensional and/or could move in three dimensions instead of two; the animation could be accompanied by an audio component.

For each of these items, the design of a component for user control would have to be added.

Christopher Vickery
Computer Science Department
Queens College of CUNY
Home Page