Concept
There’s a video I saw a while back of starlings over a fishing village. Thousands of them moving together, and when a hawk dives through, you can see this wave pattern spread across the whole flock. Not instant panic. The fear actually travels through them. That’s what I wanted to build. A flock where panic propagates like a physical wave.
Embedded Sketch
Implementation
The base is Reynolds’ Boids. Three behaviors:
Separation – birds avoid crowding
Alignment – birds match neighbors’ direction
Cohesion – birds stay near the group center
Standard flocking. The custom part is wave propagation:
propagateWave(birds) {
let waveRadius = 60;
let maxFearDetected = 0;
for (let other of birds) {
let d = p5.Vector.dist(this.pos, other.pos);
if (d > 0 && d < waveRadius) {
if (other.fearLevel > maxFearDetected) {
maxFearDetected = other.fearLevel;
}
}
}
if (maxFearDetected > 0.3) {
this.fearLevel = min(this.fearLevel + maxFearDetected * 0.15, 1);
}
}
Each bird checks nearby birds. If a neighbor is scared (fear > 0.3), this bird gets scared too. The fear value spreads outward. Scared birds also fly faster, which makes the wave visible.
Pretty simple but it creates the ripple effect I wanted.
Visual Design
Night scene because murmurations happen at dusk. Three-color gradient sky (dark blue to purple-blue). 200 stars with individual twinkle speeds using sin waves. Moon in upper right with some simple craters.
City skyline at bottom is procedural. Random building heights and widths. Windows are generated once at setup (warm yellow and cool white mix) so they don’t flicker every frame.
Bird shapes gave me trouble. Started with simple ellipses. Then tried basic wing animation. Eventually built proper silhouettes using beginShape() with vertices for beak, V-shaped wings, and split tail. Wings flap using sin waves, faster when the bird is panicked.
First version had birds as pure black (5,5,10). They disappeared into the night sky. Changed to dark gray (40,45,60) and now they’re visible as silhouettes without breaking the atmosphere.
Development Process
Basic flocking
Got separation, alignment, cohesion working with simple ellipse shapes. No visuals yet, just wanted the math right.
Sunset version
Added gradient background, sun, city silhouette. Still had simple bird shapes but the scene looked better. This is when I added the wave propagation code.
Night redesign
Sun at night made no sense. Switched to moon and stars. Changed gradient to proper night colors. Added twinkling to stars and fixed building lights so they don’t flicker.
Final birds
Replaced simple shapes with actual bird silhouettes. Beak, wings, split tail. Removed glow effects. Fixed color so birds don’t blend into sky.
What Worked / What Didn’t
Wave propagation is visible. You can see panic spread through the flock when you move your cursor through them. That was the main goal so that worked.
Visual iteration took longer than expected. Building lights kept flickering (was generating windows every frame instead of once). Birds were invisible against dark sky. Had to adjust colors multiple times.
Motion trails looked wrong. Added them thinking they’d show movement better but they just made everything muddy. Removed them completely.
If I continue this: add sound (wing beats that get louder/faster during panic), multiple separate flocks instead of one big one, or maybe pheromone trails that fade over time.
References
Craig Reynolds’ Boids algorithm (1986)
Nature of Code Chapter 6 (Autonomous Agents)
That fishing village murmuration video