let elemSlider;

let compressSlider;

​

​

let theta1 = 0;

let theta2 = 0;

let theta3 = 0;

let theta4 = 0;

​

let delta1 = 0.001;

let delta2 = 0.002;

let delta3 = 0.003;

let delta4 = 0.004;

​

let autoslidercheck;

function setup() {

  createCanvas(400, 400);

  colorMode(HSB, 360, 100, 100);  // Use HSB color mode

​

  maxLoopSlider = select("#maxLoopSlider");

  elemSlider = select("#elemSlider");

  compressSlider = select("#compressSlider");

  colorChangeSlider = select("#colorChangeSlider");

  sliderChangeSpeedSlider = select("#sliderAutoChangeSpeed");

  autoslidercheck= createCheckbox('autoslide')

}

​

function glideshift(i, N, l, m, compress) {

  return 1 - (cos(2 * PI / l * i * compress + N / m * PI) + 1) / 2;

}

​

​

​

function draw() {

  background(220);

​

  // Dynamically update slider values

​

  let maxLoop = maxLoopSlider.value();

  let numElems = elemSlider.value();

  let compress = compressSlider.value();

  let colorChange = colorChangeSlider.value();

  let sliderChangeSpeed = sliderChangeSpeedSlider.value();

​

  for (let N = 0; N < maxLoop; N++) {

    let hue = (N * colorChange) % 360;  // Calculate hue based on current iteration

    stroke(hue, 100, 100);  // Set stroke color using hue, saturation, brightness

​

    let previousVal = height * glideshift(0, N, numElems, maxLoop, compress);

    for (let i = 1; i < numElems; i++) {

      let val = height * glideshift(i, N, numElems, maxLoop, compress);

      line((i - 1) * width / numElems, height - previousVal, i * width / numElems, height - val);

      previousVal = val;

    }

  }

​

  if (autoslidercheck.checked())

  {

    maxLoopSlider.value    (map(sin(theta1), -1, 1, 1, 45));

    elemSlider.value       (map(sin(theta2), -1, 1, 1, 50));

    compressSlider.value   (map(sin(theta3), -1, 1, 0.01, 4));

    colorChangeSlider.value(map(sin(theta4), -1, 1, 1, 360));

​

    // Update thetas

    theta1 += sliderChangeSpeed*delta1;

    theta2 += sliderChangeSpeed*delta2;

    theta3 += sliderChangeSpeed*delta3;

    theta4 += sliderChangeSpeed*delta4;

  }

​

  select("#maxLoopLabel").html(maxLoop);

  select("#elemLabel").html(numElems);

  select("#compressLabel").html(compress);

  select("#colorChangeLabel").html(colorChange);

  select("#sliderAutoChangeSpeedLabel").html(sliderChangeSpeed);

}