Sketch-Based Effect Lines for 2D Animation Creation

1. A static depiction and input technique for 2D animations Shin Takahashi (Univ. of Tsukuba) Yoshikazu Kato (Tokyo Tech) Etsuya Shibayama (Tokyo Tech)

2. Background • 2D-Animation • Create attractive presentation slide or webpage • PowerPoint, Macromedia Flash, etc. • Animation effects • "slide-in", "slide-out", etc.

3. 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

4. Problem • Hard to imagine the animation from texual representation

5. Our approach • Visual representation of animation effects • Sketch-based interface • Without menus or dialog-boxes we use “effect lines!”

6. Effect lines • Used in comics • They depict • motions, feelings, sounds, etc.

7. Our idea • Creating animations by drawing effect lines

8. “Move” “2D-Rotation” “Vibration” “Expanding” Examples of our effect lines : direction of drawing

9. “Move” “2D-Rotation” “Vibration” “Expanding” Examples of setting parameters Vibration width Move length direction direction Rotation degrees Default size direction

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

11. Definition of effect lines EffectLine<Strks> →Effect<Type,Params> Animation : <Object, Effects> TargetObj, Strks, Type, Params (x1,y1) Move (x1,y1) rotate Θ Θ

12. effect lines in storyboard • static representation of animation

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

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

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

16. Demo Introduction to "KO-KA"

17. 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.

18. 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

19. 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, …}

20. 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?

21. 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