​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(230, 230, 250);

​

  // calculate the center of the canvas

  let centerX = width / 2;

  let centerY = height / 2;

​

  // calculate offsets to center the portrait

  let offsetX = 200;

  let offsetY = 220;

​

  // center the portrait

  translate(centerX - offsetX, centerY - offsetY);

​

  // check if mouse is over the glasses bridge

  glassesHovered = mouseX >= (180 + centerX - offsetX) &&

                   mouseX <= (220 + centerX - offsetX) &&

                   mouseY >= (190 + centerY - offsetY) &&

                   mouseY <= (220 + centerY - offsetY);

​

  // draw portrait components

  drawFace();

  drawShirt();

​

  // animate blinking eyes

  animateEyes();

}

​

// draw face with features

function drawFace() {

  // hair

  noStroke();

  ellipse(200, 170, 200, 140);

  rect(100, 170, 50, 120);

  rect(250, 170, 50, 120);

​

  // skin color

  let skinColor = color(224, 185, 149);

​

  // face

  fill(skinColor);

  ellipse(200, 220, 130, 180); // face shape

​

  // ears

  fill(skinColor);

  ellipse(140, 220, 30, 40); // left

  ellipse(260, 220, 30, 40); // right

​

  // earrings

  fill(192, 192, 192); // silver color for earrings

  noStroke();

  ellipse(130, 230, 10, 10); // left

  ellipse(270, 230, 10, 10); // right

​

  // eyebrows

  noFill();

  stroke(0);

  strokeWeight(8);

  line(145, 180, 175, 180); // left

  line(225, 180, 255, 180); // right

​

  // eyes

  let blink = sin(frameCount * 0.1) > 0.5; // Blink animation

​

  fill(255); // White of the eyes

  noStroke();

  ellipse(160, 205, 25, blink ? 10 : 15); // Left eye white

  ellipse(240, 205, 25, blink ? 10 : 15); // Right eye white

  fill(0); // Pupils

  ellipse(160, 205, 18, blink ? 8 : 15); // Left eye pupil

  ellipse(240, 205, 18, blink ? 8 : 15); // Right eye pupil

​

  // black eyeliner on the bottom of the eyes

  stroke(0);

  strokeWeight(2);

  line(148, 213, 172, 213); // Left eye bottom eyeliner

  line(228, 213, 252, 213); // Right eye bottom eyeliner

​

  // glasses

  if (glassesHovered) {

    fill(0); // Fill with black if hovered

  } else {

    noFill(); // No fill otherwise

  }

  stroke(0);

  strokeWeight(3);

  ellipse(160, 205, 45, 40); // Left lens frame

  ellipse(240, 205, 45, 40); // Right lens frame

  // glasses bridge

  stroke(0);

  strokeWeight(3);

  line(180, 205, 220, 205); 

​

  // nose

  noFill();

  stroke(0);

  strokeWeight(2);

  beginShape();

  vertex(200, 215);

  vertex(195, 240); // Left nose

  vertex(205, 240); // Right nose

  endShape();

​

  // nose ring (silver hoop on the right side)

  stroke(192, 192, 192); // Silver color

  strokeWeight(2);

  arc(205, 240, 15, 15, 0, PI); // Nose ring hoop

​

  // lips with a slight smile

  noStroke();

  fill(150, 50, 50); // Lips color

  beginShape();

  vertex(180, 265); // Left corner of upper lip

  bezierVertex(190, 260, 210, 260, 220, 265); // Upper lip curve

  vertex(220, 265);

  bezierVertex(210, 275, 190, 275, 180, 265); // Lower lip curve

  endShape(CLOSE);

​

  // neck

  fill(skinColor);

  rect(180, 280, 40, 50); // Neck rectangle below the face

}

​

// draw shirt

function drawShirt() {

  fill(0); // Black color for shirt

  rect(140, 330, 120, 150); // Shirt shape

}

​

// animate eyes blinking

function animateEyes() {

  // integrated within drawFace() already

}

​