p5.jsはその書き方に着目すると2パターンあります。
まず公式のGet Startedページに記載されている書き方です。
後で登場するインスタンスモードと区別するためにこの記事ではグローバルモードと呼ばせてください。
function setup() {
createCanvas(100, 100);
}
function draw() {
background(0);
fill(100);
noStroke();
ellipse(width/2, height/2, 50);
}本家のProcessingの書き方にできるだけ似せており非常に書きやすいです。
簡単にsketchを書きたい場合、プロトタイプや研究用として暫定的に使いたい場合、他のJSライブラリを使わない小規模なサイトの場合に向いています。
しかし、グローバル領域を汚染している(windowオブジェクトの中に直接p5.jsが定義されている)ので、他のJSファイルや今後書いていくJSファイルと定義がコンフリクトする可能性があり、プロダクションビルドではあまり使いたくない方法です。
公式のInstance Containerページに記載されています。
<div id='container'></div>const sketch = function(p) {
p.setup = function() {
p.createCanvas(100, 100);
}
p.draw = function() {
p.background(0);
p.fill(100);
p.noStroke();
p.ellipse(width/2, height/2, 50);
}
}
new p5(sketch, 'contaienr');グローバルモードと比べると、表示結果は同じなのですが、明らかに記述量が多く書きづらいですね。
ただしこの場合、グローバル領域を汚染しているのはp5という関数のみです。
なので、こちらは少し書きづらいけど、安全な書き方です。さらに、p5を実行する場所も指定できます。
注意点として、window直下にsetupもしくはdraw関数を定義しないことです。
もし定義してしまうと、インスタンスモードではなくなりグローバルモードになります。
ちなみにBabelなどのES6環境下であれば、functionを省略できる文、少しコード量は減ります。
const sketch = p => {
p.setup = () => {
p.createCanvas(100, 100);
}
p.draw = () => {
p.background(0);
p.fill(100);
p.noStroke();
p.ellipse(width/2, height/2, 50);
}
}ざっと考えると以下のパターンが考えられます。
小規模なサイトや他のJSライブラリを使っていなく、自由にJSを書ける環境であればおすすめです。
しかし、大概の本番サイトの場合、グローバル汚染するのでおすすめしません。
ハック的なやり方です。
ただサイト構造やサーバーサイドを設計する必要があり、iframeをページ内で扱う必要があるため、扱いづらく複雑です。
iframeを前提とした環境を整備できるのであれば、おそらく一番スマートなやり方ですが、導入の敷居が高いです。
書きづらさを除けば、導入の敷居が低く、グローバル汚染もほぼなく一番現実的な方法です。
いきなりインスタンスモードで書いてもいいですが、ローカルや公式のp5.jsのブラウザ実行環境でグローバルモードで最終的なコードを完成させたあと、インスタンスモードに変換するのがおすすめです。
setupかdraw関数をグローバルスコープで定義するとグローバルモードになる、それ以外だとインスタンスモード