Flags
The same flock four ways. They stack.
Use it
One script, then a canvas. Height is the size; a wider canvas gives them room to roam.
<script src="https://cdn.jsdelivr.net/gh/TonkaTuff/swarm@v0.3.0/dist/swarm.min.js"></script>
<canvas class="swarm" width="300" height="200" data-swarm-body="starlings"></canvas>| attribute | value | what it does |
|---|---|---|
| data-swarm-body | name | any name above |
| data-swarm-n | number | how many birds at a 64px height, scaled up with size (1800) |
| data-swarm-reach | number | the flock's size as a fraction of the height (0.3) |
| data-swarm-wave | number | how strongly density waves roll through it (1) |
| data-swarm-tempo | number | how fast it all happens (1) |
| data-swarm-spin / -passes | number | bait balls: how fast the ball turns (0.5), how often a predator comes through (1) |
| data-swarm-sync / -period / -duty | number | fireflies: blink together with a wave (0 or 1), seconds per blink (2.2), how long each flash lasts as a fraction (0.22) |
| data-swarm-form | ghost · hive · scramble · marathon | blue ghosts glow instead of blinking; a hive is entrance traffic instead of a cluster; a crowd can be a scramble crossing or a marathon |
| data-swarm-count / -bright / -leaf / -width / -lanes | number | jellyfish in the bloom (9); how bright the bay lights (1); 1 for ants carrying leaves; the trail's width (0.02); lanes across a concourse (5) |
| data-swarm-ink / -lite / -ground | 1 | monochrome dots that follow the page theme · half the dots · a dusk sky behind |
| data-swarm-glow | 0 | no soft glow, just the dots on a clear canvas |