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, | ||
+ | <WRAP group> | ||
+ | <WRAP half column> | ||
+ | <file html index.html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <script src=" | ||
+ | <script src=" | ||
+ | <link rel=" | ||
+ | <meta charset=" | ||
+ | |||
+ | </ | ||
+ | < | ||
+ | <script src=" | ||
+ | <p> | ||
+ | こちらは1枚目のキャンバス | ||
+ | <div id=" | ||
+ | </p> | ||
+ | | ||
+ | <hr> | ||
+ | | ||
+ | <p> | ||
+ | こちらは2枚目のキャンバス | ||
+ | <div id=" | ||
+ | </p> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <WRAP half column> | ||
+ | <file js sketch.js> | ||
+ | /* | ||
+ | いままで global 宣言された p5 インスタンスを使ってきましたが、複数のキャンバスを使うためにはその p5 インスタンスを独自に定義する必要があります。ポイントは各キャンバスの記述には必ず頭に sketch をつける。ってことだけ覚えておけばよいかと思います。 | ||
+ | */ | ||
+ | |||
+ | // 1つ目のキャンバス設定 | ||
+ | var s1 = function (sketch) { | ||
+ | sketch.setup = function () { | ||
+ | let canvas1 = sketch.createCanvas(100, | ||
+ | canvas1.parent(" | ||
+ | sketch.textAlign(sketch.CENTER, | ||
+ | }; | ||
+ | sketch.draw = function () { | ||
+ | //for canvas 1 | ||
+ | sketch.background(100); | ||
+ | sketch.text(" | ||
+ | }; | ||
+ | }; | ||
+ | |||
+ | // create a new instance of p5 and pass in the function for sketch 1 | ||
+ | new p5(s1, " | ||
+ | |||
+ | |||
+ | // 2つ目のキャンバス設定 | ||
+ | var s2 = function (sketch) { | ||
+ | sketch.setup = function () { | ||
+ | let canvas2 = sketch.createCanvas(100, | ||
+ | canvas2.parent("# | ||
+ | sketch.textAlign(sketch.CENTER, | ||
+ | }; | ||
+ | sketch.draw = function () { | ||
+ | //for canvas 2 | ||
+ | sketch.background(100); | ||
+ | sketch.text(" | ||
+ | }; | ||
+ | }; | ||
+ | |||
+ | // create the second instance of p5 and pass in the function for sketch 2 | ||
+ | new p5(s2, " | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||