Worldwide Sites

You have been detected as being from . Where applicable, you can see country-specific product information, offers, and pricing.

Change country/language X

  • United States

    We have redirected you to an equivalent page on your local site where you can see local pricing and promotions and purchase online.

    Stay on our U.S. site

Keyboard ALT + g to toggle grid overlay

Motion Amplifiers: Sketching Dynamic Illustrations Using the Principles of 2D Animation

Rubaiat Habib, Tovi Grossman, Nobuyuki Umetan, George Fitzmaurice

ACM SIGCHI Conference on Human Factors in Computing Systems
2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

[Name], Title, Company

In our earlier work, Project Draco, our goal was to make animation as easy as sketching, and realize the potential of dynamic drawing as a new, emerging, and powerful medium. Motion Amplifiers augment that line of work by bringing the exaggerated dynamics of classical 2D animation into dynamic drawings.

The master animators of Disney developed the 12 principles of animation that turned hand-drawn 2D animation into a communicative, sophisticated art form. Here is a great visualization of those principles by Centos Lodigiani.

The basic design philosophy behind our system is that complex dynamics emerge by composing simple, understandable animation principles.

We present a sketching tool for crafting animated illustrations that contain the exaggerated dynamics of stylized 2D animations. Our design formulates the principles of animation as a set of motion amplifiers that can be combined at will. The key idea in our design was to leverage the language of animation as a natural way to think and communicate with computers through freeform sketching. The goal of our design is to increase one's ability to modularize the fundamental concepts of 2D animation and combine them together in new and powerful ways. By representing the principles of animation in a simplified manner, our system offers users, particularly those with no prior experience in animation, the opportunity to rapidly explore animation effects and produce expressive animated illustrations.

A side-by-side comparison shows what each amplifier adds to an animation.

The image alignment should visually flow down the page. You may use full-width images, or align images to the left or to the right of a paragraph. The full-width image pattern is used to feature larger images in your story. Use images of people at work or in action to show the customer’s work in context. Use the caption to explain how the image relates to the story.


Notes on Animation Style vs. Principle

"[In animation] there are so many areas to be explored… effects to be created, new wonders to be seen… someone or some group of artists will surely discover new dimensions to delight and entertain the world." - Johnson & Thomas (In the "Illusion of Life")

The motion amplifiers are attributed to the principles of animation that had been devised and nurtured by Disney animators in the 1940s. Beyond Disney, master animators and studios across different cultures and eras have devised their own animation styles and techniques. For instance, the 2D animations by Ryan Woodward depict a distinct fluid-like motion transitions from frame-to-frame. Is this phenomena considered as an animation principle, or, is it a style? What is the boundary between animation styles and principles? We conjecture that the principles of animation present a particular artistic style. The characterization of artistic styles (visual and motion design) into concrete motion design tools is an interesting avenue for future exploration. However, such characterization is often very challenging.

The principles of animation exemplify how a complex, stylized art form can be decomposed into understandable chunks. Seymour Papert refers to this as breaking down a complex problem into "mind-size bites," which makes knowledge more communicable, more assimilable, more simply constructible. User interfaces for animation that leverage these “mind-size bites” as a natural vocabulary to understand and compose complex animations might have powerful influence on how animators think, learn, and explore. To elevate this art form to an even higher level, clearly this characterization is inadequate. Can we design tools that not only explain existing principles but also inspire animators to innovate new ones? This remains as an open question for us and our readers to consider.

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Fig 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Fig 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Section Title

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
  • List Item 5
  • List Item 6
  • List Item 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Abstract

We present a sketching tool for crafting animated illustrations that contain the exaggerated dynamics of stylized 2D animations. The system provides a set of motion amplifiers which implement a set of established principles of 2D animation. These amplifiers break down a complex animation effect into independent, understandable chunks. Each amplifier imposes deformations to an underlying grid, which in turn updates the corresponding strokes. Users can combine these amplifiers at will when applying them to an existing animation, promoting rapid experimentation. By leveraging the freeform nature of sketching, our system allows users to rapidly sketch, record motion, explore exaggerated dynamics using the amplifiers, and fine-tune their animations. Practical results confirm that users with no prior experience in animation can produce expressive animated illustrations quickly and easily.


File downloads

  • Additional files

    Datasets and sample images. Python source code.

  • Media kit files

    Paper, Video, Images and Datasets

Related Publications

Related Projects

Heading

Descriptive text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua in reprehenderit.

Heading

Descriptive text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua in reprehenderit.

Heading

Descriptive text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt magna aliqua in reprehenderit.