Flow-field particles · claude-sonnet-5.5
Output generated Cost / run $0.0186 Runtime 13.9s
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.
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
METRICS
Transcript · 6 messages
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.
{"command":"cat > index.html <<'E'\n<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>Flow Field</title>\n<style>html,body{margin:0;{"action":"screenshot"}(no output)
Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"","images":"attached"}
I wrote `index.html` in the current directory. It loads the local `p5.min.js` and runs full-screen. I checked it with one screenshot, which showed short, colored streaks following a smooth flow pattern. I didn't test window resizing or watch it over time. The only console message was a sandbox warning about the iframe. - **Particles:** 5,000 particles move along angles taken from 3D Perlin noise. The third noise dimension drifts slowly, so the flow pattern changes over time. - **Trails:** each frame, a translucent black rectangle is drawn over the canvas, so older line segments fade out gradually. - **Color:** hue depends on a time offset plus the particle's position, so colors shift across the screen and cycle over time. - **Respawning:** a particle that leaves the screen, or reaches 300 frames old, reappears at a random spot. - **Resizing:** resizing the window resizes the canvas and clears it. In the screenshot the trails looked fairly short and the screen mostly black. If you want longer, denser trails, lower the fade rectangle's alpha (currently 6) in `draw()`.