Paper.js is vector graphics scripting framework that runs using HTML5's Canvas. It was originally designed in reference to Scriptographer, a tool built to extend Adobe Illustrator's capabilities using JavaScript. With the advent of Adobe CS6, Scriptographer is no longer supported, but Paper.js can now implement much of the same functionality that it's progenitor provided.
If you aren't familiar with the difference between raster and vector graphics:
Basically raster graphics are just images described by bitmap, while vector graphics are described using the mathematics of polygons. They are represented by the Adobe programs Photoshop and Illustrator, respectively.
- Demonstrate some of the capabilities of Paper.js, including:
- Creating simple paths.
- Creating a simple animation.
- Working with polygons, circles, and path smoothing.
- Creating simple user drawing tools.
- Changing paper objects' styling, including color, stroke, and positioning.
- Fork and clone this repository.
- Create a new branch for your work.
npm installdependencies.- Install paper with
npm install paper. - Run
grunt serve, and navigate your browser to http://localhost:8080.
If you run into any problems, excellent documentation is provided at this site. There are also instructions for installation through a download.
You guy's better be ready...
The most important part of incorportating Paper.js into the system of dependecies used at GA is requiring paper in the global scope. Paper is exposed with a require in the root directory index.js. This allows us to access paper anywhere within our code.
In order to get Paper to work, we need to create our first paper scope object on document ready. You can see in assets/scripts/index.js that the first method invoked is paper.install(window). After this, we can then create different event handlers that can then be called to start whatever drawing we wish to create:
- Simple line
- Rotating rectangle and smoothing
- Circles and anchor points
- A user drawing tool!
- Describing, copying and deleting styles
Source code distributed under the MIT license.