05. Petri Dish — Emergent Life Simulation

# 05. Petri Dish — Emergent Life Simulation

A petri dish teems with life. You watch. You control. You let it run.

## What to make

A real-time 2D simulation rendered to a `<canvas>`. A circular petri dish fills the center of the screen. Inside, colored agents move, hunt, eat, and reproduce. A population chart updates live in the corner. Controls sit in a sidebar.

### The simulation

The dish contains two species of agent:

**Prey** — small, fast, numerous. They drift randomly, seeking food (particles that spawn at edges). When well-fed, they reproduce: a new prey agent spawns nearby. Prey are eaten on contact with a predator.

**Predators** — larger, slower, fewer. They hunt prey. When a predator eats a prey, it gains energy. When a predator has enough energy, it reproduces. If a predator runs out of energy, it dies.

The simulation is governed by rules. The behavior that emerges from those rules is what you watch. Prey flock. Predators stalk. Populations boom and crash. Equilibrium finds itself or doesn't. Every run is unique.

### The control panel

Sidebar on the right:

**Add Prey** — Spawns 10 prey agents at a random position inside the dish. The button shows the current prey count.

**Add Predator** — Spawns 3 predator agents at a random position. The button shows the current predator count.

**Pause / Resume** — Freezes the simulation. All agents stop. The chart pauses. Press again to continue.

**Speed Slider** — Controls simulation speed. Range: 0.25x to 4x. Default: 1x.

**Reset** — Clears the dish and starts fresh with 30 prey and 5 predators.

### The population chart

A live line chart in the top-right corner of the canvas. Two lines:

- **Green line** — prey population over time (left y-axis)
- **Red line** — predator population over time (right y-axis)

The chart shows the last 60 seconds of simulation time. It updates every frame. The lines must not flicker or jump — smooth interpolation between data points.

The chart background is dark, the lines are bright. The chart reads clearly at a glance.

### The dish

The petri dish is a circle with a subtle border — not a sharp rectangle. Agents that reach the edge bounce back in. The dish interior has a faint texture (drawn once to an offscreen canvas) so it reads as a surface, not a void.

## Always-visible HUD

Top-right corner: FPS counter, updates every second.

Bottom-left: Agent count ("Prey: N · Predators: N").

## Hard requirements

- Single `index.html`. No build step.
- Simulation must run at 60fps with 200 agents on screen.
- No external libraries. Canvas 2D API only.
- Agents must not escape the dish.
- The chart must show 60 seconds of history minimum.
- `prefers-reduced-motion`: simulation runs at 0.5x speed, chart draws less frequently (every 500ms).

## Visual rules

- Prey: small circles, green. Predators: larger circles, red or amber.
- Agents have a subtle trail or fade, not hard-edged.
- The dish border is crisp but not bold — the focus is the life inside.
- The chart lines are the only high-saturation elements on the page. Everything else is subdued.
- No text inside the dish. Labels live in the sidebar only.
- Food particles: tiny, dim white dots. Visible but not distracting.