A co-creative drawing application where autonomous agents act as your brush. Draw a path on the canvas and a swarm of vehicles steers through a flow field shaped by your stroke — leaving trails that feel alive, unpredictable, and uniquely their own. Inspired by natural dynamic mediums like watercolor and Turkish marbling art (Ebru).
Autonomous agents are computational entities that operate independently, perceiving and responding to their environment based on simple behavioral rules. In this project they are conceptualized as vehicles that dynamically interact with a flow field to produce emergent visual patterns.
Key characteristics
| Autonomy | Each agent acts independently using local information and internal rules, without external control. |
| Perception | Agents detect the flow field at their current position, which influences their direction and movement. |
| Action | Based on perception, agents adjust position and orientation, leaving visually compelling trails. |
The primary behavior driving these agents is seeking — a steering behavior where an agent calculates the direction and velocity required to move toward a goal:
- Determine the desired direction to the target.
- Adjust movement to align with it while maintaining smooth transitions.
- Balance speed and force to avoid overshooting.
Two core parameters govern this:
- Maximum Speed — upper limit of velocity. Higher values mean faster, less precise movement.
- Maximum Force — restricts steering adjustments. Lower values produce gradual, fluid turns; higher values allow sharp, reactive movements.
A flow field is a 2D grid of direction vectors. Instead of seeking a fixed target, each agent queries the field at its current position and steers toward the returned vector.
The resolution of the field is a key parameter — a lower resolution means larger cells and coarser direction changes, while a higher resolution is more precise but computationally heavier.
To direct agents along a drawn path, vectors within a radius around each path point are attracted toward it. A subtle problem arises at the end of a path: all nearby vectors collapse to point at the final position, trapping any agent that passes through (a "black hole").
Solution: extrapolate a future target point that lies on the rim of the attraction circle rather than its center.
futureTarget = target_pos + velocity
where velocity = target_pos − previousTarget, scaled to radius_pixel
Agents gradually increase stroke weight as they enter the attraction radius and fade it out as they leave, producing a smooth brush feel. This introduces three additional drawing parameters: attractionRadius, strokeUp, strokeDecay.
When a path runs parallel to a flow field's direction the agents underperform. To fix this, four independent flow fields are maintained — one per cardinal direction (left→right, right→left, top→bottom, bottom→top) — each with its own set of agents. All four groups draw simultaneously, ensuring coherent results regardless of path angle.
Each brush is defined by 11 parameters:
| Parameter | Min | Max | Step |
|---|---|---|---|
numOfVehicles |
1 | 300 | 1 |
trackingIterations |
100 | 1500 | 50 |
flowFieldResolution |
4 | 200 | 1 |
attractionRadius |
5 | 100 | 5 |
maxVehicleForce |
0.2 | 5 | 0.1 |
maxVehicleSpeed |
1 | 10 | 0.5 |
maxVehicleStroke |
1 | 10 | 0.5 |
maxVehicleTrailLength |
10 | 200 | 10 |
vehicleStrokeUp |
0.1 | 1 | 0.1 |
vehicleStrokeDecay |
0.1 | 1 | 0.1 |
filteredOrientations |
1 | 4 | 1 |
These parameters have complex, non-linear interactions. Two methods are provided for finding good configurations.
Open tune.html to adjust all parameters in real time via sliders. Changes are reflected immediately in the canvas preview.
Open search.html to run an evolutionary search inspired by natural selection:
- Initialization — generate a population of random parameter sets.
- Evaluation — each set draws strokes; you rate or select the results you prefer.
- Selection — the best-performing sets survive.
- Crossover — pairs of survivors are combined to produce offspring.
- Mutation — small random perturbations are applied to keep the search exploratory.
- Iteration — repeat until a satisfying configuration is found, then export as JSON.
This lets you discover configurations that would be hard to reach by hand, and the visual selection process keeps the results aesthetically grounded.
The system can alter the user's perceptive state — it's almost like looking at clouds and seeing objects. Because the agents add texture and detail autonomously, the user can operate at a high level, sketching rough intent while the brush fills in the character.
Space Bug · The Fish · Monster Tamer