What is the best way to change p5.js canvas dynamically in the same webpage?
<p><strong>I'm trying to develop a webpage that allows me to change the p5.js canvas and also the slider disposition with just selecting an option from an input.</strong></p>
<p>The idea is that whenever I change the selected animation, the web page displays another skecth that is defined in the html <code>&lt;head&gt;</code> in this particular case:</p>
<p>sketch and sketch 4 are the ones that are working.</p>
<p>I also need to change the sliders disposition because
It depends on the sketch the different sliders that will be displayed.</p>
<p>Now . <strong>I think of two ways of doing this</strong>.</p>
<p><strong>The first one</strong> is to change the
src atributte using another javascript file (sketchselector.js). This is not working. It changes the src but the page wont reload to load that other sketch.</p>
<p><strong>The second one</strong> is to defined every sketch as an object using <em>instance mode</em> and I should only make that when ever it changes the option it changes the object. The problem with instance mode is that if I want to make a lot of animations I'm going to have to use it everytime and it makes my code hard to understand.</p>
<p>I guess that there may be A LOT of ways of doing it</p>
<p>therefore i want to know the best suggested way to it.</p>
<p>I look forward to hearing from you people.</p>
<p>Here is the code i´ve been tryng to make it work.</p>
<h2>HTML</h2>
<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;meta charset=&quot;UTF-8&quot;&gt;
            &lt;title&gt;Julito web page&lt;/title&gt;
        
        &lt;link rel=&quot;stylesheet&quot; href=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot;&gt;
        &lt;!-- jQuery library --&gt;
        &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;!-- Latest compiled JavaScript --&gt;
        &lt;script src=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
        
        
        
        &lt;!-- P5.js !!!! --&gt;
        &lt;script src=&quot;libraries/p5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;libraries/p5.dom.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;libraries/p5.sound.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt;
        
        
        &lt;script src=&quot;sketch.js&quot; type=&quot;text/javascript&quot; id='skecthselect'&gt;&lt;/script&gt; 
        &lt;script src=&quot;sketch4.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; 
        &lt;!--&lt;script src=&quot;sketch5.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt; --&gt;

        
        &lt;!-- CSS --&gt;
        &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt; 
    &lt;/head&gt;
  
  
    &lt;body&gt;
        &lt;div class=&quot;container-fluid&quot;  &gt;
            &lt;div class=&quot;col-md-1 &quot; style=&quot;background-color:blue&quot;&gt; &lt;/div&gt;
            
            &lt;div class=&quot;col-md-10 maincontent_jp&quot; &gt; 
                &lt;div class=&quot;row header_jp&quot; &gt;
                
                    &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;col-md-8 headertext_jp&quot;&gt;
                        &lt;h1 class=&quot;text-center&quot;&gt; Juli &lt;/h1&gt;
                        &lt;h3 class=&quot;text-center&quot;&gt; Multimedia explorer&lt;/h3&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
                &lt;/div&gt;
                
                &lt;div class=&quot;row &quot;&gt;
                    &lt;div class=&quot;col-md-1 &quot;&gt;&lt;/div&gt;
                    
                    &lt;div class=&quot;col-md-10&quot; id=&quot;sketchholder&quot;&gt;
                    
                    
                        &lt;div class=&quot;row&quot; id=&quot;canvasholder&quot; &gt;
                        &lt;/div&gt;

                        &lt;div class=&quot;row&quot; id=&quot;controladores&quot; &gt;
                            &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
                            &lt;div class=&quot;col-md-8&quot;&gt;
                            
                                &lt;div class=&quot;col-md-6&quot; id=&quot;slid-controladores&quot;&gt;&lt;/div&gt;
                                &lt;div class=&quot;col-md-6&quot; id=&quot;slid-texto&quot;&gt;&lt;/div&gt;
                                
                            &lt;/div&gt;
                            &lt;div class=&quot;col-md-2&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    
                    &lt;div class=&quot;col-md-1&quot; &gt;&lt;/div&gt;
                &lt;/div&gt;
                
                &lt;select id='selector' onchange=&quot;ChangeSketch()&quot; name=&quot;skecthselector&quot; &gt;
                                  &lt;option value=&quot;skecth1.js&quot;&gt;Animacion 1&lt;/option&gt;
                                  &lt;option value=&quot;skecth2.js&quot;&gt;Animacion 2&lt;/option&gt;
                                  &lt;option value=&quot;skecth3.js&quot;&gt;Animacion 3&lt;/option&gt;
                                  &lt;option value=&quot;skecth4.js&quot;&gt;Animacion 4&lt;/option&gt;
                &lt;/select&gt;
                &lt;p id='koko'&gt; &lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;col-md-1 &quot; &gt; &lt;/div&gt;
        &lt;/div&gt;
        
        
        &lt;script src=&quot;sketchselector.js&quot; type=&quot;text/javascript&quot; &gt;&lt;/script&gt; 
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2>  SKETCH 1 </h2>
<pre><code>       //THIS IS A FUNCTION FOR DINAMYCALLY MAKE CANVAS FILL PAGE. 
        $( document ).ready(function() {
        
            var c=document.getElementById(&quot;cnv&quot;);
            var ctx=c.getContext(&quot;2d&quot;);
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
        });
    
    var RectOrEllipse = false;
    var boton ; 
    var cont = 0; 
    var pepito ; 
    var RedP;
    var GreenP;
    var BlueP;
    var OpacityP;
    var SizeP;
    var maxwidth;
    var canvheight = 500;
    
      function setup () {
          
      //CREATING THE CANVAS 
    maxwidth = document.getElementById('canvasholder').offsetWidth;
    var canvasDiv = document.getElementById('canvasholder');
    var sketchCanvas = createCanvas(maxwidth/1.2,canvheight);
    console.log(sketchCanvas);
    sketchCanvas.parent(&quot;canvasholder&quot;);
    
    slidred = createSlider(1,255,150);
    slidgreen = createSlider(1,255,150);
    slidblue = createSlider(1,255,150);
    slidopacity = createSlider(0,100,50);
    slidsize = createSlider(1,300,150);
    
    slidred.parent('slid-controladores');
    slidgreen.parent('slid-controladores');
    slidblue.parent('slid-controladores');
    slidopacity.parent('slid-controladores');
    slidsize.parent('slid-controladores');
    
    RedP = createP('Rojo:'+slidred.value());
    GreenP = createP('Verde: '+slidgreen.value());
    BlueP = createP('Azul: '+slidblue.value());
    OpacityP = createP('Opacidad:'+slidopacity.value())
    SizeP = createP('Tamaño: '+slidsize.value());
    pepe = createP('X'+ mouseX + 'Y' + mouseY);
    
    RedP.parent('slid-texto');
    GreenP.parent('slid-texto'); 
    BlueP.parent('slid-texto');
    OpacityP.parent('slid-texto');
    SizeP.parent('slid-texto');
    
  }

  function draw() {
    maxwidth = document.getElementById('canvasholder').offsetWidth;
    
   noStroke();
   
    
    col = color(slidred.value(),slidgreen.value(),slidblue.value(),slidopacity.value());
    fill(slidred.value(),slidgreen.value(),slidblue.value(),slidopacity.value());
    //boton.style(&quot;background-color&quot;, col);
    
    if ((mouseIsPressed) &amp;&amp; (mouseY &lt; canvheight)){
        
        ellipse(mouseX, mouseY, slidsize.value(),slidsize.value());
    }
    
    slidred.input(Actualizar);
    slidgreen.input(Actualizar);
    slidblue.input(Actualizar);
    slidopacity.input(Actualizar);
    slidsize.input(Actualizar);
    pepe.html('X'+ mouseX + 'Y' + mouseY + 'MAX WIDTH' + maxwidth);
  }
  
  function Actualizar() {
  
    RedP.html('Rojo:'+slidred.value());
    GreenP.html('Verde: '+slidgreen.value());
    BlueP.html('Azul: '+slidblue.value());
    OpacityP.html('Opacidad:'+slidopacity.value());
    SizeP.html('Tamaño: '+slidsize.value());
    
  }
  
