k-sketch: a “kinetic” sketch pad for novice animators

K-Sketch - R.C. Davis 1

Richard C. DavisSMU School of Information Systems

Collaborators: Brien Colwell (NYU), James Landay (UW)

NUS CS Seminar, Feb 25, 2009

K-Sketch: A “Kinetic” Sketch Pad for Novice Animators


How Would a Teacher Animate This?

SO42-

SO42-

-e

-e

-e

-e

Zn(Z inc)anode

Cu(Copper)cathode

cell ce llmembrane

(Sulfate) (Sulfate)

Zn2+

Cu2+

1.10 V


How Would a Teacher Animate This?


Need Quick & Easy Animation!

Amateur ArtistsPlay in new mediumNeed a simple way to get started

ProfessionalsShare dynamic ideasNeed tool expressive enough for variety of tasks

Students & EducatorsLearn complex conceptsNeed to animate fast before or during class


Users Need Animation “Paper” Properties of paper

Fast: Express ideas quickly Simple: Learn fast, focus on high-level

task Expressive: Handle wide variety of

tasks K-Sketch realizes this vision


K-Sketch: Outline Related Work Field Studies Interface Optimization K-Sketch System Evaluations Future Work


Current Animation Tools Lacking

Child Tools Too slow

Professional Tools Too complex Focused on polish

Special Case Tools Too constraining

Sketchy (GoKnow)






Flash (Adobe)

PowerPoint (Microsoft)






Pivot Stick Figure Animator


Solution: Informal Interfaces

Defer Details Focus on precision

distracts & slows down Precision often

unimportant

Sketched Input Hand drawn objects Motion imprecise

SILK (Landay & Myers 1995)

DENIM (Newman et al. 2003)


Research Stops at Techniques How to choose techniques?

Visual Language Koka

(Takahashi, et al. 2005)

Physical Simulation

Assist (Alvarado & Davis 2001)

Demonstration Race Sketch

(Moscovich & Hughes 2001)


Interviews with Animators Seven animators

4 made short films 1 made web sites with Flash 2 made conference presentations

Wanted to work more in rough form Interested in prototyping

Storyboard from a film animator


Interviews with Non-Animators

Occupation Domain Animation Descriptions

1. Education Student Biology Student exercise: meiosis

2. Education Student Physics Planetary motion

3. Mech. Eng. Professor

Engineering

Gears, molecular shifting

4. CS Grad. Student Dance Contra dance moves

5. Chemistry Professor ChemistryParticle collisions, rusting

reaction, battery reaction

6. ResearcherEngineerin

gMachine tread motion

7. Math Instructor Math Cantor set construction

8. Reading Tutor Reading Fun animations to motivate

9. Aeronautical Engineer

Engineering

Robot arm following a path

10. ManagerEngineerin

gBox sliding into casing

11. Researcher Geology Etalon noise


Example: Particle Collisions


Example: Contra Dance


Example: Machine Tread


Library of Usage Scenarios Complete usage scenarios

User task Animation that accomplishes the task

72 examples in library 27 from animators 23 from non-animators 22 from children (students of

animator) Identified 18 Animation Operations


Examples of Animation Operations

Orient to Path

Trace

Move Relativ

e

CopyMotion



Orient to Path

Trace

Move Relativ

e

CopyMotion


Our Library is a Gold Mine Scenarios: breadth of applications

How many can we handle? Many approaches to each

Some require “extra” steps

Animation Ops Can we leave some out?


Goals Optimization Constraints

Goals of “paper-like” interfaces Fast: Express ideas quickly Simple: Learn fast, focus on high-level task Expressive: Handle wide variety of tasks

Goals expressed as optimization Fast: Allow only a few extra steps Simple: Minimize # Anim Ops Expressive: Maximize # supported

animations


Simplicity/Expressivity Tradeoff

Expressivity(More Supported Animations)

Simplicity(Less Anim Ops)

Look for point of diminishing returns


Step 1: Code All 72 Animations

Break up: Animations “Features” Features “Approaches”

Required Anim Ops Number of “Extra Steps”

Battery Example Three Features (electrons, sulfate ions, switch) Two sulfate ion approaches

1. Appear + Translate + Disappear + Copy (6 steps)2. Appear + Translate + Disappear (12 steps, 6 extra)


Step 2: Find Best Operation Sets

Optimization program For N = 1 to 72 animations

Find smallest set of operations That supports N animations

No approaches with >4 extra steps

Examples (Appear, Translate, Disappear, Copy) supports

Battery Use fastest approach for Sulfate ion

(Appear, Translate, Disappear, Morph) does not Only available approach for ion has 6 extra steps


Optimization Results

0

2

4

6

8

10

12

14

16

18

0% 20% 40% 60% 80% 100%

Supported Animations (Expressivity)

# A

nim

ati

on

Op

era

tion

s(S

imp

licit

y

)

0

2

4

6

8

10

12

14

16

18

DiminishingReturns

Scenarios Supported

15%

21% 28%36%

46%

51%

68%

75% 79% 86%93%

97%

100%

1.Translate

2.Scale

3.Rotate

4.Set Timing

5.Move Relative

6.Appear

7.Disappear

8.Trace

9.Repeat Motion

10.Copy Motion

11.Define Cels

12.Morph

13.Physically Sim.

14.Interpolate

15.Move Forw/Back

16.Deform

17.Move Limb

18.Orient To Path

An

imati

on O

pera

tions

Optimization Results: Detailed View

Black: operation is needed in all minimal sets

Grey: operation is in some, but not all sets


K-Sketch Strikes Best Balance Existing tools omit

Demonstration Trace

K-Sketch Omits Cel-based animation Deformation Precision

