Murmuration Hunt
Three rival flocks of 200 boids weave, swarm, and ambush — last color flying wins.
What this is
A twilight horizon with twinkling stars and a soft warm sun haze. Six hundred glowing triangles streak through it in three colors — red, blue, gold. Same color flocks together. Different colors fight. Wounded boids dim. Death puffs out as a spark in flock color. When one color is the only one left, a glassy banner declares the winner and a fresh round spawns. The trail buffer makes every formation look like a calligraphy stroke.
Why this is mind-blowing
Reynolds boids on their own are pretty. Reynolds boids in three rival armies with hunt-from-above bias is cinema. You'll see a flock split to flank, a swarm of one color get pinned and shredded, sudden ambushes from above, and tiny clouds of survivors regrouping for a comeback. No path-planning, no FSM — just emergent murmuration warfare.
Build a single-file HTML page that runs three rival flocks of 200 boids each
on a twilight sky. Flocks of the same color do classic Reynolds rules
(separation, alignment, cohesion). Different colors fight — flee when
outnumbered, hunt from above, deal damage in close range. Death sparks puff
out in flock color. Last color flying gets a glassy victory banner and the
round resets. Spatial hash for performance. No user input — autoplay forever.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- SoA `Float32Array`s plus a head/next linked-list spatial hash gives you O(n) Reynolds for 600 agents in one canvas.
- Two-canvas additive blending — cache the background, fade an offscreen trail buffer with `destination-out`, composite with `lighter` — turns boids into glowing streaks for free.
- Hunt-from-above bias (a y-offset on enemy attraction) reads visually as predator behavior even though the rule is one line of math.