Flow-field particles · mimo-v2.5-pro

Output generated Cost / run $0.0059 Runtime 33.5s

Prompt for this run

Using the pre-provided p5.min.js (global p5, instance or global mode), create a full-screen flow-field particle animation: thousands of particles advected by Perlin-noise vectors, leaving fading trails, with colors shifting over time.

⛨ sandboxed Open in new tab ↗

TAKE IT TO CODE

A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.

RUN

modelmimo-v2.5-pro

vendorXiaomi · MiMo

harnesspi-agent

generated2026-07-22

METRICS

runtime33.5s

tokens in9.0k

tokens out2.3k

cached0

cost / run$0.0059

Transcript · 6 messages

user

assistant

thinking

I'll create a full-screen flow-field particle animation using p5.js. Let me design a visually stunning implementation with:

1. Thousands of particles advected by Perlin noise vectors
2. Fading trails effect
3. Color shifting over time
4. Full-screen responsive canvas

Let me create this as a single index.html file.

→ write /workspace/index.html (5661 bytes)

toolResult

Successfully wrote 5661 bytes to /workspace/index.html

assistant

thinking

Let me verify the file was created and check that p5.min.js exists.

→ bash {"command":"ls -la /workspace/index.html /workspace/p5.min.js"}

toolResult

-rw-r--r-- 1 node node 6339 Jul 22 16:57 /workspace/index.html -rw-r--r-- 1 node node 1034532 Jul 22 16:57 /workspace/p5.min.js

assistant

thinking

Both files are present. Let me verify the HTML is valid by checking its structure.

Done — `/workspace/index.html` is ready. Here's what it does: ### Visuals | Feature | Implementation | |---|---| | **Flow field** | 3D Perlin noise (`x, y, time`) mapped to angle → velocity vectors, creating organic swirling currents | | **Trails** | Each frame draws a semi-transparent black rectangle over the canvas (`fadeAlpha = 12/255`), so strokes linger then dissolve | | **Color shift** | Global HSB hue rotates continuously (`+0.15°/frame`) plus per-particle hue offsets and life-based gradients | | **Particle rendering** | Short line segments (`prevX,prevY → x,y`) give smooth streaks; stroke weight & alpha fade with remaining life | ### Controls | Input | Action | |---|---| | **Click** | Randomize noise seed + new color palette (instant field reshape) | | **Scroll wheel** | Adjust particle count (500–8000) | | **R** | Full reset | | **F** | Toggle fullscreen | | **S** | Save screenshot as PNG | ### Key design choices - **Edge spawning** — particles recycle by wrapping around edges or respawning at boundaries, keeping density even - **Per-particle `noiseOffset`** — prevents identical trajectories even at the same spatial position - **`TWO_PI * 2`** noise mapping — gives the field two full rotations of angular range for richer, more varied topology - **Life system** — particles live 200–600 frames then reset, ensuring constant visual renewal