Project 1: My Self Portrait

function setup() {
    createCanvas(400, 600);
  }
  
function draw() {
    
    background(54, 47, 117);
    
    // print(mouseX, mouseY);
    
    // hair
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(0);
    curveVertex(40, 600);
    curveVertex(40, 600);
    curveVertex(63, 358);
    curveVertex(108, 255);
    curveVertex(198, 216);
    curveVertex(288, 255);
    curveVertex(334, 358);
    curveVertex(360, 600);
    curveVertex(360, 600);
    
    endShape();
    
    
    
    // shoulder and neck
    beginShape();
    
    strokeWeight(2);
    stroke(0)
    fill(253, 236, 231);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(184, 490);
    curveVertex(216, 490);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // face
    beginShape();
    
    strokeWeight(4);
    stroke(0)
    curveVertex(199, 500);
    curveVertex(199, 500);
    curveVertex(135, 466);
    curveVertex(120, 369);
    curveVertex(159, 334);
    curveVertex(198, 300);
    curveVertex(218, 334);
    curveVertex(280, 369);
    curveVertex(265, 466);
    
    curveVertex(199, 500);
    curveVertex(199, 500);
    
    endShape();
    
    
    
    // clothes
    beginShape();
    
    fill(253, 151, 156);
    curveVertex(92, 600);
    curveVertex(92, 600);
    curveVertex(114, 555);
    curveVertex(147, 534);
    curveVertex(173, 521);
    curveVertex(201, 546);
    curveVertex(227, 521);
    curveVertex(253, 534);
    curveVertex(286, 555);
    curveVertex(308, 600);
    curveVertex(308, 600);
    
    endShape();
    
    
    
    // eyes
    fill(0);
    circle(160, 400, 26);
    circle(240, 400, 26);
    
    
    
    // eyelids
    strokeWeight(8);
    noFill();
    arc(160, 393, 34, 16, PI + PI/24, - PI/6);
    arc(240, 393, 34, 16, PI + PI/6, - PI/24);
    
    
    
    // eyebrows
    arc(160, 380, 52, 20, PI + PI/16, - PI/6);
    arc(240, 380, 52, 20, PI + PI/6, - PI/16);
    
    
    
    // mouth
    strokeWeight(8);
    stroke(0)
    line(192, 450, 210, 450);
    
    
    
    // nose
    arc(201, 430, 14, 8, PI + PI / 10, TWO_PI - PI / 10);
    
    
    
    // stars
    noStroke();
    fill(251, 255, 5);
    
    triangle(112, 54, 120, 24, 128, 54);
    triangle(112, 56, 120, 86, 128, 56);
    triangle(90, 56, 120, 48, 120, 64);
    triangle(120, 48, 120, 64, 150, 56);
    
    triangle(312, 154, 320, 124, 328, 154);
    triangle(312, 156, 320, 186, 328, 156);
    triangle(290, 156, 320, 148, 320, 164);
    triangle(320, 148, 320, 164, 350, 156);
    
    circle(50, 80, 8);
    circle(170, 150, 16);
    circle(230, 50, 12);
    circle(360, 100, 12);
    
    
    
    /* when mouse is on canvas, 
    the circle stars will start blinking, 
    and the character will open her mouth */
    
    if ((mouseX > 0) & (mouseX < width) &&
        (mouseY > 0) && (mouseY < height)) {
      
      // add rings for blinking effect
      let starR1 = random(8, 16);
      let starR2 = random(16, 24);
      let starR3 = random(12, 18);
      noFill();
      strokeWeight(1);
      stroke(251, 255, 5)
      circle(50, 80, starR1);
      circle(170, 150, starR2);
      circle(230, 50, starR3);
      circle(360, 100, starR3);
      
      // open mouse
      strokeWeight(6);
      stroke(0);
      fill(254, 97, 97);
      arc(201, 451, 22, 30, 0, PI);
  
    } 
      
    
  }