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