COMP Visualization. Lecture 15 Animation

(1)

COMP 150-04

Visualization

Lecture 15

(2)

(3)

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

(4)

Attribution of causality

Michotte demonstration

Timing affects the perceived cause and effect

Tendency to construct narratives, anthropomorphize elements

(5)

Attribution of causality

Michotte, redrawn by James Marsh

(6)

Gestalt principle of common fate

Martin Wattenberg, “Sand Shrimp”

http://www.singlecell.org/july

Perceive a grouping of elements with a common motion

This is why a military vehicle is camouflaged when stationary

(7)

Variables of animation

Size

Shape

Color and shading

Position

Speed

Viewpoint and perspective

(8)

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 don’t change (e.g., background) do not need to be redrawn for each frame

(9)

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

(10)

Traditional animation

Painting

Copy the line drawings to the cels

(11)

Traditional vs. computer animation

Storyboard Keyframing Inbetweening Painting

(12)

Initial artists’ sketches

(13)

3D geometry

(14)

Simple rendering

(15)

Add textures

(16)

Add sophisticated lighting and volumetric effects

(17)

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)

(18)

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

(19)

Several levels of computer input

Artwork and design

Character shape representation, backgrounds, rendering

Motion

Forward simulation, pose-to-pose interpolation

Behavior

(20)

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

(21)

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

(22)

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 audience’s attention wanders

Too little and they may miss the action

(23)

Anticipation

Catch the audience’s eye, prepare

them for next action

Show the “windup”

“Tell the audience what you are going

to do before you do it”

(24)

Staging

Present the idea so that it is unmistakably clear

Stage actions, personalities, expressions, moods

Direct the audience’s attention in the scene

(25)

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

(26)

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

(27)

Exaggeration

Accentuate the essence of an idea via the design and action

Exaggerate geometric deformation and timing

(28)

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)

John Lasseter, “Principles of Traditional Animation Applied to 3D Computer Animation”

(29)

Secondary action

Show the action of an object resulting from another action

Makes things more believable, but mustn’t distract the audience

(30)

Appeal

Create actions and designs the audience enjoys watching

(31)

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

(32)

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

(33)

Challenge: Real-time simulation

Film

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

Video

Games

In real-time

(34)

(35)

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

(36)

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”

(37)

Cartoon UIs:

Exaggeration

Anticipation

objects preface movement with small, quick contrary movement

Follow through

objects come to a stop and vibrate into place

(38)

Cartoon UIs:

Reinforcement

Slow in, slow out

for object movement, resizing, and dissolving

Arcs

objects travel along curves when moving non-interactively

(39)

Gnutellavision

[Yee et al.]

Ka-Ping Yee et al. “Animated Exploration of Graphs with Radial Layout, Proceedings of InfoVis ’01

(40)

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?”

(41)

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”

(42)

Motion paths

Trajectories/transitions in a static image

Marcel Duchamp. Nude Descending a Staircase

(43)

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