Drawing and Animating with Two.js and Illustrator
The modern web is always changing, and this article is more than two years old.
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”]
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 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.
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.