//

// This sketch is part of a series:

//  - v1: simple version: https://editor.p5js.org/jonfroehlich/sketches/JeFJHpkb7

//  - v2: this sketch

//  - v3: with averaging: https://editor.p5js.org/jonfroehlich/sketches/Nm6QjlXcy

//

// By Professor Jon E. Froehlich

// https://makeabilitylab.cs.washington.edu/

​

let mic;

let xCircle;

let yCircle; 

let maxDiameter = 1000;

​

function setup() {

  createCanvas(400, 400);

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

  mic = new p5.AudioIn(); 

  mic.start();

  // Set x,y of circle in middle of canvas

  xCircle = width / 2;

  yCircle = height / 2;

  // Set default draw properties

  fill(200, 0, 0, 200);

  noStroke();

}

​

function draw() {

  background(220, 220, 220, 10);

  // get current microphone level

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

  // the size of the circle proportional to mic level

  // The min and max of micLevel is 0 - 1. Map this to

  // the diameter values of 5 to maxDiameter

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

  circle(xCircle, yCircle, diameter);

}