Loading
The interface must invite play without hiding causality, expose evidence without becoming a dashboard wall, and work on a phone.
Launch the simulation
0707 / 09A simulation can be scientifically correct and experientially incomprehensible.
Put every parameter on screen and the user sees a cockpit. Hide every parameter and they see a screensaver. Add explanations everywhere and the world disappears behind its documentation.
Particle Life needed three experiences to occupy one canvas:
Presets, live metrics, and paced captions make the world readable.
Matrix sliders, time, count, reset, and spawn change the experiment.
Discover, saved openings, Share, PNG, JSON, and CSV preserve evidence.
Observe, intervene, and investigate are design goals—not mode switches in the shipped UI. The same canvas progressively exposes controls and evidence.
The interface should let a first-time visitor observe something beautiful within seconds, let a curious visitor intervene without reading a manual, and let a careful visitor preserve evidence. Those goals compete for space and attention.
Desktop keeps the matrix beside the canvas. Below 768 px it disappears behind a Matrix button and opens as a bottom sheet capped at 70svh. The Science explanation is a modal overlay on both.
The full-screen simulation establishes a strict hierarchy:
This layout maps information to its relationship with the world. Metrics describe it, so they sit along its edge. The matrix causes it, so it remains visible while editing. Controls change time or state, so they form a separate action strip.
The simulation route removes the normal site header and footer. This is not just immersion. It prevents two unrelated navigation systems from competing with the instrument.
A blank 5×5 matrix teaches nothing. Every particle only repels at close range, then settles into near-static dust.
The four presets are therefore the first layer of explanation. Each gives the visitor a named, legible world before asking them to understand twenty-five relationships. Galaxy teaches pursuit, Cells teaches separation and adhesion, Soup teaches an open food chain, and Chaos teaches persistent conflict.
Once a visitor changes a cell, the label becomes Custom. The interface acknowledges the transition from observing a reference world to conducting an intervention.
The visible vertical sliders are custom-drawn, but each contains a real input[type=range]. That preserves drag, keyboard arrows, focus behavior, and screen-reader semantics.
Every cell has a directional accessible label such as A ← B. The displayed value includes a sign. The legend names repulsion, neutral, and attraction. Red and green reinforce those states but never carry the meaning alone.
This is an important design pattern: custom appearance does not require discarding native interaction contracts.
The caption bar does not narrate every fluctuation. Its rule engine may say that clusters are rising, that the world has settled, that Galaxy's pursuit loop drives rotation, or that a shared state has loaded.
Captions hold for at least five seconds. Event messages decay after ten seconds. Priority is explicit: a discovery action beats a loaded-share message, which beats metric rules.
Without pacing, live interpretation becomes another metric flickering below the world. The five-second hold turns it into a sentence a person can finish reading.
Discover and Share are labeled because they change the social or generative state of the world. Screenshot, JSON export, and CSV recording use compact icons to preserve the bottom bar.
That compression solved overflow at medium desktop widths, but it creates a discoverability cost. Icons without persistent labels require tooltips, accessible names, and documentation. Part 8 exists partly because export capability hidden behind three neighboring icons is not self-explanatory.
The best next improvement would be a single “Document” menu grouping screenshot, snapshot, and recording with visible text. Fitting controls is not the same as organizing them.
On a touch-sized screen, the initial particle count drops from 1,500 to 500 and point radius drops to four CSS pixels. An exact shared link can still request its recorded count because reproducibility outranks the default performance rule.
The matrix moves into a bottom sheet capped at seventy percent of the viewport. The canvas never scrolls. Top metrics reduce to particle count and FPS. The bottom bar becomes a compact icon row, while Share also appears in the matrix sheet.
These are not merely responsive rearrangements. They change the order of discovery. Desktop presents the world and its rule table together. Mobile begins with the world and asks the visitor to reveal the rules.
English, French, and Chinese share equations and state but not word length. French control labels expand. Chinese headings break differently. A phrase that fits beside a desktop icon can overflow a mobile sheet after translation.
The project stores scientific copy in localized dictionaries and article bodies in separate MDX files. Matrix letters, numeric values, code, and exported field names remain invariant. Explanatory metaphors are translated for effect rather than word order.
Locale-aware URLs preserve the reader's path through the project, simulation, series hub, and adjacent posts.
Keyboard access, focus states, contrast, reduced motion, and semantic labels are usually described as inclusion requirements. Here they also protect the experiment's logic.
If a relationship is visible only through red and green, its sign is ambiguous. If a slider cannot be adjusted in small keyboard steps, controlled experiments become harder. If decorative motion cannot stop, actual particle motion becomes harder to distinguish. If an icon has no name, the user cannot form a reliable procedure.
Accessibility makes the interface more explicit about cause and effect.
The interface is strongest at observation and direct matrix editing. It is weaker at documenting a sequence of experiments.
Saved discoveries preserve worlds but not hypotheses, notes, or exported measurements. CSV recording has start/stop state but no visible row count. Advanced icons are compact but obscure. The Science panel introduces lineage but does not link into the full article series.
Those are product opportunities, not reasons to add more chrome. The next layer should connect existing actions into a workflow: question → controlled change → observation → saved state → exported evidence.
Part 8 provides that workflow today as a field guide.
More to read
Random rules are easy. Finding random rules that remain structured and in motion requires a definition of interesting—and exposes its limits.
Every control, four guided experiments, deterministic sharing, saved discoveries, screenshots, JSON, CSV, mobile use, and troubleshooting.
A beautiful pattern is a discovery prompt, not a result. The project needed measurements that could disagree with my eyes.
