Folio.js

The tweezers, toothpick, and corkscrew for Paper.js and Scriptographer

Folio.js is a library for Paper.js and Scriptographer. Folio.js is a collection of functions for supporting animations, rudimentary 3D, additional Path items and lastly a structured framework/chain of operations similar to that of Processing, OpenFrameworks, Cinder, et. al.

Not all of the code used in Folio.js was created by me but credit and links are given where credit is due.

Additional details and explanation can be found on my blog.

Examples

http://frederickk.github.io/folio.js/

I've moved the Folio.js examples to gh-pages branch. In the near future I will depreciate all support for Scriptographer. Until then, Scriptographer examples can be found /examples/scriptographer.folio.

To run the Scriptographer examples, simply add the /examples/scriptographer.folio as a repository. The examples will then appear in your Scriptographer palette.

Usage

A full-size canvas element is created by Folio.js upon loading. Otherwise, the first found canvas element is used.

Paper.js

You can find the library for Paper.js within the distribution/ folder.

/distribution/paper.folio.js
/distribution/paper.folio.min.js

I recommend a file structure as such:

/root/paper.folio.template.html
└── scripts/paper.folio.template.js
	└── // any additional Paper.js scripts
└── js/
	└── // additional JavaScript libraries JQuery, Angular, etc.

Load the Folio.js namespace.

var f = folio;

To access other features quickly you can use additional shortcuts for namespaces

var f3d = f.F3D;
var fio = f.FIO;
var ftime = f.FTime;

Scriptographer

The feature set for Scriptographer. is "slightly" different from that within Paper.js, you can find the library within the distribution/ folder.

/distribution/scriptographer.folio.js
/distribution/scriptographer.folio.min.js

Simply drop it in to the same folder as your other Scriptographer scripts and add the following lines to any script you want to use the library in:

include('../PATH/TO/scriptographer.folio.js');

Then load the Folio.js namespace, just like above.

As ridiculous as it seems, I've ported over support for animations within Scriptographer. The reason is two fold:

• why not have animated clocks or physics simulations in illustrator

• prototyping an idea for Paper.js can sometimes be faster using Scriptographer.

function Update(event) {
	// add whatever you want to be animated
};

// add this to the very bottom of your script
var frameRate = 12; // default frameRate is 12 FPS
Animate(
	true, // true if you want to animate the Update() function
	frameRate // the framerate
);

Template & Framework

Paper.js

The Folio.js template takes advantage of injecting Paper.js directly into the DOM. This enables the possibility of sharing JavaScript variables created in the HTML directly with Paper.js and visa versa.

Within /templates/paper.folio are a number of files to be found paper.folio.template.html (and paper.folio.webapp.template.html). In addition to the HTML files is a script template file /scripts/scripts/paper.folio.template.js This includes all of the chain of operations methods Setup(), Update(), and Draw() as well as hooks for Mouse and Keyboard interactions.

When using the template and/or renaming it be sure to uppdate all corresponding filenames.

Scriptographer

Within /templates/scriptographer.folio are a number of files to be found scriptographer.folio.template.js. This include all of the chain of operations methods Setup(), Update(), Draw(), as well as the invocation options for animations.

Documentation

A (not yet) comprehensive documentation of Folio.js functions can be found in the documentation/ folder. You can build documentation by following the build steps below, once inside the Folio.js directy simply enter:

$ grunt doc

Building

Folio.js uses Grunt 0.4.1 to build the library. If you don't have Grunt installed you'll have to do so, and I recommend installing it globally. You might need to use sudo npm, depending on your configuration.

$ npm install -g grunt-cli

Using terminal, enter into the Folio.js directory.

$ cd folio.js

Then you'll have to install dependencies with npm

$ npm install

Once you've installed all of the dependencies, to build the library for both Paper.js and Scriptographer simply enter:

$ grunt

To only build for Paper.js

$ grunt paper

or only for Scriptographer

$ grunt scriptographer

Results are built into the distribution/ folder

Alternatively type grunt watch to have the build run automatically when you make changes to source files.

$ grunt watch

Note grunt watch doesn't run unit tests.