Untitled

/**
 * Class representing a Ball.
 */
class Ball {
    /**
     * Constructor for the Ball class.
     *
     * @param {number} x - The x-coordinate of the ball's position.
     * @param {number} y - The y-coordinate of the ball's position.
     * @param {number} radius - The radius of the ball.
     * @param {number} speedX - The speed of the ball in the x-direction.
     * @param {number} speedY - The speed of the ball in the y-direction.
     */
    constructor(x, y, radius, speedX, speedY) {
        /** @private */
        this.x = x;

        /** @private */
        this.y = y;

        /** @private */
        this.radius = radius;

        /** @private */
        this.speedX = speedX;

        /** @private */
        this.speedY = speedY;
    }

    /**
     * Updates the position of the ball based on its speed.
     *
     * @param {number} canvasWidth - The width of the canvas.
     * @param {number} canvasHeight - The height of the canvas.
     */
    updatePosition(canvasWidth, canvasHeight) {
        this.x += this.speedX;
        this.y += this.speedY;

        // Check if the ball has hit the boundaries of the canvas
        if (this.x + this.radius > canvasWidth || this.x - this.radius < 0) {
            this.speedX = -this.speedX;
        }

        if (this.y + this.radius > canvasHeight || this.y - this.radius < 0) {
            this.speedY = -this.speedY;
        }
    }

    /**
     * Draws the ball on the canvas.
     *
     * @param {CanvasRenderingContext2D} ctx - The rendering context of the canvas.
     */
    draw(ctx) {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = "red";
        ctx.fill();
        ctx.closePath();
    }
}

/**
 * Function to initialize and animate the bouncing balls inside a circle.
 *
 * @param {HTMLCanvasElement} canvas - The canvas element to draw the balls on.
 * @param {number} numBalls - The number of balls to create.
 */
function animateBouncingBalls(canvas, numBalls) {
    const ctx = canvas.getContext("2d");
    const canvasWidth = canvas.width;
    const canvasHeight = canvas.height;
    const balls = [];

    // Create the balls with random positions, radii, and speeds
    for (let i = 0; i < numBalls; i++) {
        const x = Math.random() * canvasWidth;
        const y = Math.random() * canvasHeight;
        const radius = Math.random() * 20 + 10;
        const speedX = Math.random() * 4 - 2;
        const speedY = Math.random() * 4 - 2;

        balls.push(new Ball(x, y, radius, speedX, speedY));
    }

    // Animation loop
    function animate() {
        // Clear the canvas
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);

        // Update and draw each ball
        balls.forEach(ball => {
            ball.updatePosition(canvasWidth, canvasHeight);
            ball.draw(ctx);
        });

        // Request the next animation frame
        requestAnimationFrame(animate);
    }

    // Start the animation
    animate();
}

// Usage Example for animateBouncingBalls

// Create a canvas element
const canvas = document.createElement("canvas");
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);

// Animate 10 bouncing balls inside the canvas
animateBouncingBalls(canvas, 10);