exploding smiley face 5 min timer

function setup() {
  createCanvas(windowWidth, windowHeight);
  startTime = millis(); // Record the start time when the sketch begins
  remainingTimeMs = TIMER_DURATION_MS;

  // Initialize ball properties
  ballRadius = min(width, height) / 10; // Ball size relative to canvas
  ballX = width / 2;
  ballY = height / 2;
  ballSpeedX = random(3, 7) * (random() > 0.5 ? 1 : -1); // Random speed and direction
  ballSpeedY = random(3, 7) * (random() > 0.5 ? 1 : -1);

  textAlign(CENTER, CENTER); // Center align text
  textSize(32); // Set text size for the timer
}

function draw() {
  background(220); // Light gray background

  // Calculate remaining time
  let elapsedTimeMs = millis() - startTime;
  remainingTimeMs = max(0, TIMER_DURATION_MS - elapsedTimeMs); // Ensure time doesn't go negative

  // Format and display the timer
  let minutes = floor(remainingTimeMs / (60 * 1000));
  let seconds = floor((remainingTimeMs % (60 * 1000)) / 1000);
  // nf() formats numbers with leading zeros (e.g., 5 -> "05")
  let formattedTime = nf(minutes, 2) + ':' + nf(seconds, 2);
  fill(0); // Black color for the timer text
  text(formattedTime, width / 2, 50);

  // Ball animation logic
  // The ball moves only if the timer is still running and explosion is not active
  if (remainingTimeMs > 0 && !explosionActive) {
    // Update ball position
    ballX += ballSpeedX;
    ballY += ballSpeedY;

    // Handle bouncing off edges
    if (ballX + ballRadius > width || ballX - ballRadius < 0) {
      ballSpeedX *= -1; // Reverse horizontal speed
    }
    if (ballY + ballRadius > height || ballY - ballRadius < 0) {
      ballSpeedY *= -1; // Reverse vertical speed
    }

    // Change ball color to red when 4 seconds remain
    if (remainingTimeMs <= 4000) {
      fill(255, 0, 0); // Red
    } else {
      fill(255, 255, 0); // Yellow (Changed from blue)
    }
    noStroke(); // No outline for the ball
    ellipse(ballX, ballY, ballRadius * 2); // Draw the ball

    // --- Draw Smiley Face ---
    // Draw face features only when the ball is not exploding
    if (remainingTimeMs > 0 && !explosionActive) {
      stroke(0); // Black color for face features
      strokeWeight(ballRadius * 0.05); // Adjust stroke weight relative to ball size
      fill(0); // Black color for eyes

      // Left Eye
      ellipse(ballX - ballRadius * 0.3, ballY - ballRadius * 0.2, ballRadius * 0.2);
      // Right Eye
      ellipse(ballX + ballRadius * 0.3, ballY - ballRadius * 0.2, ballRadius * 0.2);

      // Mouth
      noFill(); // No fill for the mouth
      arc(ballX, ballY + ballRadius * 0.2, ballRadius * 0.8, ballRadius * 0.6, 0, PI);
    }
    // --- End Smiley Face ---

  } else if (remainingTimeMs <= 0 && !explosionActive) {
    // Timer reached 0, initiate the explosion
    explosionActive = true;
    explosionStartTime = millis(); // Record explosion start time
    ballSpeedX = 0; // Stop the ball's movement
    ballSpeedY = 0;
  }

  // Explosion animation logic
  if (explosionActive) {
    let explosionElapsed = millis() - explosionStartTime;

    // Draw the explosion effect: multiple expanding circles
    for (let i = 0; i < 5; i++) {
      // Map elapsed time to increasing size and decreasing alpha (transparency)
      let size = map(explosionElapsed, 0, explosionDuration, ballRadius * 2, ballRadius * 10);
      let alpha = map(explosionElapsed, 0, explosionDuration, 255, 0);
      fill(255, 100, 0, alpha); // Orange color fading out
      noStroke(); // No outline for explosion circles
      ellipse(ballX, ballY, size * (1 + i * 0.2)); // Draw multiple circles with slight size variations
    }

    // Stop the explosion and animation after its duration
    if (explosionElapsed >= explosionDuration) {
      noLoop(); // Stop the draw loop to freeze the animation
      fill(0); // Black color for final message
      textSize(48);
      text("TIME'S UP!", width / 2, height / 2); // Display final message
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // Resize canvas to new window dimensions
  // Recalculate ball radius based on new dimensions
  ballRadius = min(width, height) / 10;
  // If explosion is active, ensure it stays centered
  if (explosionActive) {
    ballX = width / 2;
    ballY = height / 2;
  }
  // If timer is running, keep ball centered or adjust its position to stay within bounds
  else if (remainingTimeMs > 0) {
    ballX = constrain(ballX, ballRadius, width - ballRadius);
    ballY = constrain(ballY, ballRadius, height - ballRadius);
  }
}