Author: cselloun@andrew.cmu.edu

Here I am, added some interactive qualities to the self portrait as well, if you speak into the microphone it will transfer over to the actual animation.

sketch

var input;
var analyzer;
var volume = 0;

function setup() {
  createCanvas(600, 600);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  colorMode(RGB);
  background(233, 255, 228);
   // 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;


  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 20, 300);
  
   print(mouthSize);
  
  if(mouthSize < 26)
  mouthSize = 0;
  mouthSize = constrain(mouthSize, 0, 300);
  


  noStroke();
    //red pink rotating star in the back
 push();
  fill(255, 70, 231);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+290, 180, 30); 
  pop();
  //pink rotating star in the back
 push();
  fill(255, 13, 255);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+250, 170, 30); 
  pop();
  //inner rotating star 
  push();
  fill(107, 255, 0);
  translate(width*0.5, height*0.5);
  rotate(frameCount / 50.0);
  star(0, 0, mouthSize+220, 90, 30); 
  pop();
   //hair
  fill(54,17,17);
  rect(150,270,300,300,20);
  ellipse(300,240,300,300);
  //head
  fill(255, 215, 175);
  ellipse(300, 300, 310, 360);
   //eyebrows
  strokeWeight(15);
  stroke(54,17,17);
  line(230,200,180,200);
  line(420,200,370,200);
  //eyes
  noStroke();
  fill(300);
  ellipse(200, 250, 60, 60);
  ellipse(400, 250, 60, 60);
  //eyepuffs
  fill(255, 215, 175);
  ellipse(200, 325, 150, 100);
  ellipse(400, 325, 150, 100);
  //blush
  fill(255, 108, 155, 70);
  ellipse(200, 320, 90, 90);
  ellipse(400, 320, 90, 90);
  // nose
  noFill();
  stroke(214, 162, 126);
  strokeWeight(3);
  arc(300, 325, 50, 50, PI, 0);
  //lens big
  var eyeX;
  var eyeY;
  var lookUP;
  noStroke();
  fill(232, 134, 206);
  lookUP = map(mouseY, 0, 600, 240, 260);
  lookUP = constrain(lookUP, 240, 260);
  eyeY = map(mouseX, 0, 600, 200 - 10, 200 + 10);
  eyeY = constrain(eyeY, 200 - 10, 200 + 10);
  ellipse(eyeY, lookUP, 50, 50);
  eyeX = map(mouseX, 0, 600, 400 - 10, 400 + 10);
  eyeX = constrain(eyeX, 400 - 10, 400 + 10);
  ellipse(eyeX, lookUP, 50, 50);
  //lens small
  noStroke();
  fill(232, 12, 202);
  ellipse(eyeY, lookUP, 35, 35);
  ellipse(eyeX, lookUP, 35, 35);
  //pupil
  noStroke();
  fill(0);
  ellipse(eyeY, lookUP, 25, 25);
  ellipse(eyeX, lookUP, 25, 25);
  //white in the eye smaller
  noStroke();
  fill(300, 150);
  ellipse(eyeY - 5, lookUP - 10, 15, 15);
  ellipse(eyeX - 5, lookUP - 10, 15, 15);
  //white in the eye stronger
  noStroke();
  fill(300);
  ellipse(eyeX - 5, lookUP - 10, 10, 10);
  ellipse(eyeY - 5, lookUP - 10, 10, 10);
  //cheeks lines
  noFill();
  stroke(166, 39, 76, 70);
  strokeWeight(3);
  arc(400, 320, 94, 90, PI, 0);
   noFill();
  stroke(166, 39, 76, 70);
  strokeWeight(3);
  arc(200, 320, 94, 90, PI, 0);
  
  //blush lines
    strokeWeight(5);
    stroke(255, 70, 231, 70);
  line(180, 290, 185, 320);
  line(200, 290, 205, 320);
  line(220, 290, 225, 320);
     strokeWeight(5);
    stroke(255, 70, 231, 70);
  line(380, 290, 385, 320);
  line(400, 290, 405, 320);
  line(420, 290, 425, 320);
  
  
  
  //eye creases
  stroke(166, 39, 76, 20);
  strokeWeight(3);
  arc(200, 240, 68, 60, PI, 0);
   noFill();
  //eye creases
  stroke(166, 39, 76, 20);
  strokeWeight(3);
  arc(400, 240, 68, 60, PI, 0);
   noFill();
  



  // 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;


  // Draw an ellipse size proportionally to the volume
  var mouthSize = map(volume, 0, 1, 10, 300);
  fill(0)
  ellipse(300, 400, mouthSize, mouthSize / 2);

}
function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}