c,

    angleGrowthFactor,

    angleGrowthFactorIndicator,

    angleGrowthFactorIncreasingSlider,

    frequencySlider,

    runButton,

    running;

​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  angleGrowthFactor = 0;

  angleGrowthFactorIndicator = createP("");

  runButton = createButton("Pause");

  createP("Angle growth factor increasing");

  angleGrowthFactorIncreasingSlider = createSlider(0.01, 1, 0.1, 0.01);

  createP("Frequency");

  frequencySlider = createSlider(1, 30, 15);

  runButton.mouseClicked(() => {

    if (running) {

      noLoop();

      runButton.html("Play");

    }

    else {

      loop();

      runButton.html("Pause");

    }

    running = !running;

  });

  running = true;

  frameRate(frequencySlider.value());

  colorMode(HSB);

}

​

function draw() {

  frameRate(frequencySlider.value());

  background(0);

  n = 0;

  c = 5;

  angleGrowthFactorIndicator.html(`Angle growth factor: ${angleGrowthFactor.toFixed(2)}°`);

  for (let i = 0; i < 1500; i++) {

    const a = n * angleGrowthFactor,

          r = c * sqrt(n);

    noStroke();

    fill(map(r, 0, width / 2, 0, 255), map(r, 0, width / 2, 255, 0), map(r, 0, width / 2, 255, 0));

    ellipse(r * cos(a) + width / 2, r * sin(a) + height / 2, 5, 5);

    n++;

  }

  angleGrowthFactor = (angleGrowthFactor + angleGrowthFactorIncreasingSlider.value()) % 360;

}

​