parisminton / chuck.js

A JavaScript library for animating in Canvas, with helpful features for makers of infographics.

chuck.js

chuck.js is a JavaScript library designed to do much of the heavy lifting of animating in HTML5's Canvas element. It focuses on features that are valuable to makers of infographics, like being able to pause at specific points on the timeline, working with explainer text, and easy setup of user controls like buttons and scrubbers. It works with Mike Swanson's Ai->Canvas Export Plug-In for Adobe Illustrator.

It's inspired partly by a desire to help the advances in visualization tools at news organizations catch up to the advances in tools for data sharing and acquisition. And partly because I've always loved animation, and bringing my graphics to life is something I've wanted to do for a long time.

Right now there's a small but powerful set of software for rendering two-dimensional motion on the Canvas that includes the plug-in mentioned above and

• processing.js by John Resig, based on the original language by Ben Fry and Casey Reas | source
• EaselJS by Grant Skinner | source
• tween.js by sole and Mr. Doob | source
• gury by Ryan Sandor Richards | source
• KineticJS by Eric Rowell | source

chuck is my contribution for the interaction developer who frequently has to present information sequentially alongside blocks of text that need to change in sync with the action. They've probably already got vectors, but need them to move.

As advanced as some of these libraries' features are, we're all just in our infancy -- like the Canvas medium itself. That's exciting and encouraging.

This is just a collection of code, so it doesn't save you the hard work of making the art on the front end. Once you've exported your artwork as .html files using the plug-in, the included shell script converts the files into chuck object instances. Those instances are powered by logic that handles the mechanics of animating them and putting them in sequence on a timeline.

You can see my progress in this example.

Here's the instruction manual.

And if the changelog interests you, knock yourself out.

I'm continually growing as a programmer, and I make -- and fix -- plenty of mistakes. This code will change as I learn from them.

chuck.js's Issues

Bug: Calling 'show()' on one Button instance fires on all other instances

Perceived solution: Something's in Button.prototype that shouldn't be.

Actions need to be reset at the end of the animation

Perceived solution: When an Action is pushed to Event_Dispatcher.triggers, its opposite is queued to fire on the last frame.

• Should these instructions be stored in Event_Dispatcher or Character.reset()?

Bug: Animation jumps four frames with each click of the forward, back buttons

Problem: Four Characters with four separate click events means the handler is being fired four times for every click.
Perceived solution: One handler per event. Collect the instructions for each event into one function before adding the listener.

Finalize `Character.startsOnFrame()`

• sets Character.starting_frame
• fires Character.show.onFrame()

Bug: Fix the redraw

Problem: Screen redraws on mousemove, advancing the animation by one frame.
Perceived solution: Increment current_frame at the beginning of Animator.animate(), not the end.