Sketch 2026-04-21 19:20

function setup() {
  createCanvas(windowWidth, windowHeight);
  // Tip: Use windowWidth/windowHeight for responsive canvas

  // Initialize ball properties
  ballRadius = 20; // Set ball radius to 20 pixels
  ballX = width / 2; // Start ball in the middle of the canvas horizontally
  ballY = height / 4; // Start ball near the top of the canvas vertically

  // Give the ball an initial random velocity
  ballVX = random(-5, 5); // Random x-velocity between -5 and 5
  ballVY = random(-2, 2); // Random y-velocity between -2 and 2

  // Calculate pit position. Its bottom edge should be at the canvas bottom.
  pitX = width / 2;
  pitY = height - pitRadius; // Center Y is pitRadius above the bottom

  // Start the audio context (important for any sound)
  userStartAudio();

  // Setup the sound oscillator
  ballSound = new p5.Oscillator();
  ballSound.setType('sine'); // A simple sine wave
  ballSound.freq(220);       // A low frequency (A3)
  ballSound.amp(0);          // Start with 0 volume
  ballSound.start();         // Start the oscillator, but it won't make sound yet
}

function draw() {
  background(220, 50); // Clear the canvas with a light gray background each frame, but allow previous frames to fade

  // --- Draw the Pit ---
  noFill();
  stroke(150); // Gray outline for the pit
  strokeWeight(2);
  ellipse(pitX, pitY, pitRadius * 2);

  // --- NEW: Draw the Crowd ---
  noStroke();
  for (let i = 0; i < crowd.length; i++) {
    fill(crowd[i].color);
    ellipse(crowd[i].x, crowd[i].y, crowd[i].size);
  }

  if (!balloonPopped) {
    // If the balloon is not popped, update its physics and draw it

    // 1. Update ball's position based on its velocity
    ballX += ballVX;
    ballY += ballVY;

    // 2. Apply gravity to the ball's y-velocity
    ballVY += gravity;

    // 3. Handle bouncing off the vertical edges (left/right)
    if (ballX - ballRadius <= 0 || ballX + ballRadius >= width) {
      ballVX *= -1; // Reverse the x-velocity
      ballVX *= 0.95; // Simulate energy loss
    }

    // 4. Handle bouncing off the canvas top edge
    if (ballY - ballRadius <= 0) {
      ballVY *= -1; // Reverse the y-velocity
      ballVY *= 0.9; // Simulate energy loss
      ballY = ballRadius; // Prevent sticking to the top
    }

    // 5. Handle bouncing off the canvas bottom edge OR the pit curve
    if (ballY + ballRadius >= height) {
      // Ball has hit the canvas bottom line
      ballY = height - ballRadius; // Place it on the ground
      ballVY *= -1; // Reverse vertical velocity
      ballVY *= 0.9; // Energy loss

      // Play sound, trigger particles, and start squish effect
      playBounceSound();
      emitParticles(ballX, ballY); // Emit particles at bounce location
      squishTimer = SQUISH_DURATION; // Start squish timer

      // Check if the ball is now horizontally inside the pit's range
      if (abs(ballX - pitX) < pitRadius) {
        inPit = true; // Ball is now considered to be "in the pit"
      }
    }

    // 6. If the ball is inside the pit, handle collision with its curved boundary
    if (inPit) {
      let d = dist(ballX, ballY, pitX, pitY);
      if (d + ballRadius >= pitRadius) {
        // Collision with the pit's curved boundary!
        // Position correction: Move the ball out of the pit
        let angle = atan2(ballY - pitY, ballX - pitX);
        ballX = pitX + cos(angle) * (pitRadius - ballRadius);
        ballY = pitY + sin(angle) * (pitRadius - ballRadius);

        // Velocity reflection (more accurate for curved surfaces)
        let normalVec = createVector(ballX - pitX, ballY - pitY);
        normalVec.normalize();
        let velVec = createVector(ballVX, ballVY);
        let dot = velVec.dot(normalVec);
        let reflectedVel = velVec.sub(normalVec.mult(2 * dot));

        ballVX = reflectedVel.x * 0.9; // Apply energy loss
        ballVY = reflectedVel.y * 0.9; // Apply energy loss

        // Play sound, trigger particles, and start squish effect (for pit bounce)
        playBounceSound();
        emitParticles(ballX, ballY); // Emit particles at bounce location
        squishTimer = SQUISH_DURATION; // Start squish timer
      }

      // Safety check: If the ball somehow escapes the pit, reset inPit
      if (ballY > height + ballRadius || abs(ballX - pitX) > pitRadius + ballRadius * 2) {
        inPit = false;
      }
    }

    // Calculate squish factor
    let currentSquish = 1; // Default to no squish
    if (squishTimer > 0) {
      currentSquish = map(cos(map(squishTimer, SQUISH_DURATION, 0, 0, PI)), -1, 1, 1.2, 0.8);
      squishTimer--;
    }

    // 7. Draw the ball with squish effect
    noStroke(); // Don't draw an outline for the ball
    fill(0, 100, 200); // Set ball color to a shade of blue
    ellipse(ballX, ballY, ballRadius * 2 / currentSquish, ballRadius * 2 * currentSquish);
  } else {
    // If the balloon is popped, draw the burst effect

    if (burstTimer > 0) {
      // Draw an expanding, fading circle as a burst effect
      noFill();
      stroke(255, 0, 0, map(burstTimer, BURST_DURATION, 0, 200, 0)); // Red, fading stroke
      strokeWeight(map(burstTimer, BURST_DURATION, 0, 1, 10)); // Expanding stroke
      ellipse(ballX, ballY, ballRadius * 2 + map(burstTimer, BURST_DURATION, 0, 0, ballRadius * 3)); // Expanding size
      burstTimer--;
    } else {
      // After burst effect, reset the balloon
      balloonPopped = false;
      // Re-initialize ball properties to make it reappear
      ballRadius = 20;
      ballX = width / 2;
      ballY = height / 4;
      ballVX = random(-5, 5);
      ballVY = random(-2, 2);
      inPit = false; // Ensure inPit is reset too
    }
  }

  // Update and display particles
  for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].show();
    if (particles[i].isDead()) {
      particles.splice(i, 1); // Remove dead particles
    }
  }
}

