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

【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