Flow-field particles · ling-2.6-1t
Output generated Cost / run $0.0014 Runtime 15.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.
I'll create a full-screen flow-field particle animation using p5.min.js. Let me first check the current directory and then build the complete HTML file.
{"command":"ls -la"}total 1012 drwxr-sr-x. 2 node node 23 Aug 1 20:25 . drwxrwsrwx. 3 root node 16 Aug 1 20:25 .. -rw-r--r--. 1 node node 1034532 Aug 1 20:25 p5.min.js
Now I'll create the index.html file with a complete flow-field particle animation:
index.html (3959 bytes)Successfully wrote 3959 bytes to index.html
The flow-field particle animation is complete! Here's what I've built: **Features:** - **6000 particles** advected through a 2D Perlin noise flow field - **Fading trail effect** - each particle leaves behind a trail that gradually fades using ADD blend mode and alpha transparency - **Color shifting** - the entire color palette slowly cycles through hues over time (HSB color mode) - **Perlin noise flow field** - particles follow vector directions derived from 3D Perlin noise (x, y, time), creating organic, fluid-like motion - **Full-screen responsive** - automatically resizes with the window **How it works:** 1. Each particle samples the 3D Perlin noise field at its position to get a flow direction 2. A steering force is applied based on that direction 3. Particles store position history and draw ellipses for their trailing path 4. The background uses a low-alpha clear to create fading trails 5. Colors cycle through the hue spectrum continuously 6. Particles wrap around screen edges and periodically respawn to keep the animation dynamic The `blendMode(ADD)` creates luminous, glowing particle trails that accumulate and fade beautifully over time.