GUI Design Project, Spring 1997
Introduction
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.
Extras
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