p5js:tips:複数canvas

no way to compare when less than two revisions

差分

このページの2つのバージョン間の差分を表示します。


p5js:tips:複数canvas [2021/07/18 11:21] (現在) – 作成 baba
行 1: 行 1:
 +====== 複数キャンバス ======
 +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>
 +
  
  • /home/users/2/lolipop.jp-4404d470cd64c603/web/ws/data/pages/p5js/tips/複数canvas.txt
  • 最終更新: 2021/07/18 11:21
  • by baba