let eyePositionRight = 262;

let distance;

​

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background("#6C4980");

  drawFace();

}

​

function drawFace(){

  noStroke();

  fill("#805D93");

  circle(200,200,500);

  fill("#F1AEC5");

  circle(200,200,350);

  stroke("black");

  //hair

  fill("black")

  circle(190,190,170); 

  rect(105,205,170,90);

  fill("#FFD3BA");

  fill("#F49FBC");

  strokeWeight(2);

  rect(110,280,170,170,80,80,0,0); //body

​

  fill("#FFD3BA");

  rect(180,260,30,40,0,0,30,30); //neck

  arc(200,200,160,160,(-1/3)*PI,PI,OPEN);//face

  //mouse, nose, ear

  line(200,240,270,240);

  line(200,235,200,245);

  arc(245,220,10,10,PI,0);

  arc(125,210,40,40,QUARTER_PI,7/4*PI);

  //bangs

  stroke("black")

  fill("black");

  arc(135,123,210,140,0,HALF_PI);

​

​

  //eyes

  fill("white");

  circle(220,200,40);

  ellipse(270,200,35,40);

  fill("black")

  rect(225,165,10,5,30,30);

  rect(260,165,10,5,30,30);

  //move the eyes based on the distance between cursor and face

  distance = ((mouseX-200)**2 + (mouseY-180)**2)**(1/2);

  if (distance < 90){

    eyePositionLeft = 230;

    eyePositionRight = 280;

  } else{

    eyePositionLeft = 210;

    eyePositionRight = 262;

  }

  fill("black");

  ellipse(eyePositionLeft,200,20,20);

  ellipse(eyePositionRight,200,20,20);

}