Your browser does not support the canvas tag.

previous        Show / Hide Source        Download        next
/*

INTERACTIVE MEDIA
QIANLIN XU
SEPT.22,2017

*/

//SETUP
void setup(){
  size(400,400);
}

//DRAWS FRAMES
void draw(){
  //SET FRAME RATE
  frameRate(60);
  
  //BACKGROUND
  background(0);

  //FACE AND EAR
  stroke(100);
  strokeWeight(5);
  fill(243,241,235);
  rectMode(CORNERS);
  rect(100,170,300,200);
  
  noStroke();
  rect(100,120,300,173);
  
  fill(249,181,170);
  triangle(367,29,360,38,368,38);
  triangle(33,29,40,38,32,38);
  arc(290,120,66,100,0,HALF_PI);
  arc(110,120,66,100,HALF_PI,PI);
  arc(360,38,16,74,0,HALF_PI);
  arc(40,38,16,74,HALF_PI,PI);
  arc(295,65,134,134,0,HALF_PI);
  arc(105,65,134,134,HALF_PI,PI);
  quad(360,38,360,75,310,75,323,55);
  quad(40,38,40,75,90,75,77,55);
  
  noStroke();
  fill(243,241,235);
  triangle(160,100,160,115,164,103);
  triangle(240,100,240,115,236,103);
  quad(160,100,160,110,150,110,150,89);
  quad(240,100,240,110,250,110,250,89);
  quad(250,89,250,110,260,112,260,80);
  quad(150,89,150,110,140,112,140,80);
  quad(140,112,140,80,130,72,130,115);
  quad(260,112,260,80,270,72,270,115);
  quad(270,115,270,72,280,66,280,120);
  quad(130,115,130,72,120,66,120,120);
  quad(120,66,120,120,110,110,110,60);
  quad(280,66,280,120,290,110,290,60);
  quad(110,110,110,60,100,56,100,88);
  quad(290,110,290,60,300,56,300,88);
  quad(300,56,300,88,310,78,310,52);
  quad(100,56,100,88,90,78,90,52);
  quad(90,52,90,78,80,68,80,49);
  quad(310,52,310,78,320,68,320,49);
  quad(80,68,80,49,70,45,70,60);
  quad(320,68,320,49,330,45,330,60);
  quad(70,45,70,60,60,55,60,42);
  quad(330,45,330,60,340,55,340,42);
  quad(60,55,60,42,50,40,50,47);
  quad(340,55,340,42,350,40,350,47);
  quad(50,40,50,47,40,38,40,35);
  quad(350,40,350,47,360,38,360,35);
  triangle(33,29,40,38,40,35);
  triangle(367,29,360,38,360,35);
  
  stroke(100);
  strokeWeight(5);
  fill(243,241,235);
  arc(200,125,160,50,PI,PI*2);
  arc(200,190,200,220,0,PI);
  
  //HAIR IN THE EAR
  noStroke();
  fill(243,241,235);
  quad(300,90,300,130,270,130,270,110);
  quad(100,90,100,130,130,130,130,110);
  quad(300,90,300,122,310,116,310,85);
  quad(100,90,100,122,90,116,90,85);
  quad(310,116,310,85,320,82,320,110);
  quad(90,116,90,85,80,82,80,110);
  quad(320,82,320,100,330,91,330,81);
  quad(80,82,80,100,70,91,70,81);
  triangle(340,82,330,81,330,91);
  triangle(60,82,70,81,70,91);
  quad(320,100,320,110,325,107,325,101);
  quad(80,100,80,110,75,107,75,101);
  quad(325,107,325,101,330,102,330,105);
  quad(75,107,75,101,70,102,70,105);
  triangle(338,103,330,102,330,105);
  triangle(62,103,70,102,70,105);
  quad(300,122,300,133,310,127,310,120);
  quad(100,122,100,133,90,127,90,120);
  triangle(310,127,310,120,318,119);
  triangle(90,127,90,120,82,119);
  quad(300,130,300,134,295,136,295,130);
  quad(100,130,100,134,105,136,105,130);
  quad(295,136,295,145,300,143,300,138);
  quad(105,136,105,145,100,143,100,138);
  triangle(300,143,300,138,304,141);
  triangle(100,143,100,138,96,141);
  arc(280,170,40,80, PI+HALF_PI,TWO_PI);
  arc(120,170,40,80,PI,PI+HALF_PI);
  quad(290,130,295,130,295,150,290,150);
  quad(110,130,105,130,105,150,110,150);
  
  //BOTTOM PART MOUTH
  strokeWeight(4);
  stroke(236,161,23);
  fill(249,232,201);
  arc(200,mouseY/20+310,60,14,0,PI);
  arc(170,mouseY/20+270,20,80,HALF_PI,PI);
  arc(230,mouseY/20+270,20,80,0,HALF_PI);
  
  noStroke();
  rect(170,mouseY/20+270,230,mouseY/20+310);
  
  strokeWeight(3);
  stroke(236,161,23);
  fill(168,41,34);
  rect(180,mouseY/20+260,220,mouseY/20+285);
  arc(217,mouseY/20+270,30,30,0,HALF_PI);
  arc(183,mouseY/20+270,30,30,HALF_PI,PI);
    
  //TEETH
  stroke(0);
  strokeWeight(1);
  fill(255);
  triangle(218,285,220,295,230,285);
  triangle(182,285,180,295,170,285);
  
  //TOP PART MOUTH
  strokeWeight(4);
  stroke(236,161,23);
  fill(249,232,201);
  arc(230,250,40,80,0,PI);
  arc(170,250,40,80,0,PI);
  arc(170,280,60,20,0,HALF_PI);
  arc(230,280,60,20,HALF_PI,PI);

  noStroke();
  rect(180,240,220,280);
  triangle(150,250,160,250,160,247);
  triangle(250,250,240,250,240,247);
  quad(240,247,240,250,230,250,230,243);
  quad(230,243,230,250,220,250,220,240);
  quad(160,247,160,250,170,250,170,243);
  quad(170,243,170,250,180,250,180,240);
  
  strokeWeight(4);
  stroke(236,161,23);
  curve(200,225,220,240,250,250,340,250);
  curve(200,225,180,240,150,250,60,250);
  line(200,260,200,280);
    
  //NOSE
  noStroke();
  fill(89,47,16);
  arc(190,240,20,6,PI,PI*2);
  arc(210,240,20,6,PI,PI*2);
  arc(200,240,40,40,0,PI);
  
  noStroke();
  fill(249,232,201);
  arc(215,247,6,6,PI,PI*2);
  arc(185,247,6,6,PI,PI*2);
  quad(180,248,188,246,195,255,188,258);
  quad(220,248,212,246,205,255,212,258);
  arc(207,255,4,4,0,PI);
  arc(193,255,4,4,0,PI);
  
  //EYES
  stroke(0);
  strokeWeight(2);
  fill(255);
  arc(150,170,60,70,0,PI);
  arc(250,170,60,70,0,PI);
  
  //EYEBALLS
  strokeWeight(4);
  stroke(9,14,81);
  fill(0,18,255);
  ellipse(mouseX/30+244,mouseY/40+174,40,40);
  ellipse(mouseX/30+144,mouseY/40+174,40,40);
  fill(0);
  noStroke();
  ellipse(mouseX/30+144,mouseY/40+174,20,20);
  ellipse(mouseX/30+244,mouseY/40+174,20,20);
  
  //EYELID
  noStroke();
  fill(243,241,235);
  rect(220,170,280,145);
  rect(120,170,180,145);
  stroke(0);
  strokeWeight(2);
  line(220,170,280,170);
  line(120,170,180,170);
  
  noFill();
  stroke(0);
  strokeWeight(5);
  beginShape();
  curveVertex(218,170);
  curveVertex(250,205);
  curveVertex(282,170);
  endShape();
  
}