View Live Demo (in Chrome) →
The tool is very basic; it lets the user draw over each frame of the
video, stores each frame in localStorage, and uses Popcorn.js to play back the frames over the
video on the
canvas. I used Mike Taylor‘s homepage as a starting point for the drawing.
Animators frequently use rotoscoping workflows provided by Flash, After Effects, or another production tools. There is not currently a good workflow for artists to ship HTML5 animations. The move to HTML5 animation for playback will require a new set of authoring tools for artists. I had a chance to test this prototype out with Mak‘s (one of the Bocoup Coworkers from Gradient Games) graphics tablet, and it worked great!
timeupdate event is very low resolution (roughly (unreliably) 10 FPS ). I am evaluating writing an independent timer, and using the new Frame Rate API which you can turn on in chrome’s about:flags.
This tool should also be implemented with vector based storage (as opposed to the current raster based storage), a timeline/keyframe UI, layers, and a better drawing tool. I am going to try to continue working on this tool over the next couple of weeks, and begin implementing these features.
If you are a developer, entrepreneur, or are generally interested in working on tools like this, get in touch with Bocoup to talk about working together. We would love to have an opportunity to pursue this tool as a product.
Get the source on Github.