let flowerCount = 0;  // To count the number of flowers created

let celebrationStarted = false;  // To track if celebration has started

let confetti = [];  // To store confetti positions

let fallingFlowers = [];  // To store falling flowers' positions

​

function setup() {

  createCanvas(350, 350);

  background(255, 200, 200);

}

​

function draw() {

  background(255, 200, 200);  // Redraw the background to keep it clean

​

  // Hair

  noStroke();

  fill(79, 49, 30); // Dark brown hair color

  // Top of the head

  arc(150, 130, 170, 170, PI, TWO_PI); 

​

  // Hair on the sides

  rect(65, 130, 170, 195);

  //hair details

  stroke(101, 67, 33);  

  strokeWeight(2);

  line (150, 46, 150, 66);

  stroke(101, 67, 33);  

  strokeWeight(2);

  line (75, 180, 75, 320);

  line (95, 180, 95, 320);

  line (115, 180, 115, 320);

  line (185, 180, 185, 320);

  line (205, 180, 205, 320);

  line (225, 180, 225, 320);

  // Neck

  noStroke();

  fill(229, 181, 161); // Medium light skin color

  rect(123, 220, 55, 60);

​

  // Head (Face)

  fill(232, 190, 172); // Medium light skin tone

  ellipse(150, 150, 145, 165); // Face shape

  //bangs

  stroke(79, 49, 30);  

  strokeWeight(3);

  for (let i = 0; i < 9; i++) {

    line(150, 65, 150 + (i * 10), 110);  // Adjust the x-coordinate of the ending point

  }

  line (150, 65, 225, 100);

  line (150, 65, 220, 90);

  for (let i = 0; i < 9; i++) {

    line(150, 65, 150 - (i * 10), 110);  // Adjust the x-coordinate of the ending point

  }

  line (150, 65, 75, 100);

  line (150, 65, 80, 90);

  // Eyes (pupils follow the cursor)

  let eyeX1 = 115 + (mouseX - 115) * 0.1; // Left pupil X follows the mouse

  let eyeY1 = 135 + (mouseY - 135) * 0.1; // Left pupil Y follows the mouse

  let eyeX2 = 185 + (mouseX - 185) * 0.1; // Right pupil X follows the mouse

  let eyeY2 = 135 + (mouseY - 135) * 0.1; // Right pupil Y follows the mouse

​

  // Restrict pupils within eye boundaries (ensure they stay inside the ellipses)

  let maxX1 = 115 + 5; // Eye boundary for left pupil (ellipse radius - pupil radius)

  let minX1 = 115 - 5;

  let maxY1 = 135 + 1.5; // Eye boundary for left pupil (ellipse radius - pupil radius)

  let minY1 = 135 - 1.5;

  let maxX2 = 185 + 5; // Eye boundary for right pupil (ellipse radius - pupil radius)

  let minX2 = 185 - 5;

  let maxY2 = 135 + 1.5; // Eye boundary for right pupil (ellipse radius - pupil radius)

  let minY2 = 135 - 1.5;

​

  // Left eye

  noStroke();

  fill(255); // White part of eyes

  ellipse(115, 135, 27, 10); // Left eye

  fill(79, 49, 30); // Pupil color

  // Clamp pupil position to stay inside eye boundary

  eyeX1 = constrain(eyeX1, minX1, maxX1);

  eyeY1 = constrain(eyeY1, minY1, maxY1);

  ellipse(eyeX1, eyeY1, 12, 12); // Left pupil

​

  // Right eye

  noStroke();

  fill(255); // White part of eyes

  ellipse(185, 135, 27, 10); // Right eye

  fill(79, 49, 30); // Pupil color

  // Clamp pupil position to stay inside eye boundary

  eyeX2 = constrain(eyeX2, minX2, maxX2);

  eyeY2 = constrain(eyeY2, minY2, maxY2);

  ellipse(eyeX2, eyeY2, 12, 12); // Right pupil

​

  // Nose

  fill(219, 171, 151); // Same skin color for the nose

  triangle(150, 145, 140, 165, 160, 165); // Nose shape

  // Eyelashes (thin lines)

  stroke(0, 0, 0); // Black for eyelashes

  strokeWeight(1); // Thin lines for eyelashes

  // Left eye eyelashes

  line(110, 125, 100, 120); // Upper left eyelashes

  line(110, 125, 105, 115); 

  line(110, 125, 115, 115); 

  // Right eye eyelashes

  line(190, 125, 200, 120); // Upper right eyelashes

  line(190, 125, 190, 115); 

  line(190, 125, 180, 115);

​

  // Mouth (bigger lips)

  stroke(101, 67, 33);

  fill(225, 160, 164); // Light pink color for lips

  beginShape();

  vertex(140, 185);

  bezierVertex(145, 195, 155, 195, 160, 185); // Heart-shaped lips, bigger

  bezierVertex(165, 175, 155, 175, 150, 185);

  endShape(CLOSE);

  // Ears

  fill(232, 190, 172); // Same skin color for the ears

  ellipse(70, 150, 15, 30); // Left ear

  ellipse(230, 150, 15, 30); // Right ear

​

  // Eyebrows (thicker and arched)

  stroke(0, 0, 0); // Black for the eyebrows

  strokeWeight(4); // Thicker eyebrows

  arc(115, 120, 40, 20, PI, TWO_PI); // Left eyebrow (arched)

  arc(185, 120, 40, 20, PI, TWO_PI); // Right eyebrow (arched)

  // Earrings (gold small, thinner, moved down)

  fill(255, 215, 0); // Gold color

  ellipse(70, 170, 8, 18); // Left earring (moved down)

  ellipse(230, 170, 8, 18); // Right earring (moved down)

​

  // Body

  noStroke();

  fill(80, 0, 0);

  rect(75, 250, 150, 150, 30); // Body (moved up)

  fill(229, 181, 161); // Same skin color for the neck and chest

  arc(150, 250, 75, 40, 0, PI, CHORD);

  //body details

  stroke(100, 100, 100);  

  strokeWeight(2);

  line (110, 300, 110, 360);

  line (190, 300, 190, 360);

​

  // Draw flowers on mouse click

  for (let i = 0; i < flowerPosition.length; i++) {

    drawFlower(flowerPosition[i].x, flowerPosition[i].y);

  }

​

  // Handle confetti falling down if celebration has started

  if (celebrationStarted) {

    for (let i = 0; i < confetti.length; i++) {

      confetti[i].y += confetti[i].speedY;  // Move the confetti down

      confetti[i].x += confetti[i].speedX;  // Move the confetti horizontally

      fill(confetti[i].color);

      noStroke();

      ellipse(confetti[i].x, confetti[i].y, 10, 10);

    }

​

    // Remove confetti that has gone off the screen

    confetti = confetti.filter(c => c.y < height);

  }

​

  // Handle falling flowers after celebration

  if (flowerCount >= 5 && !celebrationStarted) {

    celebrationStarted = true;

​

    // Pause for 1 second before the celebration starts

    setTimeout(() => {

      generateConfetti();  // Start the confetti after 1 second

    }, 300);

​

    // Wait for 5 seconds after confetti, make flowers fall, then clear background

    setTimeout(() => {

      makeFlowersFall();  // Start making flowers fall

    }, 3000);  // Confetti and delay time

  }

​

  // Move the falling flowers

  for (let i = 0; i < fallingFlowers.length; i++) {

    fallingFlowers[i].y += fallingFlowers[i].speedY;  // Make flowers fall

    fallingFlowers[i].x += fallingFlowers[i].speedX;  // Add some horizontal drift to the flowers

    drawFlower(fallingFlowers[i].x, fallingFlowers[i].y);

  }

​

  // Remove flowers that have fallen off the screen

  fallingFlowers = fallingFlowers.filter(f => f.y < height);

}

