#angular-p5.js

AngularJS wrapper for p5.js, a client-side library for creating graphic and interactive experiences

##Usage

###p5 directive

Define a p5.js sketch as a service - p5.js will run in "instance mode". Here's one named mySketch:

angular.module('example',['angular-p5']).factory('mySketch',function(){returnfunction(sketch){varx=100;vary=100;sketch.setup=function(){sketch.createCanvas(700,410);};sketch.draw=function(){sketch.background(0);sketch.fill(255);sketch.rect(x,y,50,50);};};});

Then tell the p5 directive where to find it:

<p5sketch="mySketch"></p5>

You can also bind the sketch to scope data, like sketch="{{sketch}}". Then you can switch which sketch the directive is pointing to on the fly. Angular-p5 will automatically destroy the old sketch and start up the new one.

###p5 service

Angular-p5 also includes an injectable p5 service, for when your sketch uses any p5.js objects like p5.Vector or p5.Image:

.factory('mySketch',['p5',function(p5){returnfunction(sketch){varvelocity=newp5.Vector(0,2);
...

This points to the same reference as the global p5 object that lives on window, but we all know it's better this way.

##Example

To run the example,

git clone https://github.com/wxactly/angular-p5.js
cd angular-p5.js/
bower install

And open /example/index.html in a browser.

##Demo

http://wxactly.com/angular-p5.js/example/