let bubbles = [];
let bubblesPopped = 0; // Counter for popped bubbles

function setup() {
    createCanvas(windowWidth, windowHeight);
    for (let i = 0; i < 100; i++) {
        bubbles.push(new Bubble());
    }
}

function draw() {
    background(0); // Set background color to black
    for (let i = 0; i < bubbles.length; i++) {
        bubbles[i].update(); // Move the "update" function inside the Bubble class
        bubbles[i].display();
        for (let j = i + 1; j < bubbles.length; j++) {
            if (bubbles[i].intersects(bubbles[j])) {
                bubbles[i].bounce(bubbles[j]);
            }
        }
    }

    // Display the bubbles popped counter
    fill(255);
    textSize(20);
    text(`Bubbles Popped: ${bubblesPopped}`, 20, 30);
}

function mousePressed() {
    for (let i = bubbles.length - 1; i >= 0; i--) {
        if (bubbles[i].contains(mouseX, mouseY)) {
            bubbles.splice(i, 1); // Remove the bubble if the mouse is clicked inside it
            bubblesPopped++; // Increment the bubbles popped counter
            break; // Exit the loop after removing the first bubble found
        }
    }
}

function mouseDragged() {
    for (let i = 0; i < bubbles.length; i++) {
        if (bubbles[i].contains(mouseX, mouseY)) {
            bubbles[i].x = mouseX;
            bubbles[i].y = mouseY;
        }
    }
}

class Bubble {
    constructor() {
        this.x = random(width);
        this.y = random(height);
        this.size = random(10, 60); // Random size between 10 and 60 pixels
        this.speed = random(1, 4);
        this.color = randomColor(); // Random neon green, orange, or yellow color
        this.velocityX = random([-1, 1]) * this.speed; // Random positive or negative horizontal velocity
        this.velocityY = random([-1, 1]) * this.speed; // Random positive or negative vertical velocity
    }

    update() {
        this.x += this.velocityX;
        this.y += this.velocityY;

        // Bounce off edges
        if (this.x - this.size / 2 < 0 || this.x + this.size / 2 > width) {
            this.velocityX *= -1;
        }
        if (this.y - this.size / 2 < 0 || this.y + this.size / 2 > height) {
            this.velocityY *= -1;
        }
    }

    display() {
        fill(this.color); // Set bubble color to neon green, orange, or yellow
        noStroke();
        ellipse(this.x, this.y, this.size * 2);
    }

    intersects(other) {
        let distance = dist(this.x, this.y, other.x, other.y);
        return distance < this.size + other.size;
    }

    bounce(other) {
        let tempX = this.velocityX;
        let tempY = this.velocityY;
        this.velocityX = other.velocityX;
        this.velocityY = other.velocityY;
        other.velocityX = tempX;
        other.velocityY = tempY;
    }

    contains(x, y) {
        let distance = dist(x, y, this.x, this.y);
        return distance < this.size;
    }
}

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

function randomColor() {
    // Generate random neon green, orange, or yellow color
    let colors = ['#00ff00', '#ff9900', '#ffff00'];
    return random(colors);
}