COMP 150-04

Visualization
Lecture 15
Animation

History of animation

The function of animation

Illustrate steps of a complex process
Illustrate cause and effect, context
Show trends over time, tell a story
Attract attention
Entertain

http://gapminder.org

Attribution of causality
Michotte demonstration
Timing affects the perceived cause and effect
Tendency to construct narratives, anthropomorphize elements

http://cogweb.ucla.edu/Discourse/Narrative/michotte-demo.swf

Attribution of causality

Michotte, redrawn by James Marsh

http://aig.cs.man.ac.uk/people/jamesmarsh

Gestalt principle of common fate

Perceive a grouping of elements with a common motion
This is why a military vehicle is camouflaged when stationary
but less so when moving

Martin Wattenberg, Sand Shrimp

http://www.singlecell.org/july

Variables of animation
Size
Shape
Color and shading
Position
Speed
Viewpoint and perspective
Secondary variables: sound, ...

Traditional animation
Each frame represented as a layer of painted cels
Background, characters, moving and still parts of each character
Parts of the scene that dont change (e.g., background) do not need to
be redrawn for each frame

Layered cels for each frame are stacked and photographed

Traditional animation
Storyboarding
Sequence of stills with descriptions of the action
Maps out key events in the story, representative poses

Key framing
Draw the important frames as line drawings
Description of motion between the key frames

Inbetweening
Draw all of the frames between the key frames

Traditional animation
Painting
Copy the line drawings to the cels
Color the cels

Traditional vs. computer animation

Storyboard

Keyframing

Inbetweening

Painting

Storyboard

Keyframing

Interpolation

Rendering

Initial artists sketches

Pixar, Finding Nemo

3D geometry

Pixar, Finding Nemo

Simple rendering

Pixar, Finding Nemo

Add textures

Pixar, Finding Nemo

Add sophisticated lighting and volumetric effects

Pixar, Finding Nemo

Computer animation
Replace painting with rendering
Replace much of the manual inbetweening with computer
simulation and parameter interpolation
Models have various parameters:
Control points or vertices (positions, normals, colors, textures)
Parameters controlling pose, shape, or movement (joint angles,
deformation, trajectories)
Scene parameters (lights, camera)

Computer animation
Inbetweening via parameter interpolation
A set of n parameters defines an n-dimensional state space
One pose defines a point in the state space
The animation defines a path through the state space
Start with the parameters at an initial point in the state space
Move the parameters along a state space path and re-render until the
animation is complete

Several levels of computer input

Artwork and design
Character shape representation, backgrounds, rendering

Motion
Forward simulation, pose-to-pose interpolation

Behavior
Crowd behaviors, automated responses

Principles of animation
Focus attention on the main character
Make sure the audience sees what they should see
Appeal to and engage the audience
Cartoon physics
10 principles proposed by Disney

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Squash and stretch

Define the rigidity and mass of an object by distorting its shape
during action
Dramatic squashing and stretching
Object looks soft and pliable
Object looks heavy

Motion blur

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Timing
Define the weight, size, and personality of objects by adjusting
the spacing of actions
Spend the right amount of time preparing for, delivering, and
following up on each action
Too much time and the audiences attention wanders
Too little and they may miss the action

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Anticipation
Catch the audiences eye, prepare
them for next action
Show the windup
Tell the audience what you are going
to do before you do it

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Staging
Present the idea so that it is unmistakably clear
Stage actions, personalities, expressions, moods
Direct the audiences attention in the scene

Pixar, Luxo Jr.

Follow through / Overlapping action

Terminate an action and establish its
relationship to the next action
Opposite of anticipation: Remind the
audience of what just happened

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Slow in, slow out

Adjust the spacing of in-between frames to achieve subtlety of
timing and movement
Stretch out time to emphasize important parts of the action

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Exaggeration
Accentuate the essence of an idea via the design and action
Exaggerate geometric deformation and timing

