function setup() {
  createCanvas(400, 400);
  background('teal')
  
  noStroke();
  
  //LAYER 1 (Hood Backgroud)
  //image(img,50,50,300,300)
  
  fill('black');
  
  ellipseMode(CENTER)
  ellipse(200,145,220,180);
  
  rectMode(CENTER)
  rect(200,230,220,180)

  beginShape(TESS);
    vertex(50,320);
    vertex(50,280);
    vertex(90,175);
    vertex(310,175);
    vertex(350,280);
    vertex(350,320);
  endShape(CLOSE);
  

  //LAYER 2 (Under the Hood)
  //image(img,50,50,300,300)
  
  fill(50)
  
  quad(50,320, 102,200, 298,200, 350,320)
  
  beginShape()
  
  curveVertex(50,320)
  curveVertex(80,250)
  curveVertex(102,200)
  curveVertex(125,170)
  curveVertex(160,160)
  curveVertex(190,175)
  curveVertex(190,200)
  
  endShape()
  
  beginShape()
  
  curveVertex(350,320)
  curveVertex(320,250)
  curveVertex(298,200)
  curveVertex(275,170)
  curveVertex(240,160)
  curveVertex(210,175)
  curveVertex(210,200)
  
  endShape()
  
  rectMode(CORNER)
  rect(140,175, 120,40)
  
  
  //LAYER 3 (Mask)
  //image(img,50,50,300,300)
  
  fill('black')
  quad(108,230, 292,230, 274,340, 126,340)
  ellipse(131,331, 36,36)
  ellipse(269,331, 36,36)
  
  fill(80)
  triangle(108,230, 145,295, 190, 230);
  triangle(292,230, 255,295, 210, 230);
  
  fill('black')
  ellipse(200,239, 36,36)
  
  fill(50)
  quad(163,322, 182,322, 182,274, 163,300)
  quad(237,322, 218,322, 218,274, 237,300)
  
  rectMode(CENTER)
  fill(50)
  rect(200,295, 20,54)
  
  //LAYER 4 (Holes)
  //image(img,50,50,300,300)
  
  fill(200)
  
  ellipse(200,239, 20,20)
  ellipse(131,331, 20,20)
  ellipse(269,331, 20,20)
  
  rectMode(CENTER)
  fill(200)
  rect(200,244, 20,10)

  
  //LAYER 5 (Eyes)
  
  fill('black')
  beginShape()
  
  curveVertex(136,221);
  curveVertex(122,219);
  curveVertex(117,212);
  curveVertex(118,202);
  curveVertex(125,188);
  curveVertex(138,179);
  curveVertex(155,174);
  curveVertex(176,178);
  curveVertex(188,188);
  curveVertex(191,200);
  curveVertex(191,212);
  curveVertex(180,221)
  
  endShape(CLOSE)
  
  //GUIDE POINTS
  //stroke('white');
  strokeWeight(2);
  
  point(136,221);
  point(122,219);
  point(117,212);
  point(118,202);
  point(125,188);
  point(138,179);
  point(155,174);
  point(176,178);
  point(188,188);
  point(191,200);
  point(191,212);
  point(180,221);
  
  
  beginShape()
  
  curveVertex(264,221);
  curveVertex(278,219);
  curveVertex(283,212);
  curveVertex(282,202);
  curveVertex(275,188);
  curveVertex(262,179);
  curveVertex(245,174);
  curveVertex(224,178);
  curveVertex(212,188);
  curveVertex(209,200);
  curveVertex(209,212);
  curveVertex(220,221);
  
  endShape(CLOSE)
  
  //GUIDE POINTS
  //stroke('white');
  strokeWeight(2);
  
  point(264,221);
  point(278,219);
  point(283,212);
  point(282,202);
  point(275,188);
  point(262,179);
  point(245,174);
  point(224,178);
  point(212,188);
  point(209,200);
  point(209,212);
  point(220,221);
  
  
  stroke(30);
  strokeWeight(8);
  strokeCap(ROUND)
  curve(120,173, 117,142, 125,113, 150,90);
  curve(117,142, 125,113, 150,90, 176,82); 
  curve(125,113, 150,90, 176,82, 210,80);
  
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js