let numSlider;

let strokewSlider;

​

function setup() {

  let ratio = sqrt(2);

  createCanvas(width, width / ratio);

  numSlider = {

    value: () => 14

  }

  // numSlider = createSlider(1, 100, 14, 1);

  strokewSlider = {

    value: () => 9

  }

  // strokewSlider = createSlider(1, 10, 9, 0.25);

}

​

function draw() {

  background(0);

  strokeCap(ROUND);

  strokeWeight(strokewSlider.value());

  colorMode(HSL, 4);

​

  const spacing = (width - 80) / (numSlider.value() - 1);

  for (let x = 40; x <= width - 40; x += spacing) {

    let y = map(x, spacing, width - spacing, 0, width);

    y = TWO_PI * x / width;

    y = sin(y + frameCount / 60);

​

    stroke(y + 1, 2, 2 * 0.97);

​

    y *= 0.9 * (height / 2);

    y += (height / 2);

​

    line(x, height / 2, x, y);

  }

}