title: How would I add sliders to increase the sides of my Polygons, and draw more of them without refreshing the page?
body: <p>Currently I'm drawing vertices to create polygons, I would like to add sliders to allow a user to increase or decrease the amount of sides the polygons have and the amount drawn. Also having the canvas update with refreshing.
  I've tried adding a slider to control the noOfSides but I've had no luck.
  Thanks for your time and help.</p>
  
  <pre class="lang-js prettyprint-override"><code>let noOfShapes = 3;
  let noOfSides;
  let rx, ry, drx, dry, rd1, rd2, drd1, drd2;
  let threshold = 1000;
  let fillColour;
  let strokeThick;
  let sidesSlider;
  
  function setup() {
      createCanvas(1240, 1754);
      noLoop();
      //  background(0, 230)
      colorMode(RGB)
      rectMode(CENTER);
      strokeWeight(3);
      //noOfSides = 3;
      fillColour = random(0, 255);
      sidesSlider = createSlider(4, 12, 3);
      sidesSlider.position(width + 20, 0);
      sidesSlider.style('width', '150px');
  }
  
  function draw() {
      background(0, 230)
      noOfSides = sidesSlider.value();
  
      for (let x = 0; x &lt; noOfShapes; x++) {
  
          do {
              rx = [];
              ry = [];
              rd1 = [];
              rd2 = [];
  
              for (let y = 0; y &lt; noOfSides; y++) {
                  rx.push(random(10, width - 20));
                  ry.push(random(10, height - 20));
                  rd1.push(rx[y] * 1 + ry[y] * 1);
                  rd2.push(rx[y] * 1 - ry[y] * 1);
              }
  
              drx = max(rx) - min(rx);
              dry = max(ry) - min(ry);
              drd1 = max(rd1) - min(rd1);
              drd2 = max(rd2) - min(rd2);
          }
          while (drx &lt; threshold || dry &lt; threshold || drd1 &lt; threshold || drd2 &lt; threshold)
  
          beginShape();
          stroke(255);
          fill(random(1, 255), random(1, 255), random(1, 255), 150);
          for (let y = 0; y &lt; rx.length; y++) {
              vertex(rx[y], ry[y]);
          }
          endShape(CLOSE);
      }
  
      for (let x = 20; x &lt;= width; x = x + 20) {
          blendMode(DODGE);
          stroke(255);
          beginShape();
          vertex(x, 0)
          vertex(x, height + 20)
          endShape();
      }
  }
  </code></pre>