Sound Responsive Face_Peixuan Mo

//The volume is a global variable

var volume = 0;

​

function setup() {

  createCanvas(800, 800);

​

  // Create an Audio input

  mic = new p5.AudioIn();

  // start the Audio Input

  mic.start();

}

​

function draw() {

  //the background has to be redrawn every time

  a = color('#ABA4DE')

  background(a);

  // Get the overall volume (between 0 and 1.0)

  var v = mic.getLevel();

  //Smooth the volume variable with an easing function

  volume += (v - volume) / 3;

  //Bubble

  noStroke();

  var ellipseSize = map(volume, 0, 1, 300, 200);

  fill(250, 252, 215);

  ellipse(550, 50, ellipseSize, ellipseSize);

  fill(252, 215, 240);

  ellipse(50, 550, ellipseSize, ellipseSize);

  fill(215, 246, 252);

  ellipse(50, 100, ellipseSize, ellipseSize);

  fill(242, 242, 242);

  ellipse(700, 650, ellipseSize, ellipseSize);

  //Hair

  //Erin's hair transits from black to yellow from head to toe so I picked R and G to change accordingly)

  noStroke()

  var green = map(volume, 0, 1, 100, 255);

  fill(green, green, 100);

  arc(400, 400, 600, 700, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);

  //Face 

  noStroke()

  c = color('#FFDAC6')

  fill(c);

  rect(200, 250, 400, 300, 0, 0, 150, 150);

  //Beanie

  noStroke()

  e = color('#FFD4E3')

  fill(e);

  arc(400, 270, 590, 480, PI, 0, CHORD);

  f = color('#ED9EC1')

  fill(f);

  rect(105, 170, 590, 100, 200, 200, 0, 0);

  g = color('#E674BC')

  fill(g);

  rect(370, 190, 70, 70, 15);

​

  //Ears

  noStroke()

  c = color('#FFDAC6')

  fill(c);

  arc(190, 400, 40, 60, 0, TWO_PI - QUARTER_PI, OPEN);

  arc(610, 400, 40, 60, PI + QUARTER_PI, PI - QUARTER_PI, OPEN);

​

​

  //Eyebrows

  //remap the volume level to new variables

  //so I can control different parameters of my image

  var ellipseSize = map(volume, 0, 1, 30, 100);

  //the ellipse will be proportional to the volume 

  //but its height will always be half of the width

  fill(0 ,0, 0);

  ellipse(270, 300, ellipseSize, ellipseSize / 2);

  ellipse(530, 300, ellipseSize, ellipseSize / 2);

​

  //Eyes

  var ellipseSize = map(volume, 0, 1, 45, 10);

  noStroke()

  fill(0, 0, 0);

  ellipse(270, 350, ellipseSize, ellipseSize);

  ellipse(530, 350, ellipseSize, ellipseSize);

  fill(255,255,255)

  ellipse(263, 340, ellipseSize/2.5, ellipseSize/2.5);

  ellipse(522, 340, ellipseSize/2.5, ellipseSize/2.5);

​

  //Nose

  var noseWidth = map(volume, 0, 1, 20, 50);

  b = color('#A14A47')

  fill(b);

  arc(400, 400, noseWidth, noseWidth, PI, 0, CHORD);

  //triangle(400, 375, 382, 415, 418, 415);

​

  //Mouth 

  fill(240, 81, 103);

  var mouthWidth = map(volume, 0, 1, 200, 20);

  arc(400, 450, mouthWidth, mouthWidth/1.5, 0, PI, PIE);

  //Neck

  noStroke()

  c = color('#FFDAC6');

  fill(c);

  rect(328, 540, 150, 110);

​

  //Hoodie

  d = color('#B7CFFA');

  fill(d);

  rect(110, 625, 590, 180, 400, 400, 0, 0);

  e = color('#648FFF');

  fill(e);

  triangle(200, 750, 620, 725, 550, 625);

  triangle(180, 725, 250, 625, 600, 750);

  var rectWidth = map(volume, 0, 1, 80, 30);

  fill(255, 255, 255)

  ellipse(250, 675, 20, 20);

  ellipse(550, 675, 20, 20);

  rect(245, 680, rectWidth/10, rectWidth, 15);

  rect(545, 680, rectWidth/10, rectWidth, 15);

}

​

​

​