JavaScript paper.js (paperJS) tutorial and walkthrough by Brett Paufler

Index Page

After reading the tutorials and the better part of half the documentation on the website, I realized I was missing something (and not just the other half of the documentation that I hadn't gotten to yet):
The solution, to go through all the functions, methods, calls, and properties one by one.  But that would be a waste and go against my philosophy of working towards deliverables until I hit upon the idea of doing it as a tutorial.  We won't get into the issue of the blind following the blind, but all of the following topics are set up in Cut & Paste format with the code evaluated on screen in a sand-boxed canvas area.  So far, this is what I've covered:

PageSetup (how to set up a sample code webpage, the 101 version: simple, basic, easy)


Stars, RegularPolygons, & Rectangles

Ellipse, Lines, Arcs

.add() & .join()


Using PointText for feedback (setting up webpage)

Points & Angles

Points - Simple Methods

Points - Two Point Methods: getDistance()

Full Canvas Sandbox Creation

    Minimal Code for a PaperScript Sandbos (no commentary, code only)

Affine Transform Demo

onFrame() for animations

CompoundPendulum (pretty darn snazzy if I say so myself)



onMouseFunctions() -- Up, Drag, Move

Angles Revisited

HexaGram / Hexagon Game Board Creationg (Screen Tiling)

Circle Bubble Game Board Screen Tiling

BEG: Beg to Differ - Bubble Drop Game Tutorial - 001

BEG: Beg to Differ - Bubble Drop Game Tutorial - 002

BEG: Beg to Differ - Bubble Drop Game Tutorial - 003

BEG: Beg to Differ - Bubble Drop Game Tutorial - 004

BEG: Beg to Differ - Bubble Drop Game Tutorial - 005

BEG: Beg to Differ - Bubble Drop Game Tutorial - 006 (Final Working)

Rasters (using an image file on canvas)

Rasters Revisited

Image Output (converting screen to .png)

Saving Image Output (downloading .png)

GIF Creation (converting .png to gif animation)

Raster Animation (rotations & resizing)

Group (grouping objects)

shadowColor, shadowBlur, shadowOffset (none working)

Style (setting the style on a group)

Gradient (fast cool color gradient effects)

Gradient Animation (getting the colors to change move )

Screen Line Animation #1 (gradient color scrolling up the screen)

Screen Line Animation #2 (splitting the gradient lines above into columns)

Screen Line Animation #3 (additional controls for speed and bandwidth)

Screen Line Animation #4 (adding a center circle with opposite animation sequences)

Drunken Circles - squares oriented around circles

Montana 01 - Loading the Background Images

Montana 02 - Cycling center pictures over background

Montana 03 - Clipping the rasters to desired size using a rectangle mask

Montana 04 - repeated loading of pictures as a pre-load work around

Montana 05 - more masks and moving pictures about

Montana 06
- The Finished Product (great learning experience, but GIFs are the way to go, won't be doing that again anytime soon)

Spiral 01 - Looking for a coding project, how about making a spiral?

Spirals 02 - Continuing on from before, turning the code into a function

Spirals 03 - And by the end of this page, the spirals are pretty kicking

Spiral 04 - Pinwheel Animation... a work in progress that I haven touched in a month going

Back to BrettCode Home

paperJS official site =

© Copyright 2013 Brett Paufler

Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)