Paper.js: Juerg Lehni and Jonathan Puckey

Curator: Stewart Smith
date: November 8, 2011
Categories: Book Design
Tags: HTML5, Illustrator, JavaScript, paper, Scriptographer

Imagine if Adobe Illustrator were free. And open source. And ran in your browser. And produced interactive, Flash-like animations. All through JavaScript. Here in 2011 browsers just aren’t powerful enough to tick all those boxes at once, but with insanely clever new frameworks like Paper.js the road map has been drawn. 


The Paper website describes Paper.js as “an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.”

This is not the first rodeo for Paper’s creators Jürg Lehni and Jonathan Puckey, who collaborated on several iterations of Jürg’s plug-in for Illustrator, Scriptographer. Jürg is also the creator of Bootstrap, a more general Javascript library for web development. (Think jQuery, but cleaner; more elegant.) The pair bring those years of JavaScript experience and wisdom to Paper.js, placing it far ahead of other entries in the field.


Both Jürg and Jonathan also boast impressive graphic design portfolios, and that visual sensitivity not only makes them empathetic toward the needs of Paper users but trickles right down into their code’s precise typographic whitespace and the uncompromisingly consistent naming of variables. Design is not merely visual after all. It is a problem-solving and organizational process that can and should scale comfortably from arranging visual hierarchies to crafting the inner gears of complex software. Particularly when those inner gears act as the signage that a new generation of visual makers will have to navigate in order to truly take advantage of the tool. This gem from authors Abelson and Sussman is often shared amongst coders: “Programs must be written for people to read, and only incidentally for machines to execute.”


All of the examples on Paper’s website allow visitors to not only view the source code, but to experiment and re-execute it right in the browser. The above example, Spiral Raster, reads data from an image file and draws a spiral from the canvas center outward, varying the stroke width ever so slightly to render the image.

Clicking the “Source” button in the upper-right corner switches Paper into the editor mode.

Nyan Rainbow is another fun animation example—a play on the popular Internet meme Non-stop Nyan Cat. (Beware, just like its namesake the Nyan Rainbow example employs sound.) Again, just click the “Source” button and you can begin poking around the code. When you’re ready, click “Run” to get immediate feedback on how your edits have altered the animation.

Paper is brand new and if it has a sore spot it’s that there aren’t many examples in the wild yet to learn from. This screen grab is from a site announcing the upcoming “Toys, Tricks & Tools” conference at the University of Arts and Design in Karlsruhe, Germany, which uses Paper to render a bespoke typeface.

Keep an eye out for new works using Paper.js. More is certainly on the way. You can join the first wave of Paper developers by jumping in at http://paperjs.org.

blog comments powered by Disqus