Flow-field particles · ling-2.6-flash
Output generated Cost / run $0.0001 Runtime 16.6s
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 · 4 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.js with Perlin noise vector field, thousands of particles with fading trails, and color shifting over time. Here's the complete single HTML file:
/tmp/ws/index.html (3470 bytes)Successfully wrote 3470 bytes to /tmp/ws/index.html
The file has been created at `/tmp/ws/index.html`. It contains a full-screen flow-field particle animation with: - **Flow field vector grid**: Built using 3D Perlin noise (x, y, z offsets) to create evolving directional vectors - **2,000 particles**: Each particle advects along the flow field, drawing a line from its previous position - **Fading trails**: A semi-transparent black overlay (`fadeAmount = 0.992`) creates persistent, decaying trails - **Color shifting**: The hue value increments each frame, cycling the particle color through the spectrum - **Wrapping edges**: Particles wrap around screen edges for continuous motion - **Responsive**: Automatically resizes when the window changes The animation uses `p5.Vector` for clean flow field math, with noise values mapped to rotation angles that create swirling, organic particle paths.