p5.js x browserify

p5.jsをbrowserifyで、requireして利用したい場合「Instance mode」という方法で利用します。

var p5 = require('p5');

function sketch(p) {  
  p.setup = function() {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.background(0);
  }

  p.draw = function() {
    p.ellipse(p.mouseX, p.mouseY, 10, 10);
  }
}

var app = new p5(sketch, document.getElementById('app'));  

p5クラスにはスケッチとなるクロージャ、コンテナ要素(ID名、またはNode)を渡してp5のインスタンスを作ります。

クロージャ内では、引数のオブジェクトから、通常Windowのプロパティとなってしまうp5.jsのメソッドを利用できます。