// credits to sebastian 

​

​

var numPoints;

var spiralRadius;

var radius;

var startScale;

var endScale;

var spiralTurns;

​

function setup() {

  createCanvas(400, 400);

  animateCheckbox = createCheckbox('animate').checked(1)

  redrawBackgroundCheckbox = createCheckbox('redraw background').checked(1)

  numPoints    = createSlider(1, 250, 88, 1);

  spiralRadius = createSlider(0.05, 300, 124, 0.01);

  radius       = createSlider(0.05, 100, 42, 0.01);

  startScale   = createSlider(0.01, 2, 1, 0.01);

  spiralTurns  = createSlider(0.01, 50, 5,  0.01);

  endScale     = createSlider(0.01, 50, 13,  0.01);

}

​

var t = 0;

var delta = 0.0025;

​

function sleep(millisecondsDuration)

{

  return new Promise((resolve) => {

    setTimeout(resolve, millisecondsDuration);

  })

}

​

function draw() {

  if (redrawBackgroundCheckbox.checked()){

    background(220);

  }

​

  translate(200,200)

  for (var i = 0; i < numPoints.value(); i ++){

​

    var spiralT = i / (numPoints.value() - 1.0)

    var angle  = spiralT  * PI * 2 * spiralTurns.value();

    var dir = createVector(cos(angle), sin(angle))

    var pos = dir.mult(spiralRadius.value() *spiralT)

    var _scale = lerp(startScale.value(), endScale.value(), spiralT)

​

    // erm I think radius should be doubled since cirlce takes a diameter

    circle(pos.x, pos.y, 2*radius.value() * _scale )

​

  }

  if (animateCheckbox.checked()) {

    numPoints.value(0.5+abs(sin(-PI+t))*100)

    spiralTurns.value(0.5+abs(sin(.2+t/5))*4)

    radius.value(0.5+abs(sin(t/2))*4)

    spiralRadius.value(abs(sin(t))*250)

  }

  t+= delta;

}