Skip to content

Latest commit

 

History

History
31 lines (24 loc) · 1.68 KB

README.md

File metadata and controls

31 lines (24 loc) · 1.68 KB

animation-tool

Description

This is a tool to create short HTML5/Javascript animations, based on the animation app demoed in Bret Victor's Animation App Demoed in the Talk Inventing on Principle.

Though my app won’t be identical and will be ported to the web/a mouse/keyboard input device, I am trying to port a limited version of this app to the web.

To use my app, a person would upload the images (.pngs and .jpegs) that they want to animate. One image can be set as the background, and the others can be animated individually. Once the objects are loaded, a user can select an object to animate. Once an object is selected, that object “sticks” to the mouse. When the user is ready to record, they can record an animation of the motion of that object by gesturing with the mouse. Then the user can go back and select another object to animate, and have the animations run simultaneously.

Extensions

• Support creation and animation of text (kinetic typography!) • Keyboard shortcuts to select objects to animate and move back and forth in the timeline. • Allowing for sprites to be changed during the animation. • Adding rotation modifier so rotation of an object can be animated as well. • Adding scale modifier. • Make this work with touch. • Export to video. • Change the sensitivity of objects to mouse motion or adjust the amount of “smoothing” done by the program • Having multiple layers in the background. • Ability to add audio/music. • Create a drawing tool and allow people to animate what they draw.

References

http://ramkulkarni.com/blog/record-and-playback-drawing-in-html5-canvas/

Libraries Used

  • jquery
  • jquery ui
  • Reveal Modal by Zurb