ToolSupported Scenarios

K-Sketch 81%

Flash 63%

PowerPoint

47%

TAB Lite 32%


Interface Optimization Works Data-driven

Feature decisions often subjective Scenario data brings objectivity

Before application release Better than frequency counts Find best operations sooner

Widely applicable Code works on any data set Current algorithm parallelizes easily


K-Sketch System

Demo


K-Sketch Key Features Demonstration

Combines many ops in one Visible motion paths

Easy coordination/editing of motions Ability to add relative motions

Correction interface resolves ambiguity Copy motions

Scale up animations quickly Simplified timeline

Easily change timing of events


What Should We Compare With?

Professional tools for different users Flash: Designers PowerPoint: Presenters

Research tools incomplete Only interaction techniques Not our main contribution

Our Strategy Use best tool for situation


Summative Evaluation Goals of “paper-like” interfaces

Fast: Express ideas quickly Simple: Learn fast, focus on high-level

task Expressive: Handle wide variety of tasks

Evaluation Strategy Lab Study 1: How fast, How simple? Lab Study 2: How expressive? Case Studies: How is work affected?


Laboratory Study 1

Evaluate speed and simplicity 16 novices (varied professions,

ages) Within-subjects experiment:

PowerPoint General-purpose Targets novices

Practice task plus two from library


Laboratory Study 1: Tasks Task A

Particle Collision

Task B Dance Maneuver


Study 1 Results: K-Sketch Fast

K-SketchPowerPoi

nt

M SD M SD p-val

1. Task Time (min.) 6.8 3.5 19.6 11.0p<.00

1

2. Fast? (1–7, 1 = fastest)

2.8 1.4 4.5 1.10p<.00

1

K-Sketch was faster (statistically significant) Tasks took 1/3 the time Felt faster


Study 1 Results: K-Sketch Simple

K-SketchPowerPoi

nt

M SD M SD p-val

3. Practice Time (min.) 26.4 4.8 43.5 11.4p<.00

1

4. Easy? (1–7, 1 = easiest)

2.1 1.4 4.3 0.8p<.00

1

5. NASA-TLX (1–100) 32 18 57 16p<.00

1

K-Sketch was simpler (statistically significant) Half the practice time needed Felt easier Lower cognitive load


Study 1 Results: Comfort Level

K-SketchPowerPoi

nt

M SD M SD p-val

6. Comfort Sharing (1–7)

5.2 1.1 4.9 1.1 p=.38

7. Comfort Creating (1–7)

5.5 1.1 4.1 1.3p=.00

2

K-Sketch no worse in sharing with others

More comfortable creating with K-Sketch (statistically significant)


Part. 8: Dance Maneuver PowerPoint

15 min. 24 sec. Told: avoid precision Still perfected paths

K-Sketch 4 min. 38 sec. More comfortable

showing & creating


Laboratory Study 2 Evaluate Expressivity 7 novices (students, various ages) 9 tasks chosen randomly Compare with “The TAB Lite”

“Supports” only 32% of scenarios Two 3-hour sessions with each tool Use pen in both conditions


Study 2: Handling Varied Tasks

K-Sketch handles more important AnimOps Speed improves when AnimOps missing from TAB

-100%

-50%

0%

50%

100%

150%

200%

250%

Face

Sunrise

Gears

Ant

Juggle

Acrobat

Planes

Fairy

Waves

Task

K-S

ke

tch

Sp

ee

d-u

p


Study 2: Creative Improvisation

K-Sketch required less paper sketches/notes 7% of K-Sketch tasks 41% of TAB Lite tasks

K-Sketch required no calculations 5 of 7 participants struggled with math in

TAB

“With K-Sketch, I didn’t have to draw plans or do calculations, which leads me to believe it is a more ‘intuitive’ tool.”


Study 2: Evidence of Expressivity

Nine random tasks with K-Sketch Tasks cover 17 of 18 Animation Ops Speed due to expressivity

Average 61% faster than TAB Only 3 of 63 trials incomplete (12 for TAB)


Case Study #1 “Zero button mouse” design

Prototyping animated feedback Quickly evaluated 25 designs


Case Study #2 High school learning exercises

3 months, 5 classes, 106 students Better recall & motivation Misconceptions clearer


K-Sketch Deployment Download at

http://www.k-sketch.org Over 600 downloads in first 1½

months Send us feedback!

http://www.k-sketch.org/


Generalized Interface Optimization Formally define the coding process

How to assemble high quality library How to manage evolution of primitive

ops Improve handling of speed constraint

Optimize on speed variable Add weights to primitive ops

Build tools for coding & processing Improve scalability

Apply technique to new domains


Sketching Simulations/Games Rough End-user Simulations

For learning and fun Animation is first step

NSF CreativeIT SGER ’07


Manage Ideas Through Life Cycle

Polished Final Product

Collecting & Sharing Notes NotePals

Can’t move data across

Notes with behavior bridge the gap Tools for

transitioning


Contributions Concepts and Techniques

Analysis of animation usage scenarios Novel interface optimization method

Artifacts K-Sketch design and implementation

Experimental Results 3x speed-up over formal tool

(PowerPoint) Helps users avoid focusing on precision Expresses a wide variety of animations


K-Sketch: A “Kinetic” Sketch Pad for Novice Animators

Richard C. DavisSMU School of Information Systems

[email protected]://www.mysmu.edu/faculty/rcdavis

http://www.k-sketch.org

k-sketch: a “kinetic” sketch pad for novice animators

Documents

film animatorksketch

novice animatorsksketch

kinetic sketch pad

particle collisionsksketch

contra danceksketch

machine treadksketch

quick easy animation

cs grad