Animation: The art of creating moving images with the use of computers (from Wikipedia) Examples of Uses of Animation 1. Represent an application that is dynamically evolving (e.g., games, simulation of a factory floor) 2. Timers (e.g., stopwatches, clocks) 3. Drawing attention (e.g., ads, fly-ins on powerpoint slides) 4. Feedback (e.g., removing a captured game piece or creating a puff of smoke to denote a deleted element) 5. Help systems: Some help systems will animate the sequence of actions that a user needs to perform to accomplish a task How animation is accomplished 1. Overview: To create the illusion of movement, an image is displayed on the computer screen then quickly replaced by a new image that is similar to the previous image, but shifted slightly. This technique is identical to how the illusion of movement is achieved with television and motion pictures. 2. Can be done from an application model or from a series of glyphs a. Glyphs i. A single glyph is moved across the screen ii. A set of glyphs is animated in the same position (dancing) iii. A set of glyphs is shown at different positions on the screen (tumbling) b. Application model: At each time step, the application is queried as to its current state and view information is computed on the basis of that state information i. examples 1) clock: animation is based on current time 2) simulation of a physical system: application is modeled as a series of mathematical equations with time being one of the independent variables. At each time step the other inputs to the equations are computed or estimated and the equations are solved for locations. Objects are then rendered at these locations c. Path model: A mathematical equation is used to describe a path along which an object moves. Time is the independent variable for this path. At each time step the equation is solved and a location is computed for the point Cognitive explanation for why animation works (from wikipedia) 1. A minimum of 12 frames per second is necessary to trick the human eye/brain into thinking it's seeing smooth movement a. Hand drawn cartoon animation uses 15 fps b. Movies uses 24 fps c. The reason no jerkiness is seen at higher speeds is due to "persistence of vision." From moment to moment, the eye and brain working together actually store whatever one looks at for a fraction of a second, and automatically "smooth out" minor jumps. Possible violations of 12 fps and workarounds 1. Low-bandwidth may make it impractical to generate an animation on a server and then transmit it in real-time to a client a. can pre-load or partially pre-load an animation before starting it b. can put software on the client side that can read the animation parameters and perform the animation i. some animation packages will require you to pay for the development software but will provide freely downloadable "play" software. The client runs the "play" software, which reads the animation parameters from the file prepared by the development software and performs the actual animation. 2. It may require too much computation to provide animation at 12fps a. Use keyframes: Perform a full computation on a few key frames and then interpolate between the key frames using simplifying assumptions, such as linear interpolation or derivatives Use animation judiciously: Used improperly, animation can force attention sapping cognitive changes of context in the user or force the user's attention to wander around the screen without stabilizing (use the example of what happens on the savannah and being hunted). Powerpoint makes it possible to fill your presentation with all sorts of "gee whiz" effects. You should resist the temptation to use these effects unless they actually enhance your presentation. a. Example: Having bullets "fly in" is an example of a bad use of special effects. Other than distracting your listener and breaking his or her concentration, what purpose does it serve? b. Example: Fading in points right before you make them is an example of a bad use of special effects. You can better justify the fading in of bullets because it is less obtrusive then flying them in and because it prevents the listener from reading the bullets before you're ready to present them. However, if you've limited the number of bullets and kept them short and snappy the listener can quickly assimilate the slide and should already be listening to you. Fading in the points will distract the listener and break his or her concentration. c. Example: Fading in information to show what happens as an algorithm manipulates a data structure is a good use of special effects. For example, coloring the nodes of a graph as they are reached in depth first search is an excellent way to show how depth first search spreads through a graph. In this case, the ability to present new information while maintaining the same underlying picture maintains the listener's concentration while moving to another slide will break the listener's concentration and make it harder for the listener to see what has changed. Animation in Java: Animation in Java revolves about the use of a Swing Timer. 1) What it is: A Swing timer fires one or more action events after a specified delay a) all swing timers run in the same timer thread and all action events execute on the event-dispatch thread, so it is preferable to the java.util timer, which does neither 2) Methods of use a) perform a task once, after a delay: e.g., to show and then hide a tool tip b) perform a task repeatedly: e.g., animating a sequence of glyphs 3) Essential properties a) action listener that performs a task when the timer goes off b) the timer that specifies the delay, in ms c) setRepeats(false/true): indicates that timer should go off only once d) use start/stop methods to start and suspend the timer e) constructor takes a delay that sets both the initial and inter-event delay and an action listener i) can modify either initial or inter-event delay using setInitialDelay or setDelay ii) can add additional action listeners using addActionListener 4) SwingWorker: If you cannot quickly complete your task, then you should use a SwingWorker object to complete your task so that you don't freeze the interface (not discussed further--see the documentation for details)