JavaScript Rotoscoping Tool

I had some free time on the train back up from Buttercamp this weekend, and got to work on a demo for a HTML5 rotoscoping tool that I’ve been kicking around in my head:

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!

What’s Next?

The video 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.