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 size direction Vibration width

Combining animation effects “ 2D-Rotation ” + “ Move ”  “ Rolling ” “ Vibration ” + “ Move ”  “ Undulating ”

Definition of effect lines EffectLine → Effect TargetObj, Strks, Type, Params Move (x1,y1) rotate Θ Animation : (x1,y1) Θ

effect lines in storyboard static representation of animation

effect lines and keyframe before or after? : keyframe : motion Effect lines Path drawing

Prototype system “ KO-KA ” Java + SATIN Toolkit

The view of "KO-KA" Story view Edit view

Demo Introduction 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 = x 0 + vib(t), y = y 0, … }

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