var img;

var mouth;

var teeth;

​

function preload() {

  img = loadImage("mrbubz.jpg");

  teeth = loadImage("teeth.png");

​

}

​

​

function setup() {

  createCanvas(800, 800, WEBGL);

  mic = new p5.AudioIn();

  mic.start();

}

​

function draw() {

  var vol = mic.getLevel();

  texture(img);

  rect(-width / 2, -height / 2, 800, 800);

​

​

  noStroke();

  fill(255, 0, 0);

  mouth = vol * 10000;

  //console.log(mouth);

  translate(width / 2, height / 2);

  rotate(-5 * (PI / 180));

  scale(3);

  texture(teeth);

  ellipse(-130, -80, 250, teeth.height + mouth);

  //this distortion is not quite right. It's on an angle.

  //how can I fix this?

​

}