function playBounceSound() {
  ballSound.amp(0.5, 0.05); // Fade in to 0.5 volume over 0.05 seconds
  ballSound.amp(0, 0.2);   // Fade out to 0 volume over 0.2 seconds
}

function emitParticles(x, y) {
  let numParticles = random(5, 15); // Emit 5 to 15 particles
  for (let i = 0; i < numParticles; i++) {
    // Random velocity, slightly upwards and outwards
    let vx = random(-2, 2);
    let vy = random(-4, -1);
    particles.push(new Particle(x, y, vx, vy));
  }
}

class Particle {
  constructor(x, y, vx, vy) {
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.alpha = 255; // Start fully opaque
    this.size = random(2, 5); // Random size
    this.color = color(random(200, 255), 100, 0); // Orange/red color
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
    this.vy += gravity * 0.5; // Apply a lighter gravity to particles
    this.alpha -= random(5, 10); // Fade out over time
  }

  show() {
    noStroke();
    fill(this.color, this.alpha);
    ellipse(this.x, this.y, this.size);
  }

  isDead() {
    return this.alpha <= 0;
  }
}

function generateCrowd() {
  crowd = []; // Clear existing crowd if any
  for (let i = 0; i < NUM_CROWD_MEMBERS; i++) {
    let x = random(width);
    let y = random(height * 0.8, height); // Appear at the bottom 20% of the screen
    let size = random(5, 15);
    let color = random(150, 200); // Shades of gray for simplicity
    crowd.push({ x: x, y: y, size: size, color: color });
  }
  console.log('Crowd generated!');
}

function mousePressed() {
  if (!balloonPopped) {
    // Check if the mouse click is within the ball's area
    let d = dist(mouseX, mouseY, ballX, ballY);
    if (d < ballRadius) {
      balloonPopped = true;   // Set popped state to true
      burstTimer = BURST_DURATION; // Start the burst timer
      console.log('Balloon popped!');
      // Optional: Add a sound effect for popping here if you include p5.sound
    }
  }
}

function keyPressed() {
  if (key === 'y' || key === 'Y') { // Check if the pressed key is 'y' or 'Y'
    generateCrowd();
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // This function is called when the preview panel is resized,
  // making your canvas responsive to different window sizes.
  // We also need to re-initialize the ball's position to keep it centered
  ballX = width / 2;
  // Re-calculate pit position based on new canvas size
  pitX = width / 2;
  pitY = height - pitRadius;
  // If ball was in pit, re-adjust its position if it's now outside due to resize
  if (inPit) {
    let d = dist(ballX, ballY, pitX, pitY);
    if (d + ballRadius >= pitRadius) {
      let angle = atan2(ballY - pitY, ballX - pitX);
      ballX = pitX + cos(angle) * (pitRadius - ballRadius);
      ballY = pitY + sin(angle) * (pitRadius - ballRadius);
    }
  }
  // Note: We don't reset ballY or velocities to allow continuous bouncing
}