String Art Play

let a = 2,
  b = 4,
  c = 1;
let ch = 183,
  cs = 42,
  cb = 100;
let playBool = false;
function setup() {
  tmp = min(windowWidth, windowHeight) * 0.95;
  createCanvas(tmp, tmp);
  angleMode(DEGREES);
  makeButton();
  strokeWeight(0.7);
  colorMode(HSB);
}

function draw() {
  background(ch, cs, 100 - cb * 2);
  t = frameCount / 100;
  translate(width / 2, width / 2);
  if (playBool) {
    a = (a + 0.001) % 40;
    valueDisp1.html("string step a =  " + round(a, 2));
    aSlider.value(a);
  }
  for (let i = 0; i <= 360; i += c) {
    stroke(ch, cs, cb);
    strokeWeight(0.3);
    x1 = (width / 2.5) * sin(i * a);
    y1 = (width / 2.5) * cos(i * a);
    x2 = (width / 2.5) * sin(i * b);
    y2 = (width / 2.5) * cos(i * b);
    line(x1, y1, x2, y2);
  }
}
function makeButton() {
  stroke(255);
  fill(255);
  button = createButton("Animate a");
  button.position(5, 20);
  button.mousePressed(bPress);
  aSlider = createSlider(1, 40, a, 1);
  aSlider.position(5, 100);
  aSlider.size(80, 20);
  bSlider = createSlider(1, 40, b, 1);
  bSlider.position(5, 130);
  bSlider.size(80, 20);
  cSlider = createSlider(0.1, 2, c, 0.1);
  cSlider.position(5, 70);
  cSlider.size(80, 20);
  chSlider = createSlider(0, 360, cb, 1);
  chSlider.position(5, 190);
  chSlider.size(80, 20);
  csSlider = createSlider(0, 100, cs, 1);
  csSlider.position(5, 220);
  csSlider.size(80, 20);
  cbSlider = createSlider(0, 100, cb, 1);
  cbSlider.position(5, 250);
  cbSlider.size(80, 20);
  valueDisp1 = createP();
  valueDisp1.position(5, 72);
  valueDisp1.html("string step a = " + a);
  valueDisp1.style("color", "#e6fbff");
  valueDisp2 = createP();
  valueDisp2.position(5, 102);
  valueDisp2.html("string step b =  " + b);
  valueDisp2.style("color", "#e6fbff");
  valueDisp3 = createP();
  valueDisp3.position(5, 40);
  valueDisp3.html("step size =  " + c);
  valueDisp3.style("color", "#e6fbff");
  valueDisp4 = createP();
  valueDisp4.position(5, 160);
  valueDisp4.html("hue: " + ch);
  valueDisp4.style("color", "#e6fbff");
  valueDisp5 = createP();
  valueDisp5.position(5, 193);
  valueDisp5.html("saturation: " + cs);
  valueDisp5.style("color", "#e6fbff");
  valueDisp6 = createP();
  valueDisp6.position(5, 223);
  valueDisp6.html("brightness: " + cb);
  valueDisp6.style("color", "#e6fbff");

  aSlider.input(sliderChange1);
  bSlider.input(sliderChange2);
  cSlider.input(sliderChange3);
  chSlider.input(sliderChange4);
  csSlider.input(sliderChange4);
  cbSlider.input(sliderChange4);
  function sliderChange1() {
    a = aSlider.value();
    valueDisp1.html("string step a =  " + round(a, 2));
  }
  function sliderChange2() {
    b = bSlider.value();
    valueDisp2.html("string step b =  " + b);
  }
  function sliderChange3() {
    c = cSlider.value();
    valueDisp3.html("step size =  " + c);
  }
  function sliderChange4() {
    ch = chSlider.value();
    valueDisp4.html("hue: " + ch);
    cs = csSlider.value();
    valueDisp5.html("saturation: " + cs);
    cb = cbSlider.value();
    valueDisp6.html("brightness: " + cb);
  }
  function bPress() {
    playBool = !playBool;
    a = round(a);
    valueDisp1.html("string step a =  " + round(a, 2));
  }
}

function windowResized() {
  tmp = min(windowWidth, windowHeight) * 0.95;
  resizeCanvas(tmp, tmp);
}