let playing = true;

let amplitude;

let x = Math.random()*400;

let al = 255;

​

function preload() {

  soundFormats("mp3", "ogg");

  mySound = loadSound("Happy-Frog.mp3");

}

​

function setup() {

  let cnv = createCanvas(windowWidth, windowHeight);

  cnv.mousePressed(canvasPressed);

  stroke(255);

​

  text("tap here to play / stop", 10, 20);

  mySound.play();

  noFill();

  amplitude = new p5.Amplitude();

}

​

function draw() {

  background(0, 10);

  let level = amplitude.getLevel();

  let diam = map(level, 0, 1, 0, 500);

  if (diam < 50) {

    bolita(color(255, 0, 0, 155), diam, 2);

  } else if (diam < 100) {

    bolita(color(0,0,255,155),diam, 4)

  } else if (diam < 110) {

    bolita(color(0,255,0,155), diam, 1.5)

  } else if (diam < 160) {

    bolita(color(255,255,0,155), diam+50,1)

  }

  if (x < 0 || x > width) {

    x = random(width);

  } else {

    let randy = random();

    let multi = randy > 0.5 ? 1 : -1;

    x += diam * multi;

  }

}

​

function bolita(col, diam, dividedBy){

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

      // fill(col);

      stroke(col);

      ellipse(x, height / dividedBy, diam-i, diam-i);

    }

}

​

function canvasPressed() {

  playing = !playing;

​

  if (playing) {

    mySound.stop();

  } else {

    mySound.play();

  }

}

​