$( document ).ready(function() {

    var c=document.getElementById(&quot;canvas&quot;);
    var ctx=c.getContext(&quot;2d&quot;);
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});
</code></pre>
<h2> SKETCH 2 </h2>
<pre><code>var ball = {
    x: 150,
    y: 150,
    xspeed:0.5,
    yspeed:-0.2,
    
    display: function(tamaño) {
        stroke(1);
        strokeWeight(1);
        noFill();
        ellipse(this.x,this.y,tamaño,tamaño);
    },
    
    bounce: function() {
        if (this.x &gt; width || this.x &lt; 0){
            this.xspeed = this.xspeed * -1;
        }
        if (this.y &gt; height || this.y &lt; 0){
            this.yspeed = this.yspeed * -1;
        }
    },
    
    move: function () {
    
    /*ball.xspeed = velocidad;
    ball.yspeed = velocidad;*/
    
    this.x = this.x + this.xspeed;
    this.y = this.y + this.yspeed;
    },
    
    createBall : function (){
        this.display();
        this.move();
       this.bounce();
    }
}
var i;  
function setup() {
    var sketchCanvas = createCanvas(300,300);
    sketchCanvas.parent(&quot;canvasholder&quot;);
}

function draw() {
    background('#F0F');
    
    //ball.createBall();
        ball.display(50);
        ball.move();
        ball.bounce();
}
</code></pre>
<p>ADDED:</p>
<p>Well I´ve tryed this one in INSTANCE MODE and is not working either.</p>
<p>I defined two sketches in a single javascript file. when I call them they work just fine. The problem is when I want to select one over the other. That´s not working.</p>
<p>Here the added code:</p>
<pre><code>function ChangeSketch() {
lala = document.getElementById('selector').value;
document.getElementById('koko').innerHTML = lala;  




/*new p5(sketch1, 'canv2');
    new p5(sketch1, 'canv1');*/
    
    function setup(){
    createP('TENGO MIEDO');
    new p5(sketch2);
    new p5(sketch1);
    }
     }
</code></pre>