Alignment:
Cohesion:
Separation:

Hello!

Controls

Click/touch/tap anywhere to feed the boids. You can also click/touch/tap and drag to feed the boids continuously. The boids will move towards whereever you touch.

You can also try adjusting the above sliders:

Alignment
Boids will align their rotation with their neighbors.
Cohesion
Boids will try to head to the center of their neighbors.
Separation
Boids will avoid colliding with one another.

Clicking on the visibility icon next to the sliders will show or hide the visualization for that attribute's calculation.

About

This is a GPGPU based boids simulation that uses the WebGL 1.0 specification for good cross-browser support. The boids movement is based on this paper by Craig Reynolds, with the addition of touch interaction and some other minor tweaks for performance.

The image below this big box represents the gpu generated direction for every boid. As such, it is very flashy since it is recalculating the direction every frame, to 32 bit precision.
That is why this box is so big.
It is to make sure that the big flashing image is not displayed when the page is first loaded. I have tried my best to reduce the flashyness of the image while still maintaining most of the raw output from the GPU.

Please do not scroll further if you are photosensitive.