p5js:tips:複数canvas [Design Workshop]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== 複数キャンバス ======
p5の最初のtemplateではcanvasを複数枚準備することができません。初期状態ではp5インスタンスがglobalで宣言するためです。そこで、p5インスタンスにたいして個別の定義（setup, draw)を準備してあげることで、複数枚のキャンバスを準備することができます。以下サンプルです。
<WRAP group>
<WRAP half column>
<file html index.html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
    <p>
      こちらは1枚目のキャンバス
    <div id="canvas1"></div>
    </p>
    
  <hr>
  
    <p>
      こちらは2枚目のキャンバス
  <div id="canvas2"></div>
  </p>
  </body>
</html>

</file>
</WRAP>

<WRAP half column>
<file js sketch.js>
/*
いままで global 宣言された p5 インスタンスを使ってきましたが、複数のキャンバスを使うためにはその p5 インスタンスを独自に定義する必要があります。ポイントは各キャンバスの記述には必ず頭に sketch をつける。ってことだけ覚えておけばよいかと思います。
*/

// 1つ目のキャンバス設定
var s1 = function (sketch) {
  sketch.setup = function () {
    let canvas1 = sketch.createCanvas(100, 100);
    canvas1.parent("canvas1");
    sketch.textAlign(sketch.CENTER, sketch.CENTER);
  };
  sketch.draw = function () {
    //for canvas 1
    sketch.background(100);
    sketch.text("hello canvas1", sketch.width / 2, sketch.height / 2);
  };
};

// create a new instance of p5 and pass in the function for sketch 1
new p5(s1, "canvas1");


// 2つ目のキャンバス設定
var s2 = function (sketch) {
  sketch.setup = function () {
    let canvas2 = sketch.createCanvas(100, 100);
    canvas2.parent("#canvas2");
    sketch.textAlign(sketch.CENTER, sketch.CENTER);
  };
  sketch.draw = function () {
    //for canvas 2
    sketch.background(100);
    sketch.text("hello canvas2", sketch.width / 2, sketch.height / 2);
  };
};

// create the second instance of p5 and pass in the function for sketch 2
new p5(s2, "canvas2");

</file>
</WRAP>
</WRAP>