AI Bubble Pop - Satisfying Click Game Pop colorful bubbles as they float up! Click bubbles to burst

function setup() {
  createCanvas(windowWidth, windowHeight); // 2D canvas

  // Use HSB for nice rainbow colors
  colorMode(HSB, 360, 100, 100, 255);
  noStroke();
  textFont('system-ui');
  textSize(24);

  // Setup pop sound: one oscillator + envelope reused for all pops
  popOsc = new p5.Oscillator('sine');
  popEnv = new p5.Envelope();
  // Fast, percussive pop: short attack/decay
  popEnv.setADSR(0.001, 0.1, 0.0, 0.1);
  popEnv.setRange(0.5, 0.0); // max amp, sustain amp
  popOsc.amp(popEnv);
  popOsc.start();
  popOsc.freq(400); // base; will be changed per bubble

  // Create initial bubbles
  for (let i = 0; i < NUM_BUBBLES; i++) {
    bubbles.push(new Bubble());
  }
}

function draw() {
  // Slightly animated background
  background(230, 50, 10); // HSB: deep blue-ish background

  // Draw and update bubbles
  for (let b of bubbles) {
    b.update();
    b.show();
  }

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

  // Draw score
  drawScore();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

class Bubble {
  constructor() {
    this.reset(true);
  }

  reset(initial = false) {
    this.r = random(BUBBLE_MIN_R, BUBBLE_MAX_R);
    this.x = random(this.r, width - this.r);

    // Start from bottom; if initial, randomize a bit up the screen
    if (initial) {
      this.y = random(height + this.r * 0.5, height + this.r * 4);
    } else {
      this.y = height + this.r * 2;
    }

    this.speed = random(0.7, 1.8);
    this.driftAmount = random(0.2, 0.8);
    this.driftOffset = random(TWO_PI);

    const hue = random(180, 300); // cool colors
    const sat = random(60, 100);
    const bri = random(70, 100);
    this.col = color(hue, sat, bri, 180);
  }

  update() {
    // Float up
    this.y -= this.speed;

    // Gentle horizontal drift using a sine wave
    this.x += sin(frameCount * 0.01 + this.driftOffset) * this.driftAmount;

    // Keep within horizontal bounds
    this.x = constrain(this.x, this.r, width - this.r);

    // If bubble went off the top, respawn at bottom
    if (this.y + this.r < 0) {
      this.reset(false);
    }
  }

  show() {
    // Outer soft bubble
    fill(hue(this.col), saturation(this.col), brightness(this.col), 80);
    circle(this.x, this.y, this.r * 2.3);

    // Main bubble
    fill(this.col);
    circle(this.x, this.y, this.r * 2);

    // Highlight
    fill(0, 0, 100, 180);
    circle(this.x - this.r * 0.4, this.y - this.r * 0.4, this.r * 0.6);
  }

  contains(px, py) {
    return dist(px, py, this.x, this.y) < this.r;
  }

  pop() {
    // Play sound and create particle burst
    playPopSound(this);
    createParticleBurst(this.x, this.y, this.col);

    // Respawn bubble at bottom
    this.reset(false);
  }
}

class Particle {
  constructor(x, y, c) {
    this.pos = createVector(x, y);

    const angle = random(TWO_PI);
    const speed = random(1.5, 4);
    this.vel = p5.Vector.fromAngle(angle).mult(speed);

    this.gravity = createVector(0, 0.04);
    this.friction = 0.96;

    this.life = random(25, 45);
    this.totalLife = this.life;

    const baseHue = hue(c);
    const sat = saturation(c);
    const bri = brightness(c);
    // Slight color variation
    this.col = color(
      baseHue + random(-10, 10),
      sat,
      bri,
      255
    );
    this.size = random(3, 7);
  }

  update() {
    this.vel.mult(this.friction);
    this.vel.add(this.gravity);
    this.pos.add(this.vel);
    this.life--;
  }

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

  show() {
    const alpha = map(this.life, 0, this.totalLife, 0, 255);
    fill(hue(this.col), saturation(this.col), brightness(this.col), alpha);
    circle(this.pos.x, this.pos.y, this.size);
  }
}

function ensureAudioStarted() {
  if (!audioStarted) {
    userStartAudio(); // resumes AudioContext on first user gesture
    audioStarted = true;
  }
}

function playPopSound(bubble) {
  // Map bubble size to pitch: small bubbles -> higher pitch
  const freq = map(
    bubble.r,
    BUBBLE_MIN_R,
    BUBBLE_MAX_R,
    800, // small radius
    200, // large radius
    true
  );
  popOsc.freq(freq);
  popEnv.play(); // triggers envelope on the oscillator
}

function createParticleBurst(x, y, col) {
  const count = floor(random(12, 22));
  for (let i = 0; i < count; i++) {
    particles.push(new Particle(x, y, col));
  }
}

function mousePressed() {
  handlePop(mouseX, mouseY);
}

function touchStarted() {
  // On many platforms, touch also triggers mousePressed, but this ensures
  // touch-only environments still work nicely.
  handlePop(mouseX, mouseY);
  return false; // prevent default scrolling on touch
}

function handlePop(px, py) {
  ensureAudioStarted();

  // Pop only one bubble per click, preferring the one drawn last (topmost)
  for (let i = bubbles.length - 1; i >= 0; i--) {
    if (bubbles[i].contains(px, py)) {
      bubbles[i].pop();
      score++;
      break;
    }
  }
}

function drawScore() {
  push();
  textAlign(LEFT, TOP);
  fill(0, 0, 100, 220); // bright text
  text("Score: " + score, 16, 16);
  pop();
}