Sketch 2026-06-18 13:29

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Set cake dimensions and position relative to canvas size
  cakeWidth = min(width * 0.6, 400); // Max 400px wide
  cakeHeight = cakeWidth * 0.6;
  cakeX = width / 2;
  cakeY = height / 2 + cakeHeight / 4; // Position slightly below center

  // Set the text properties
  textSize(min(width * 0.1, 80)); // Max 80px
  textAlign(CENTER, CENTER);
  textFont('Georgia'); // A classic font for birthdays
}

function draw() {
  background(240, 250, 255); // Light pastel background

  // Draw the "Happy Birthday!" message
  fill(0, 50, 100); // Dark blue text
  // Position text above the cake
  text("Happy Birthday!", width / 2, cakeY - cakeHeight / 2 - min(width * 0.05, 50));

  // --- Draw the cake ---
  noStroke();

  // Cake base (bottom layer)
  fill(255, 200, 150); // Light brown/cake color
  rect(cakeX - cakeWidth / 2, cakeY - cakeHeight / 2, cakeWidth, cakeHeight, 5); // Rounded corners

  // Frosting (top layer)
  fill(255, 255, 255, 220); // White, slightly transparent frosting
  // Using a series of arcs for a wavy frosting effect
  arc(cakeX - cakeWidth / 2, cakeY - cakeHeight / 2, cakeWidth / 2, cakeHeight / 4, PI, TWO_PI);
  arc(cakeX + cakeWidth / 2, cakeY - cakeHeight / 2, cakeWidth / 2, cakeHeight / 4, PI, TWO_PI);
  // Fill the space between arcs with a rectangle
  rect(cakeX - cakeWidth / 4, cakeY - cakeHeight / 2 - cakeHeight / 8, cakeWidth / 2, cakeHeight / 4, 5);

  // --- Draw candles ---
  let candleSpacing = cakeWidth / (candleCount + 1);
  let candleHeight = cakeHeight / 3;
  let candleWidth = 5;

  for (let i = 0; i < candleCount; i++) {
    let candleX = cakeX - cakeWidth / 2 + (i + 1) * candleSpacing;
    let candleY = cakeY - cakeHeight / 2 - candleHeight / 2;

    // Candle stick
    fill(255, 150, 150); // Pink candle
    rect(candleX - candleWidth / 2, candleY - candleHeight / 2, candleWidth, candleHeight, 2);

    // Candle flame (animated)
    let flameWidth = candleWidth * 1.5;
    let flameHeight = candleHeight * 0.8;

    // Use noise for a more organic flicker
    let flicker = noise(frameCount * 0.1 + i * 100); // Different flicker for each candle
    let currentFlameWidth = map(flicker, 0, 1, flameWidth * 0.8, flameWidth * 1.2);
    let currentFlameHeight = map(flicker, 0, 1, flameHeight * 0.8, flameHeight * 1.2);

    // Yellow core
    fill(255, 255, 0, 200); // Yellow, slightly transparent
    ellipse(candleX, candleY - candleHeight / 2 - currentFlameHeight / 4, currentFlameWidth, currentFlameHeight);

    // Orange outer glow
    fill(255, 165, 0, 150); // Orange, more transparent
    ellipse(candleX, candleY - candleHeight / 2 - currentFlameHeight / 4, currentFlameWidth * 1.2, currentFlameHeight * 1.2);
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // Recalculate cake properties on resize
  cakeWidth = min(width * 0.6, 400);
  cakeHeight = cakeWidth * 0.6;
  cakeX = width / 2;
  cakeY = height / 2 + cakeHeight / 4;
  textSize(min(width * 0.1, 80));
}