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 Resonate.io) @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—paperTemplate.zip. Here’s what you’ll find inside:
index.html file both in a browser
and in your favorite text editor.
You’ll see that we’re coding directly into
rather than into a separate
You don’t have to follow this convention, but here’s why the template does:
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
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!