【p5.js】任意の場所に複数のcanvasを設置する方法

p5.jsで複数のcanvasを指定した場所に設置する方法をご紹介します。

イメージ動画は以下の通りです

上記はp5.jsで作成した４つのcanvas(春・夏・秋・冬)を指定場所に配置したものです。

こんな感じで、p5.jsで複数の場所にcanvasを設置する方法をご紹介します！

親要素を作成

canvasの親要素を予め準備しておきます。ここでは２つ用意しておきます。

<div id="container1"></div>
<div id="container2"></div>

配置先を指定して、インスタンス化

親になるidを指定して、インスタンス化すれば完成です！
サンプル例は以下の通り。

    <script>
      var sketch1 = function(p) {
        p.setup = function() {
          p.createCanvas(100, 100);
          p.background(0);
        };

        p.draw = function() {
          p.fill(200);
          p.stroke(0);
          p.rect(20, 20, 20, 20);
        };
      };

      var sketch2 = function(p) {
        p.setup = function() {
          p.createCanvas(200, 200);
          p.background(200);
        };

        p.draw = function() {
          p.fill(0);
          p.stroke(0);
          p.ellipse(50, 50, 50, 50);
        };
      };

      new p5(sketch1, "container1");
      new p5(sketch2, "container2");
    </script>

実行結果

こうすることで、指定した場所にcanvasを配置し、p5.jsで好きなような描画が可能になります！

参考URL

• 公式（p5.js)：Instance Container