let step;

let n = 80;

let radius = 20;

let inter = 1;

let maxNoise = 250;

​

let button;

let song;

var amp;

​

let noiseProg = (x) => x;

​

function setup() {

  createCanvas(500, 500);

  angleMode(DEGREES);

​

  noFill();

  kMax = random(0.6, 1.0);

  step = 0.01;

  noStroke();

​

  song = loadSound("Baby One More Time.mp3");

  amp = new p5.Amplitude();

​

  //PLAY BUTTON -------------------------------------------------------------------------

  myButton = new Clickable();

  myButton.locate(20, 20);

  myButton.width = 20;

  myButton.height = 20;

  myButton.color = "#FFFFFF";

  myButton.cornerRadius = 10;

  myButton.strokeWeight = 2; 

  myButton.stroke = "#FFFF";

​

  myButton.onOutside = function () {

    myButton.color = "#FFFFFF";

  };

  myButton.onHover = function () {

    this.color = "#AAAAFF";

  };

​

  myButton.onRelease = function () {

    song.play();

    song.setVolume(0.2);

  };

  //STOP BUTTON -------------------------------------------------------------------------

  button = new Clickable();

  button.locate(20, 60);

  button.width = 20;

  button.height = 20;

  button.color = "#FFF";

  button.cornerRadius = 10;

  button.strokeWeight = 2;

  button.stroke = "#FFF";

  button.onOutside = function () {

    button.color = "#FFF";

  };

  button.onHover = function () {

    this.color = "#AAAAFF";

  };

  button.onRelease = function () {

    song.stop();

  };

}

​

function draw() {

  blendMode(BLEND);

  background(14, 34, 36);

  blendMode(ADD);

  myButton.draw();

  button.draw();

​

  var vol = amp.getLevel();

  var diam = map(vol, 0, 0.3, 10, 200);

  let t = frameCount / 100;

​

  for (let i = n; i > 0; i--) {

    let alpha = pow(1 - noiseProg(i / n), 3);

    let size = diam + i * inter;

    let k = kMax * sqrt(i / n);

    let noisiness = maxNoise * noiseProg(i / 2 / n);

​

    fill(242, 0, 137, alpha * 255);

    blob(size, width / 2, height / 2, k, t - i * step, noisiness * 2);

​

    fill(9, 205, 193, alpha * 255);

    blob(size, width / 2, height / 2, k, t - i * step + 0.2, noisiness * 2);

​

    fill(0, 20, 255, alpha * 255);

    blob(size, width / 2, height / 2, k, t - i * step + 0.4, noisiness * 2);

  }

}

​

function blob(size, xCenter, yCenter, k, t, noisiness) {

  beginShape();

  let angleStep = 360 / 8;

  for (let theta = 0; theta <= 360 + 2 * angleStep; theta += angleStep) {

    let r1, r2;

​

    r1 = cos(theta) + 1;

    r2 = sin(theta) + 1;

    let r = size + noise(k * r1, k * r2, t) * noisiness;

    let x = xCenter + r * cos(theta);

    let y = yCenter + r * sin(theta);

    curveVertex(x, y);

  }

  endShape();

}

​