createCanvas(400, 400);

  rectMode(CENTER);

}

​

let speech = 'hi, I am tee.';

let more ='\nNice to meet you!';

​

function draw() {

  background(153, 201, 220);

  noStroke();

​

  //shirt

  fill('blue');

  rect(200, 450, 400, 250, 60);

  //hat cap

  fill(152, 173, 118);

  rect(200, 150, 250, 250, 60);

​

  //hair 1

  fill('blue');

  circle(200, 200, 250);

  erase();

  //face

  noErase();

  noStroke();

  fill(235, 213, 103);

  circle(200, 200, 250);

​

  //neck

  rect(200, 300, 100, 150, 50);

  //ears

  circle(75, 200, 50);

  circle(330, 200, 50);

  //hair sideburn right

  fill('black');

  triangle(75,148, 75,190, 115,150);

  triangle(325,150, 325,190, 275,148);

  //hat brim

  noErase();

  fill(126, 143, 100);

  arc(200,200, 350,250, 60, 50, OPEN);

  //reset after hat

  noStroke();

  fill(235, 213, 103);

  noErase();

  //eyes

  fill('white');

  ellipse(150, 200, 75);

  ellipse(250, 200, 75);

  //pupils

  fill('black');

  ellipse(150, 200, 50);

  ellipse(250, 200, 50);

  //eyebrows

  stroke('black');

  strokeWeight(15);

  line(120, 165, 170, 150); //left

  line(275, 150, 230, 150); //right

  noStroke();

  //nose

  triangle(200, 200, 190,250, 210, 250)

   //smile

  fill('red');

  arc(190, 270, 80, 80, 0, 525, OPEN);

  //cheeks

  fill(219, 94, 206);

  ellipse(135, 250, 50, 30);

  ellipse(265, 250, 50, 30);

​

  //speech??

  fill('white');

  rect(mouseX+100, mouseY+75, 150, 75, 30);

  fill('black');

  textSize(14);

  text(speech + more, mouseX+100 , mouseY+75, 100, 50);

​

}

​

​

  function mouseMoved(speech) {

  console.log(mouseX, mouseY);

  }

​

​

​

​

​