A real-time simulation of boids (bird-oid objects) using HTML5 Canvas and JavaScript. This project demonstrates emergent behavior through the implementation of three simple rules:
- Separation: avoid crowding neighbors
- Alignment: steer towards average heading of neighbors
- Cohesion: steer towards average position of neighbors
- Full viewport canvas
- Responsive design
- Smooth animation
- 100 boids with realistic flocking behavior
- Dark theme for better visibility
Simply open the index.html
file in a web browser to see the simulation in action.
The simulation is built using vanilla JavaScript and HTML5 Canvas. The boids are represented as simple circles that follow the flocking rules. The simulation runs at the browser's refresh rate using requestAnimationFrame
.
The simulation runs automatically and will adjust to window resizing. No user input is required to view the flocking behavior.