Animation: The art of creating moving images with the use of computers (from

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 
  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
     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
         i. The path is frequently represented as a function of time, t, and
            the x and y dimensions may be specified independently

            Example: The following two equations will move an object along
              a line that starts at (x0, y0) and ends at (x1, y1):

                     x(t) = x0 + (t * (x1 - x0))
                     y(t) = y0 + (t * (y1 - y0))

            t varies from 0 to 1 in this example

         ii. For circular objects (circles, ellipses, and arcs), it can
             help to use polar coordinates. 

             1) In polar coordinates, points on a circle are determined by 3

                a) the circle's center point, 
                b) the circle's radius, r
                c) an angle between 0 and 2π
                x = center_x + r * cos Θ
                y = center_y + r * sin Θ

             2) The path equations using time, t, are now represented as:

                x = center_x + r * cos (t * 2π)
                y = center_y + r * sin (t * 2π)
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

	    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
    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. Here is what the Java documentation
       has to say about why you should be careful to execute your Swing-related
       tasks on the event-dispatch thread:

       This is necessary because most Swing object methods are not "thread 
       safe": invoking them from multiple threads risks thread interference 
       or memory consistency errors. Some Swing component methods are 
       labelled "thread safe" in the API specification; these can be safely 
       invoked from any thread. All other Swing component methods must be 
       invoked from the event dispatch thread. Programs that ignore this 
       rule may function correctly most of the time, but are subject to 
       unpredictable errors that are difficult to reproduce.
  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)