Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

Download

Development Version
Uncompressed with comments about 128kb

Production Version
Minified using Closure Compiler about 50kb

Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github.

Overview

Basic Usage

In order to start any of these demos you'll want to download two.js and add it to your <html> document. Once downloaded add this tag to the <head> of your document: <script src="./path-to-two/two.js"></script>. When you visit the page, you should be able to open up the console and type Two. If this returns a function then you're ready to begin!


Drawing Your First Shapes

Before we get into all the fancy animating it's good to get a feel for how to make shapes in two.js. In order to do this we need to have an instance of two. This sets up a dom element that contains either an svg or canvas element to add to the webpage. The two object has a scene which holds all shapes as well as methods for creating shapes.

For a list of all properties and construction parameters check out the documentation.


Shapes and Groups

Adding shapes to groups makes managing multiple shapes easier and more sane. Group's provide an easy way to move your content through translation, rotation, and scale. These operations emit from the coordinate space (0, 0). In the example below we can see that the initial orientation of the circle and rectangle changed from the first example. These shapes are oriented around (0, 0), which allows us to transform the group around the centeroid of the shapes. In addition Group's styling operations trickle down and apply to each shape.

All rendered objects in two.js are a child of a group. Every two instance has a property scene. This property is a root-level Two.Group and can act as a camera through the same transformations described above.



Adding Motion

Finally, let's add some motion to our shapes. So far the examples use two.update(); to draw content to the screen. The instance of two.js has two particular methods for animation. The first is two.play(); which calls two.update(); at 60fps. This rate, however, will slowdown if there's too much content to render per frame.

The second method is two.bind(); This method takes a string as its first parameter indicating what event to listen to and a function as its second argument delineating what to do when the event described in the first parameter happens. To sync a function with the animation loop simply invoke two.bind('update', referenceToFunction); as outlined below:

For a complete list of events that can be bound to an instance of two check out the documentation.


Examples

For even more examples check out the example page here.

Projects

For even more projects and information to submit your projects built with two.js check out the project page here.

Documentation


These are the five main classes that a typical developer will come across with when using two.js, however the project is built with a few more classes behind the scene. If you're interested in the nitty-gritty then it's recommended to check out the source.

Credits

Two.js is not possible without these great contributions to JavaScript: