-
Notifications
You must be signed in to change notification settings - Fork 0
Home
chuck.js is a JavaScript library designed to do much of the heavy lifting of animating in HTML5's canvas element in the two-dimensional context. 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.
Animations in chuck are the result of interactions between four primary JavaScript objects:
A Character is an entity drawn on the screen by rendering one or more sets of drawing instructions I'm calling -- in homage to old-school animation -- cels.
There are a couple special kinds of Character objects that inherit Character's properties and add new ones:
- Button: A touchable Character that triggers any number of events.
- Slider: A touchable, draggable Character that represents a value within a range. Its appearance can change based on events, and it can trigger new events.
The Timeline object manages state for all Characters in the animation. It's chuck's nerve center.
An instance of Timeline keeps a reference to every other object in the animation. It keeps a count of all Characters, all their cels, and runs the math to figure out how many frames are needed to complete the animation and which Character appears on each frame.
One of Timeline's important functions is to manage an array of breakpoints: moments on the timeline where action pauses while information can be explained or digested.
The Animator object redraws the screen in short intervals to simulate movement.
The EventDispatcher object manages state and logic for all events. You can think of it in the abstract as a DOM within the DOM.
User events that target the canvas element have no way to distinguish which regions of the Canvas were touched. Without EventDispatcher to translate things, for example, the browser would fire a button's click handler function whenever a user clicked on the Canvas, whether or not the user actually touched the button.
One of EventDispatcher's biggest jobs is to test whether the mouse is within the boundary defined by a Character, then respond accordingly.