Implementation of Boids simulations rules in plain Javascript.
- to run open index file using a live server.
- pause the simulation by pressing p key
- attract boid to your mouse cursor by pressing and holding left mouse key
Note
The code is not yet optimized and a large number of boids might cause a saturation of browser resources
The boids follow the three main rules that defines a boid:
- boids tend to fly towards the average position (the centre of mass) of neighbouring boids
- boids try to avoid collision with other boids
- boids tend to head in the same direction (average velocity) of neighbouring boids
plus some extra:
- boids tend to avoid screen border
- boids tend to follow mouse pointer if left click button is pressed
- boids tend to the center of the screen if no boid is in proximity
You can play around with the simulation parameters inside the settings file. The meaning of each parameter is explained below:
Parameter | Description |
---|---|
numberOfBoids | number of rendered boids object |
inertia | tendency to maintain the same orientation |
centreOfMassFactor | attraction strength of rule 1 |
fieldOfView | radius of view circle |
showFieldOfView | show field of view circle around boids |
proximityThresh | threshold distance for rule 2 |
proximityDeviationFactor | deviation strength of rule 2 |
centreOfVelocityFactor | attraction strength of rule 3 |
speedCap | max reachable speed |
boundingSize | size of bounding box (distance from screen border) |
boundersDeviationFactor | repulsion strength of bounding box |
windDirection | direction and strength of wind (2d array) |
placeTendencyFactor | attraction strength to cursor |