Introducing Paper.js

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It was created by Jürg Lehni and Jonathan Puckey and is based on Jürg’s previous Scriptographer—a scripting environment for Adobe Illustrator. Twitter: @PaperJS

Jürg Lehni. (Via @JuergLehni

Jonathan Puckey. (Self portrait via My Modern Met) @JonathanPuckey

The first thing you’ll want to do is download this template package which includes a basic folder structure and some code to get you started— Here’s what you’ll find inside:

Open the index.html file both in a browser and in your favorite text editor. You’ll see that we’re coding directly into index.html, rather than into a separate .js file. You don’t have to follow this convention, but here’s why the template does:

1. Paper has its own dialect of JavaScript—called PaperScript—that adds a few goodies to make animating easier. The examples on the website are written in this dialect so it seemed prudent to follow the convention.

2. You may indeed have PaperScript files that are external to your HTML file. In order to accomplish this Paper uses Ajax to fetch your PaperScript file, parse it, and render it.

3. However, if you try running this off of your desktop some browsers flag this as a potential vector for cross-site scripting attacks (Chrome included), preventing Paper from loading your external PaperScript.

So we’ll just stick with Paper convention.

Examples and Tutorials

Paper has a great examples gallery. Let’s have a look at a few of those, play with their code, and we’ll touch on topics like vector geometry and Paper’s concept of “objects existing on the canvas” once and it’s there forever. Compare this to Processing.js where objects simply exist in memory and it’s the job of the programmer to place them on the canvas for rendering.

Let’s get to work!