/* いままで 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");