p5.js を instance mode で使う

グローバルに展開される関数

p5.js は setup() が実行された時に、fill() や　ellipse() などの各関数をグローバルに展開しようとします。

これらの関数は他のライブラリと共存させた時や、自作の関数名とバッティングしてしまう可能性があるため、問題になることがあります。

instance mode

これを避けるために p5.js では instance mode と呼ばれるモードが用意されています。
まず通常の書き方で、マウスを動かすと円が描写されるようなコードを書いてみます。

function setup() {
  createCanvas(600, 400);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

これを instance mode で書きなおしてみます。

const s = (p) => {
  p.setup = () => {
    p.createCanvas(600, 400);
  };

  p.draw = () => {
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  };
}

const myp5 = new p5(s);

p5 をインスタンス化して、引数に関数sを渡すように変更しました。

関数s内では先述のコードと同様に setup(),draw() の処理が書かれていますが、p5 で用意されている関数、プロパティは全て引数で渡されてきたオブジェクト p を介して実行できるようになりました。

参考: p5.js overview#instantiation--namespace