Flere canvas

Hva

Dette er trolig ikke den situasjonen vi skal løse oftest, men det er mulig å få flere canvas med p5js til å fungere på samme web-side. Det vi gjør er å etablere to p5-objekter, koplet til hver sitt canvas. jeg har ikke testet dette i stort omfang og det er vel ikke helt usannsynlig at det kan dukke opp noen problemer.

To skisser

Prøv å klikke på dem

Her er den første

og her kommer den andre

HTML-koden over ser slik ut:

<p>Her er den første</p>
<div id="canvasplace1" onclick="skisse1.byttRetning()">  
</div>
<p>og her kommer den andre</p>
<div id="canvasplace2" onclick="skisse2.byttRetning()">

Vi har altså plassert event handteringen, onclick, i det div-elementet som omgir canvas.

Det er tre javascript involvert:

// Ber P5 om å sette opp to skisser
// Angir objektet med funksjonlitet 
// og hvor det skal plasseres
var skisse1=new p5(sketch1,"canvasplace1");
var skisse2=new p5(sketch2,"canvasplace2");

Og vi beskriver to nye objekter, p5-objekter:

// sketch1, new p5
var sketch1 = function( sk1) {
  
  sk1.setup = function() {
    var canvas = sk1.createCanvas(100, 100);
    canvas.parent('canvasplace1');
    canvas.mousePressed(this.byttRetning);
    sk1.V=0;
    sk1.dV=-2;
  };
  
  sk1.draw = function() {
    with(sk1){
        background(255,255,255);
        translate(width/2,height/2);
        rotate(radians(V));
        fill(255,0,0);
        textSize(30);
        textAlign(CENTER,CENTER);
        text("Hallo",0,0);
        V+=dV;
    }
 }
  sk1.byttRetning=function(){
        sk1.dV=-sk1.dV;
  }
}

// sketch2, new p5
var sketch2 = function( sk2) { 
  
  sk2.setup = function() {
    var canvas = sk2.createCanvas(100, 100);
    canvas.parent('canvasplace2');
    canvas.mousePressed(this.byttRetning);
    sk2.V=0;
    sk2.dV=-2;
  };
  sk2.draw = function() {
    with(sk2){
        background(255,255,255);
        translate(width/2,height/2);
        rotate(radians(V));
        fill(255,0,0);
        rect(-30,-30,60,60);
        V+=dV;        
    }
  }
  
  sk2.byttRetning=function(){
      sk2.dV=-sk2.dV;
  }
}

Referanser

Processing.js Processing.js JavaScript interpretator for Processing processingjs.org/ 01-04-2014