**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.**

The idea is that whenever I change the selected animation, the web page displays another skecth that is defined in the html `<head>` in this particular case:

sketch and sketch 4 are the ones that are working.

I also need to change the sliders disposition because
It depends on the sketch the different sliders that will be displayed.

Now . **I think of two ways of doing this**.

**The first one** 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.

**The second one** is to defined every sketch as an object using *instance mode* 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.

I guess that there may be A LOT of ways of doing it

therefore i want to know the best suggested way to it.

I look forward to hearing from you people.

Here is the code i´ve been tryng to make it work.

HTML
----

```
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>Julito web page</title>

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        <!-- P5.js !!!! -->
        <script src="libraries/p5.js" type="text/javascript"></script>
        <script src="libraries/p5.dom.js" type="text/javascript"></script>
        <script src="libraries/p5.sound.js" type="text/javascript" ></script>

        <script src="sketch.js" type="text/javascript" id='skecthselect'></script> 
        <script src="sketch4.js" type="text/javascript"></script> 
        <!--<script src="sketch5.js" type="text/javascript"></script> -->

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>

    <body>
        <div class="container-fluid"  >
            <div class="col-md-1 " style="background-color:blue"> </div>

            <div class="col-md-10 maincontent_jp" > 
                <div class="row header_jp" >

                    <div class="col-md-2"></div>
                    <div class="col-md-8 headertext_jp">
                        <h1 class="text-center"> Juli </h1>
                        <h3 class="text-center"> Multimedia explorer</h3>
                    </div>
                    <div class="col-md-2"></div>
                </div>

                <div class="row ">
                    <div class="col-md-1 "></div>

                    <div class="col-md-10" id="sketchholder">

                        <div class="row" id="canvasholder" >
                        </div>

                        <div class="row" id="controladores" >
                            <div class="col-md-2"></div>
                            <div class="col-md-8">

                                <div class="col-md-6" id="slid-controladores"></div>
                                <div class="col-md-6" id="slid-texto"></div>

                            </div>
                            <div class="col-md-2"></div>
                        </div>
                    </div>

                    <div class="col-md-1" ></div>
                </div>

                <select id='selector' onchange="ChangeSketch()" name="skecthselector" >
                                  <option value="skecth1.js">Animacion 1</option>
                                  <option value="skecth2.js">Animacion 2</option>
                                  <option value="skecth3.js">Animacion 3</option>
                                  <option value="skecth4.js">Animacion 4</option>
                </select>
                <p id='koko'> </p>
            </div>

            <div class="col-md-1 " > </div>
        </div>

        <script src="sketchselector.js" type="text/javascript" ></script> 
    </body>
</html>

```

 SKETCH 1
---------

```
       //THIS IS A FUNCTION FOR DINAMYCALLY MAKE CANVAS FILL PAGE. 
        $( document ).ready(function() {

            var c=document.getElementById("cnv");
            var ctx=c.getContext("2d");
            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("canvasholder");

    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("background-color", col);

    if ((mouseIsPressed) && (mouseY < 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("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(95,50,40,0,2*Math.PI);
    ctx.stroke();

});

```

 SKETCH 2
---------

```
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 > width || this.x < 0){
            this.xspeed = this.xspeed * -1;
        }
        if (this.y > height || this.y < 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("canvasholder");
}

function draw() {
    background('#F0F');

    //ball.createBall();
        ball.display(50);
        ball.move();
        ball.bounce();
}

```

ADDED:

Well I´ve tryed this one in INSTANCE MODE and is not working either.

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.

Here the added 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);
    }
     }

```