AUTONOMOUS AGENTS / FLOCKING / P5.JS

Sealife.

An aquarium seen from above. Two hundred small fish steer by three rules, two larger animals hunt plankton, and the rest is trails.

What it is

The piece is a flocking system after Craig Reynolds. The fish do not know where the school is going; each one only looks at neighbours within a short radius and adjusts its own velocity. The shapes you see are what that produces. I was more interested in the visual effect than in building complicated behaviour: long, slightly Brownian trails that read like flow fields, inspired by the generative work of Cao Yuxi, which I saw at the LUX exhibition in 2021.

The version at the top of the home page is this same sketch, recoloured to the site palette. Below is the original, in its original colours and its original 400 × 800 canvas.

The three rules

Each fish checks every other fish and reacts only to the ones close enough.

Each rule produces a steering force: the speed the fish wants minus the speed it has, limited to a maximum force of 0.2. The three forces are added to the fish's acceleration, and its speed is capped at 5.

The seekers

Two larger animals live apart from the school. They use Reynolds' seek: find the nearest piece of plankton, steer towards it, and eat it once they are closer than 5 px. When the plankton runs out, they have nothing left to chase and drift on.

Sources

Fish: Coding Challenge #124: Flocking Simulation by Daniel Shiffman, after Craig Reynolds' boids. Seekers: The Nature of Code 5.2 — Seeking a Target. I coded along with both and adapted the code.

Original source, untouched: sketch.js · sealife.js