How to switch multiple canvases ?

Vlain

I have 2 sketches and I want to switch those two using an element (select, button, etc...) on a webpage. Normally, I just add script tag to show a sketch but now I don't know how to switch multiple sketches. Does anyone know how to solve this? Many thanks

kfrajer

I suppose you could use instance mode:

Or you can show/hide each canvas separately: http://p5js.sketchpad.cc/sp/pad/view/0x7sIg4j4u/latest

Kf

 var i = 0;
  var cc;
  var bt;
  var dd;

  function setup() {  

    bt= createButton('Hide');
    bt.mousePressed(updateElement);
    dd=createDiv('');

    cc=createCanvas(300, 300);
    cc.parent(dd);

    // set the background color
    background(255);
    smooth();
    frameRate(30);
    strokeWeight(12);
  } 

   function updateElement(){
       let tm=bt.html();
       if(tm=="Hide"){
         cc.hide();
         bt.html("Show");
       }
       else{
        cc.show();
        bt.html("Hide");
       }

   }


  // this is run repeatedly.  
  function draw() {  

    // set the color
    stroke(random(50), random(255), random(255), 100);

    // draw the line
    line(i, 0, random(0, width), height);

    // move over a pixel
    if (i < width) {
        i++;
    } else {
        i = 0; 
    }
  }

Vlain

Thanks mate, I'll try this method