//

// By Jon Froehlich

// http://makeabilitylab.io/

​

let mic;

let xCircle;

let yCircle; 

let yGravity = 3;

let diameter = 30;

​

function setup() {

  createCanvas(400, 400);

  // Initialize the microphone. 

  // See https://p5js.org/reference/#/p5.AudioIn

  mic = new p5.AudioIn(); 

  mic.start();

  xCircle = width / 2;

  yCircle = height - diameter / 2;

  fill(200, 0, 0, 200);

  noStroke();

}

​

function draw() {

  // background(220, 220, 220, 10);

  background(220);

  // get current microphone level

  let micLevel = mic.getLevel(); // between 0 and 1

  // map the mic level to a y pixel location on the canvas

  let newYCircle = map(micLevel, 0, 1, height, 0);

  // if newYCircle is less than yCircle, a new loud

  // sound was heard, so set yCircle = newYCircle

  if(newYCircle < yCircle){

    yCircle = newYCircle;

  }else{

    // Otherwise, animate the current circle positiond downwards 

    yCircle += yGravity; 

  }

  // Check to see if the circle made it to the bottom of the screen

  if(yCircle + diameter / 2 > height){

    yCircle = height - diameter/2; 

  }

  // the size of the circle proportional to mic level

  // let diameter = map(micLevel, 0, 1, 5, maxDiameter);

  circle(xCircle, yCircle, diameter);

}