<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /* Prevent scrollbars from appearing */
            background-color: #f0f0f0; /* Light grey background */
        }
        canvas {
            display: block;
            background: #ffffff; /* White background for the canvas */
            border: 2px solid #ccc; /* Light grey border */
            margin: 20px auto; /* Center the canvas */
        }
    </style>
</head>
<body>
    <canvas id="ballCanvas"></canvas>

    <script>
        // Get the canvas element and its context
        const canvas = document.getElementById('ballCanvas');
        const ctx = canvas.getContext('2d');

        // Set the size of the canvas
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // Ball properties
        const balls = [];
        const ballCount = 5000;

        // Create Ball class
        class Ball {
            constructor(x, y, radius, color) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.dx = Math.random() * 4 - 2; // Change in x (speed)
                this.dy = Math.random() * 4 - 2; // Change in y (speed)
            }

            // Draw the ball on the canvas
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.closePath();
            }

            // Update ball position and check for collisions
            update() {
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.dx = -this.dx; // Reverse direction when hitting the wall
                }
                if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                    this.dy = -this.dy; // Reverse direction when hitting the wall
                }
                this.x += this.dx;
                this.y += this.dy;
            }
        }

        // Create multiple balls
        for (let i = 0; i < ballCount; i++) {
            const radius = Math.random() * 20 + 10; // Random radius between 10 and 30
            const x = Math.random() * (canvas.width - radius * 2) + radius; // Random x
            const y = Math.random() * (canvas.height - radius * 2) + radius; // Random y
            const color = `hsl(${Math.random() * 360}, 100%, 50%)`; // Random color
            balls.push(new Ball(x, y, radius, color));
        }

        // Animation loop
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            balls.forEach(ball => {
                ball.draw(); // Draw the ball
                ball.update(); // Update the ball's position
            });
            requestAnimationFrame(animate); // Call animate again for the next frame
        }

        // Start the animation
        animate();
    </script>
</body>
</html>