​

// This function draws the flower at the given position

function drawFlower(x, y) {

  fill(255, 255, 255); // White petals

  for (let i = 0; i < 5; i++) {

    ellipse(x + cos(TWO_PI * i / 5) * 15, y + sin(TWO_PI * i / 5) * 15, 20, 20);  // Petals

  }

  fill(255, 255, 0); // Yellow center

  ellipse(x, y, 20, 20); // Flower center

}

​

// This function stores the mouse click position to display flowers

function mousePressed() {

  if (!celebrationStarted) {

    flowerPosition.push(createVector(mouseX, mouseY));  // Store the position of the click

    flowerCount++;  // Increment flower count

  }

}

​

// Generate confetti falling down (random positions and colors)

function generateConfetti() {

  for (let i = 0; i < 100; i++) {

    let x = random(width);

    let y = random(-100, -10);  // Start above the canvas

    let confettiColor = color(random(255), random(255), random(255));  // Random color

    let speedX = random(-2, 2);  // Random horizontal speed

    let speedY = random(2, 5);  // Vertical speed of falling confetti

    confetti.push({ x, y, color: confettiColor, speedX, speedY });

  }

}

​

// Make flowers fall

function makeFlowersFall() {

  for (let i = 0; i < flowerPosition.length; i++) {

    let flower = flowerPosition[i];

    let flowerSpeedX = random(-1, 1);  // Horizontal drift speed for flowers

    let flowerSpeedY = random(2, 4);  // Vertical falling speed for flowers

    fallingFlowers.push({ x: flower.x, y: flower.y, speedX: flowerSpeedX, speedY: flowerSpeedY });

  }

  // Clear the flowers from the initial array

  flowerPosition = [];

}

​