Drawing and Animating with Two.js and Illustrator

Recently, Jono Brandel released a library called two.js for doing two-dimensional drawing using SVG, canvas or WebGL. As the name implies, two.js was inspired by three.js, and its API attempts to mimic that of three.js to an extent. Using two.js, it becomes relatively easy to draw vector shapes using JavaScript, and even to perform basic animations on them.

In this tutorial, I take a look at two.js support for SVG, specifically using SVG exported from Adobe Illustrator. We’ll see how two.js renders this as a line drawing and then we’ll use some of the built in methods for adding effects and motion to the drawing. If you are curious about how to actually use two.js’ drawing API, you can check out the documentation on the GitHub site or this tutorial by Andrew Burgess.

Creating an Illustrator drawing

First things first: I am no digital artist. Sure, I can draw with pen and paper but have never managed to translate that onto the screen (and I am certainly no expert with Illustrator). So, in order to simplify the process, I borrowed a drawing which I then modified. The drawing was of the Miami Heat logo (having grown up in Miami, I’ve been a Heat fan since season one when I got to meet Rony Seikaly). I toyed with the logo a bit to eliminate the rim and fill in the gaps so that, in the end, we’re left with just the flaming basketball.

Once I’d finished the drawing, it was simply a matter of doing a “Save As” and choosing SVG. If you just embed the SVG in an HTML document, the result looks like this:

[iajsfiddle fiddle=”QZQJn” height=”505px” width=”100%” show=”result,js,resources,html,css” skin=”default”]

Rendering SVG with two.js

Rendering SVG using two.js is quite simple. In the below example, I am rendering the straight SVG side-by-side with the two.js rendered SVG. I do this both to show how you render SVG using two.js but also to illustrate that there are slight, but noticeable, differences between the two versions.

[iajsfiddle fiddle=”Zz48Q” height=”505px” width=”100%” show=”result,js,resources,html,css” skin=”default”]

Let’s examine the JavaScript code. First, we selected the DOM element where we want to display the two.js rendered object, an empty div in this case. Next, we create an instance of Two, setting any of the optional parameters we need. In the case of the example, we simply want to set the fullscreen option to false. After two has been instantiated, we select the SVG element from the DOM, tell two.js to interpret the SVG and then call the update() method so that it is all rendered to the screen.

Animating with two.js

Obviously, simply rendering SVG isn’t terribly exciting. However, once the SVg drawing is turned into an object within two.js, you can use some of it’s built in methods and properties to manipulate it and perform some simple animations. In the example below, I am modifying the opacity on each element of the drawing and then modifying the scale of the entire group all within an animation loop. I’ll cover each line in detail in a moment.

[iajsfiddle fiddle=”HJKA7″ height=”505px” width=”100%” show=”result,js,resources,html,css” skin=”default”]

The first portion of the JavaScript code is pretty much the same as above, although I have removed the option for setting fullscreen to false as it isn’t needed for this demo. Instead of calling the update() method right away though, I first set some variables. The first is an array of all the object keys in our drawing. Two.js converts my SVG drawing into a type of object called a Group which provides a number of properties and methods, of which, I will use the children method to get all the sub-objects it contains (each of which also appear to be wrapped as Group). After that I get the first child within the Group and I set the entire Group to an opacity of 0.

The next portion, where I bind to the update event, is where the animation loop is created. First, I loop through each sub-Group of our image and, one-by-one, turn up the opacity until it hits 100%. This is how each portion of the Heat logo appears to fade-in individually. Once that is complete, I then scale down the entire parent Group until it hits 0. Finally, once both portions are complete, I set everything back and start the process all over again.

There most definitely ways to streamline and improve this JavaScript code, so, if you have any, please feel free to suggest them in the comments (keep in mind this was a fun experiment with a new library).

Where to go from here

I’ve only really scratched the surface of using two.js, but hopefully I’ve given you a sense of how you can use it and even use your Illustrator skills with it. As mentioned earlier in the article, two.js has a good, if short, usage guide. Also, NetTuts has a tutorial on drawing with two.js. The library is very new, so I expect there will be more documentation and articles to come.