Bouncing Balls Animation

A simple HTML5 Canvas and JavaScript animation that shows five colored balls (red, blue, green, orange, and white) bouncing within a rectangular container.

Features

• Smooth ball animation using requestAnimationFrame
• Physics-based bouncing behavior against container walls
• Different colored balls with random initial velocities
• Responsive canvas with clean borders

How to Run

1. Simply open the index.html file in any modern web browser
2. The animation will start automatically

Customization

You can easily customize the animation by modifying the JavaScript file:

• Change the canvas size by adjusting canvas.width and canvas.height values
• Add more balls by adding more colors to the colors array
• Adjust ball speed by modifying the velocity multiplier in the Ball constructor
• Change ball size by modifying the radius value

Implementation Details

The animation uses HTML5 Canvas for rendering and vanilla JavaScript for the animation logic. Each ball is an instance of the Ball class with its own position, velocity, radius, and color properties.