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 paperJS.org 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)


Circles


Stars, RegularPolygons, & Rectangles


Ellipse, Lines, Arcs


.add() & .join()


PointText


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


view.center


CompoundPendulum (pretty darn snazzy if I say so myself)


onMouseDown()


contains()


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 = http://www.paperJS.org

© 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)