createCanvas(400, 400); // Set the canvas size

}

​

function draw() {

  background(255);

​

  // Calculate how much the face follows the mouse

  let faceOffsetX = map(mouseX, 0, width, -10, 10); // Horizontal offset

  let faceOffsetY = map(mouseY, 0, height, -10, 10); // Vertical offset

​

  // Face

  fill(255, 224, 189);

  noStroke();

  ellipse(200 + faceOffsetX, 185 + faceOffsetY, 150, 200); // Face moves

​

  // Calculate the direction of the pupils based on mouse position

  let leftEyeX = 168 + faceOffsetX;

  let rightEyeX = 232 + faceOffsetX;

  let eyeY = 200 + faceOffsetY;

  let maxPupilOffset = 10; // limit for how far the pupil can move

​

  let leftPupilOffsetX = constrain(mouseX - leftEyeX, -maxPupilOffset, maxPupilOffset);

  let rightPupilOffsetX = constrain(mouseX - rightEyeX, -maxPupilOffset, maxPupilOffset);

  let pupilOffsetY = constrain(mouseY - eyeY, -maxPupilOffset, maxPupilOffset);

​

  // Eyes

  fill(250, 250, 240); // White part of the eyes

  ellipse(leftEyeX, eyeY, 45, 25); // Left

  ellipse(rightEyeX, eyeY, 45, 25); // Right

​

  // Pupils

  fill(0); // Black part of the eyes

  ellipse(leftEyeX + leftPupilOffsetX, eyeY + pupilOffsetY, 15, 20); // Left pupil

  ellipse(rightEyeX + rightPupilOffsetX, eyeY + pupilOffsetY, 15, 20); // Right pupil

​

  // Eye highlights

  fill(245, 245, 235);

  ellipse(leftEyeX + leftPupilOffsetX - 5, eyeY + pupilOffsetY, 7, 7);

  ellipse(rightEyeX + rightPupilOffsetX - 5, eyeY + pupilOffsetY, 7, 7);

​

  // Eyebrows move based on mouseY

  fill(233, 150, 122);

  let eyebrowOffsetY = map(mouseY, 0, height, -5, 10); // Eyebrows raise or lower

  ellipse(165 + faceOffsetX, 178 + faceOffsetY + eyebrowOffsetY, 35, 8); // Left eyebrow

  ellipse(230 + faceOffsetX, 178 + faceOffsetY + eyebrowOffsetY, 35, 8); // Right eyebrow

​

   // Hair

  fill(0);

  noStroke();

  arc(200, 170, 180, 220, PI, TWO_PI, OPEN);

  arc(150, 140, 100, 180, PI / 2, PI + QUARTER_PI, OPEN);

  arc(250, 140, 100, 180, TWO_PI - QUARTER_PI, PI / 2, OPEN);

  rotate(-radians(20));

  arc(60, 200, 75, 130, PI / 2, PI + QUARTER_PI, OPEN);

  rotate(radians(40));

  arc(315, 65, 75, 130, TWO_PI - QUARTER_PI, PI / 2, OPEN);

  triangle(170, 115, 200, 150, 200, 80);

  triangle(280, 65, 320, 100, 320, 65);

  rotate(-radians(20));

  rect(105, 210, 35, 80);

  rect(260, 210, 35, 80);

  // Body stays in place, not following the mouse

  fill(194, 220, 189);

  rect(160, 285, 80, 130);

  arc(160, 385, 100, 200, PI / 2, (3 * PI) / 2);

  arc(240, 385, 100, 200, (3 * PI) / 2, PI / 2);

}

​