A static depiction and input technique for 2D animations

Shin Takahashi (Univ. of Tsukuba)Yoshikazu Kato (Tokyo Tech)

Etsuya Shibayama (Tokyo Tech)

Background• 2D-Animation

• Create attractive presentation slide or webpage• PowerPoint, Macromedia Flash, etc.

• Animation effects• "slide-in", "slide-out", etc.

Making animations• Keyframe-based creation

• keyframes + interpolation• difficult, tedious, hard to learn, …

• Library-based creation• applying effects in animation libraries• with menus and dialog boxes

Problem• Hard to imagine

the animation from texual representation

Our approach• Visual representation of animation

effects• Sketch-based interface

• Without menus or dialog-boxes

we use “effect lines!”

Effect lines• Used in comics• They depict

• motions, feelings, sounds, etc.

Our idea • Creating animations by drawing

effect lines

Examples of our effect lines•“Move”

•“2D-Rotation”

• “Vibration”

• “Expanding”

: direction of drawing

Examples of setting parameters• “Move”

• “2D-Rotation”

• “Vibration”

• “Expanding”

Move length

Rotation degrees

Default sizedirection

direction

direction

Vibration width

Combining animation effects• “2D-Rotation” + “Move” 　

“Rolling”

• “Vibration” + “Move” “Undulating”

Definition of effect linesEffectLine<Strks> → Effect<Type,Params>

TargetObj, Strks, Type, Params

Move (x1,y1)

rotate Θ

Animation : <Object, Effects>

(x1,y1)

Θ

effect lines in storyboard• static representation of animation

effect lines and keyframe• before or after? : keyframe

: motionEffect lines

Path drawing

Prototype system “KO-KA”• Java + SATIN Toolkit

The view of "KO-KA"

Story viewEdit view

DemoIntroduction to "KO-KA"

Related work(1/2)• Researches for static depiction of

motions.• Speed lines [M.Masuch et al.99]• Motion lines [A.Lake et al. 2000]• Cartoon blur [Kawagishi et al.03]

• They are only to depict motions.

Related Work(2/2)• Drawing paths to create animations

• e.g. Motion Doodles: An Interface for Sketching Character Motion, Matthew Thorne et al. SIGGRAPH2004

• specialized to character motion

constraints?• animation effect

= temporal/spatial constraints on parameters of graphical objects

• effect lines = their visual representation

• e.g.

vibration(rect(x,y,w,h)) →　　 { rect(x,y,w,h) | x = x0 + vib(t), y = y0, …}

Future Work• more expressive effect lines

• spatial constraints• effects for group of objects• combined effect lines• multi-step animation on a picture

visual constraint programming?

Summary

• effect lines to apply animation effects• The user can easily

• set animation effects to the target object• recognize the animation on static view• combine animation effects