createCanvas(400, 400);

  frameRate(15)

}

​

let x = 18;

  let o= 0.6

​

let mt =20

let my=20

function draw() {

  background("#F5E3B0");

  textSize(20);

  textFont("Helvetica");

  textAlign(CENTER);

  noStroke();

​

  //hair fill (the x=hair and the o's here are just for reference )

  fill("#000000");

  text("xxxxxxx", width / 2, height / 3 - 3 * x);

  text("xxxxxxxxxxx", width / 2, height / 3 - 2 * x);

  text("xxxx oooooo xxxx", width / 2, height / 3 - x);

  text("xxxx oooooooo xxxx", width / 2, height / 3);

  text("xxx ooooooooo xxx", width / 2, height / 3 + x);

  text("xx ooooooooooo xx", width / 2, height / 3 + 4 * x);

  text("xx    oo      oo    xx", width / 2, height / 3 + 5 * x);

  text("x                            x", width / 2, height / 3 + 3 * x + 1);

​

  //  upper face fill

  fill("#7E4E3E");

  text("oooooo", width / 2, height / 3 - x);

  text("oooooooo", width / 2, height / 3);

  text("ooooooooo", width / 2, height / 3 + x);

​

  //   ears

​

  fill("#692A14");

  textSize(26);

  text("@                   @", width / 2, height / 3 + 2 * x + 5);

  textSize(20);

  text("@                     @", width / 2, height / 3 + 3 * x + 4);

​

  // eyes

​

  fill("#000000");

  text("    (0)     (0)   ", width / 2, height / 3 + 2 * x);

  if  (o > 0.5) {   

    text("     (0)     (0)     ", width / 2, height / 3 + 2 * x);

    o=0.4

  } else {

      text("    (0)     (0)   ", width / 2, height / 3 + 2 * x);

    o=0.6

​

  }

      print(o)

​

//   ANIMATION

  circle(mt,my,20)

  mt= mt+0.8;

  my= my + 0.2

​

  //   mid/lower face fill

  fill("#7E4E3E");

  text("oo      oo      oo", width / 2, height / 3 + 2 * x);

  text("oooooooooo", width / 2, height / 3 + 3 * x);

  text("ooooooooooo", width / 2, height / 3 + 4 * x);

  text("ooo      ooo", width / 2, height / 3 + 5 * x);

  text("ooooooo", width / 2, height / 3 + 6 * x);

  text("ooooo", width / 2, height / 3 + 7 * x);

​

  //   mouth fill

  fill("rgb(179,74,74)");

  ellipse(width / 2, height / 3 + 4.7 * x, 30, 20);

  print(mouseX, mouseY);

​

  // jaw outline

  strokeWeight(3.5);

  stroke("rgb(126,45,45)");

  line(173, 263, 227, 263);

  line(173, 263, 135, 200);

  line(265, 200, 227, 263);

​

  // upper hair outline

  stroke("rgb(0,0,0)");

  line(160, 60, 240, 60);

  line(160, 60, 130, 100);

  line(268, 100, 240, 60);

  line(268, 100, 282, 100);

  line(130, 100, 118, 100);

  line(300, 140, 282, 100);

  line(295, 157, 300, 140);

  line(100, 140, 118, 100);

  line(100, 140, 105, 160);

​

  //   lower hair + forehead hair outline

​

  line(164, 101, 236, 101);

​

  line(236, 100, 236, 117);

  line(164, 100, 164, 117);

​

  line(140, 227, 110, 233);

  line(110, 233, 116, 212);

  line(116, 212, 106, 194);

  line(106, 194, 109, 179);

​

  line(256, 227, 290, 232);

  line(290, 232, 284, 212);

  line(284, 212, 293, 194);

  line(293, 194, 290, 179);

​

  line(154, 119, 146, 154);

  line(154, 119, 146, 154);

  line(246, 119, 254, 154);

}

​