Posted at

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

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

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

gzjs2.gif

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

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


親要素を作成

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

<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>

実行結果

スクリーンショット 2018-12-10 14.18.40.png

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


参考URL