p5-Microphone-Demos-2024

​

// Demonstration of interaction vocabularies for sound input.

// Don't forget to include p5.sound in your Libraries

// (in the Sketch/Libraries control panel of OpenProcessing).

// Adapted from work by Paolo Pedercini. 

// 2025: now using https://cdn.jsdelivr.net/npm/p5.sound@0.1.0

​

//----------------------------------------------

// I have declared the variable called 'volume' as a global variable

let volume = 0;

let mic, amp;

​

function setup(){

  let cnv = createCanvas(800, 800);

  cnv.mousePressed(userStartAudio);

  mic = new p5.AudioIn();

  mic.start();

  amp = new p5.Amplitude();

  mic.disconnect();

  mic.connect(amp);

}

​

​

//----------------------------------------------

function draw() {

  // For animation, the background is redrawn every time

  background("DodgerBlue");

​

  // Fetch the overall volume (between 0.0 and 1.0).

  let sensitivity = 3.0; 

  let v = amp.getLevel() * sensitivity;

  v = min(v, 1.0); 

  // Smooth the volume variable with a running average

  volume = 0.5 * volume + 0.5 * v;

​

  //-----------------------------

  // #1. Make an ellipse whose size is proportional to the volume.

  // Note how its height will always be half of the its width

  noStroke();

  fill("#A63126")

  let ellipseSize = map(volume, 0, 1, 60, 400);

  ellipse(150, 200, ellipseSize, ellipseSize / 2);

  //-----------------------------

  // #2. Line whose rotation is proportional to sound

  stroke(0);

  strokeWeight(20);

  let lineRot = map(volume, 0, 1, 0, 90);

  angleMode(DEGREES);

  push();

  translate(400, 200);

  rotate(lineRot);

  line(-100, 0, 100, 0);

  pop();

​

  //-----------------------------

  // #3. Square whose X and Y location are affected by sound

  noStroke();

  fill("#F26B5E");

  let posX = map(volume, 0, 1, 550, 700);

  let posY = map(volume, 0, 1, 250, 100);

  rect(posX, posY, 80, 80);

​

  //-----------------------------

  // #4. Rectangle whose width is mapped to volume. 

  noStroke();

  fill("#F2884B");

  let rectWidth = map(volume, 0, 1, 10, 300);

  rect(50, 400, rectWidth, 50);

​

  //-----------------------------

  // #5. Circle whose fill color is affected by sound: 

  // Specifically, volume interpolates the color between yellow and red

  let colorA = color("yellow");

  let colorB = color("red");

  let blendColor = lerpColor(colorA, colorB, volume);

  fill(blendColor);

  circle(400, 420, 150);

​

  //-----------------------------

  // #6. Polygon (diamond) whose vertices are moved by sound

  fill("#A63126")

  noStroke();

  let shapeThick = map(volume, 0, 1, 0, 100);

  beginShape();

  vertex(670, 300); //top

  //right: add the variable = move the point right

  vertex(680 + shapeThick * 0.75, 400 - shapeThick * 0.25);

  vertex(670, 500); //bottom

  //left: subtract the variable = move left

  vertex(660 - shapeThick, 400);

  endShape();

​

  //-----------------------------

  // #7. Triangle with sound-sensitive stroke weight

  noFill();

  stroke("#F2AF5C");

  let triStroke = map(volume, 0,1, 1,80);

  strokeWeight(triStroke);

  triangle(190, 579, 284, 734, 89, 741);

​

  //-----------------------------

  // #8. Curve with sound-sensitive bend.

  // quadraticVertex is a curve vertex with one control point.

  // The control point is in the middle and I move it according to sound.

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

  strokeWeight(20);

  stroke("#F28B5E");

  let curveBend = map(volume, 0, 1, 0, 120);

  beginShape();

  vertex(400, 660);

  quadraticVertex(450, 660 - curveBend, 500, 660);

  endShape();

​

  //-----------------------------

  // #9. Arc with sound-sensitive start and end angles.

  noStroke();

  let mouth = map(volume, 0,1, 0,100);

  fill("#F2AF5C");

  arc(650, 650, 150, 150, 0 + mouth, 360 - mouth, PIE);

}

​