Flow-field particles · kat-coder-air-v2.5
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.
transcript · 14 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.
/tmp/ws/index.html (2086 bytes)Successfully wrote 2086 bytes to /tmp/ws/index.html
{"command":"ls -la /tmp/ws/index.html /tmp/ws/p5.min.js"}-rw-r--r--. 1 node node 2086 Aug 1 20:25 /tmp/ws/index.html -rw-r--r--. 1 node node 1034532 Aug 1 20:25 /tmp/ws/p5.min.js
/tmp/ws/index.html (2076 bytes)Successfully wrote 2076 bytes to /tmp/ws/index.html
{"path":"/tmp/ws/index.html"}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flow Field</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow: hidden; background: #000; } canvas { display: block; } </style> </head> <body> <script src="p5.min.js"></script> <script> const PARTICLE_COUNT = 3000; const GRID_SIZE = 12; const TIME_SCALE = 0.0004; const TRAIL_FADE = 0.03; let particles = []; let t = 0; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 100); noStroke(); background(0); for (let i = 0; i < PARTICLE_COUNT; i++) { particles.push({ x: random(width), y: random(height), hue: random(360), speed: random(0.5, 1.5) }); } } function draw() { // Fade previous frame for trails fill(0, 0, 0, TRAIL_FADE * 2.55); noStroke(); rect(0, 0, width, height); t += TIME_SCALE; for (let p of particles) { // Map position to noise grid coordinates let nx = p.x / width * GRID_SIZE; let ny = p.y / height * GRID_SIZE; // Perlin noise gives angle for flow direction let angle = noise(nx, ny, t) * TWO_PI * 2.5; let vx = cos(angle) * MAX_SPEED * p.speed; let vy = sin(angle) * MAX_SPEED * p.speed; let prevX = p.x; let prevY = p.y; p.x += vx; p.y += vy; // Wrap around edges if (p.x < 0) p.x += width; if (p.x >= width) p.x -= width; if (p.y < 0) p.y += height; if (p.y >= height) p.y -= height; // Color shifts over time and varies by position p.hue = (p.hue + 0.2 + noise(nx * 0.3, ny * 0.3, t * 0.5) * 0.5) % 360; let sat = 70 + noise(p.x * 0.005, t * 0.1) * 30; let bri = 85 + noise(p.y * 0.005, t * 0.05) * 15; let alpha = 70 + noise(nx, ny, t) * 30; stroke(p.hue, sat, bri, alpha); strokeWeight(1.2); line(prevX, prevY, p.x, p.y); } } function windowResized() { resizeCanvas(windowWidth, windowHeight); background(0); } </script> </body> </html>
I see a bug — `MAX_SPEED` is referenced but never defined. Let me fix that:
{"path":"/tmp/ws/index.html","edits":[{"oldText":"const PARTICLE_COUNT = 3000;\nconst GRID_SIZE = 12;\nconst TIME_SCALE = 0.0004;\nconst TRASuccessfully replaced 1 block(s) in /tmp/ws/index.html.
{"command":"grep -n \"MAX_SPEED\\|const \" /tmp/ws/index.html | head -10"}16:const PARTICLE_COUNT = 3000; 17:const GRID_SIZE = 12; 18:const TIME_SCALE = 0.0004; 19:const TRAIL_FADE = 0.03; 20:const MAX_SPEED = 2.0; 57: let vx = cos(angle) * MAX_SPEED * p.speed; 58: let vy = sin(angle) * MAX_SPEED * p.speed;
Fixed. Here's what the final `index.html` delivers: - **3,000 particles** advected by Perlin-noise vectors (angle sampled from `noise(x, y, t)` mapped to a full 0–2π range) - **Fading trails** — each frame a semi-transparent black rectangle is drawn over the canvas, causing old strokes to slowly fade out - **Color shifting** — each particle has its own HSB hue that drifts over time, modulated by additional noise so colors vary by position and evolve smoothly - **Full-screen** — canvas fills the viewport and resizes with the window - **Edge wrapping** — particles that leave the screen re-enter from the opposite side - **No external dependencies** beyond the local `p5.min.js` Open `index.html` in a browser to see the flowing, color-shifting particle animation.
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
EVALUATION
Flow-field particles animate but form rigid grid patterns instead of organic noise-driven trails, looking glitchy rather than fluid.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.