Pixar, The Incredibles

Arcs
Use smooth paths in the animation state space
Smooth paths provide more natural motion and animation
Move the parameters along smooth trajectories (e.g., splines)

Linear head turn

Spline head turn

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Secondary action
Show the action of an object resulting from another action
Makes things more believable, but mustnt distract the audience

Frank Thomas and Ollie Johnston, The Illusion of Life: Disney Animation
John Lasseter, Principles of Traditional Animation Applied to 3D Computer Animation

Appeal
Create actions and designs the audience enjoys watching

Pixar, Toy Story

Physics-based animation
Motion and behavior can be simulated
Physics can be used to model
Mechanics: Gravity, momentum, collisions, friction
Fluid mechanics: Flow, viscosity, drag, etc.
Deformation: Flexibility, elasticity
Fracture: How and when things break

James OBrien and Jessica Hodgins

Physics-based vs. True physics

Traditional animation principles equally valid for computer animation
Must control physics-based simulation to apply these principles
Must be able to tweak the physics to get the desired behavior
Must be able to control the starting and ending points (and
sometimes the entire path) of the motion

Challenge: Real-time simulation

Film
24 frames per second (1 hr = 86,400 frames)

Video
30 frames per second (1 hr = 108,000 frames)

Games
60 frames per second (1 hr = 216,000 frames)
In real-time
Flexible

Offline animation: anything goes

Cartoons -> Cartoon UIs

Changes in the UI can be sudden, unexpected, disorienting
User loses track of causal relationship
Apply animation principles to create smoother transitions
Provide visual cues before/during/after transition

Cartoon UIs:
Solidity
Solid drawing (squash and stretch)
objects arrive from off screen or grow from a point
menus and arrows transform smoothly from a button to an open menu
transfer of momentum as objects collide

Motion blur
connect old and new locations

Dissolves
when changing object layering

Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface
In Proceedings of UIST 93

Cartoon UIs:
Exaggeration
Anticipation
objects preface movement with small, quick contrary movement

Follow through
objects come to a stop and vibrate into place

Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface
In Proceedings of UIST 93

Cartoon UIs:
Reinforcement
Slow in, slow out
for object movement, resizing, and dissolving

Arcs
objects travel along curves when moving non-interactively

Bay-Wei Chang and David Ungar, Animation: from cartoons to the user interface
In Proceedings of UIST 93

Gnutellavision
[Yee et al.]

Ka-Ping Yee et al. Animated Exploration of Graphs with Radial Layout, Proceedings of InfoVis 01
http://people.ischool.berkeley.edu/~rachna/courses/infoviz/gtv

Does animation improve understanding?

Drawbacks:
Difficult to see details when they move quickly
Difficult to estimate trajectories
Difficult to track a large number of targets/motions
May wrongly infer causality or anthropomorphize
May lack appropriate interactivity

Hybrid solution?
Coarse segmentation: by object
Finer segmentation: by action

Barbara Tversky et al. Animation: does it facilitate?

International Journal of Human-Computer Studies, 2002

Does animation improve understanding?

Studies of algorithm animations and complex processes
Higher subjective rating and greater accuracy with animation
Most effective when used in conjunction with explanations
Must incorporate interactive viewing controls

Colleen Kehoe et al., Rethinking the evaluation of algorithm animations as learning aids: an observational study
International Journal of Human-Computer Studies, 2001

Motion paths
Trajectories/transitions in a static image

Marcel Duchamp. Nude Descending a Staircase

Dan Goldman et al. "Schematic Storyboarding for Video Visualization and Editing, SIGGRAPH 06

Phosphor and Drag-and-pop

[Baudisch et al.]
Visual cues
Afterglow reminds user of transitions
Rubber bands suggest future transitions

Patrick Baudisch et al., Microsoft Research

http://www.patrickbaudisch.com/projects/phosphor
http://www.patrickbaudisch.com/projects/dragandpop