Flow-field particles · llama-3.1-70b-instruct
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 · 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.
index.html (973 bytes)Successfully wrote 973 bytes to index.html
{"path":"index.html"}<!DOCTYPE html><html><head><meta charset='UTF-8'><title>Flow Field</title><style>body { margin: 0; overflow: hidden; }</style></head><body><script src='p5.min.js'></script><script>let particles = []; function setup() { createCanvas(windowWidth, windowHeight); for (let i = 0; i < 5000; i++) { particles.push({ x: random(width), y: random(height), vx: 0, vy: 0, col: color(random(255), random(255), random(255)) }); } } function draw() { background(0, 10); for (let p of particles) { let xoff = p.x * 0.01; let yoff = p.y * 0.01; p.vx = map(noise(xoff), 0, 1, -2, 2); p.vy = map(noise(yoff), 0, 1, -2, 2); p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > width) p.x = random(width); if (p.y < 0 || p.y > height) p.y = random(height); stroke(p.col); strokeWeight(2); line(p.x, p.y, p.x + p.vx * 5, p.y + p.vy * 5); p.col = color(map(sin(frameCount * 0.01 + p.x * 0.001), -1, 1, 0, 255), map(sin(frameCount * 0.01 + p.y * 0.001), -1, 1, 0, 255), 128); } }</script></body></html>
Here is the HTML content of index.html file: <!DOCTYPE html><html><head><meta charset='UTF-8'><title>Flow Field</title><style>body { margin: 0; overflow: hidden; }</style></head><body><script src='p5.min.js'></script><script>let particles = []; function setup() { createCanvas(windowWidth, windowHeight); for (let i = 0; i < 5000; i++) { particles.push({ x: random(width), y: random(height), vx: 0, vy: 0, col: color(random(255), random(255), random(255)) }); } } function draw() { background(0, 10); for (let p of particles) { let xoff = p.x * 0.01; let yoff = p.y * 0.01; p.vx = map(noise(xoff), 0, 1, -2, 2); p.vy = map(noise(yoff), 0, 1, -2, 2); p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x > width) p.x = random(width); if (p.y < 0 || p.y > height) p.y = random(height); stroke(p.col); strokeWeight(2); line(p.x, p.y, p.x + p.vx * 5, p.y + p.vy * 5); p.col = color(map(sin(frameCount * 0.01 + p.x * 0.001), -1, 1, 0, 255), map(sin(frameCount * 0.01 + p.y * 0.001), -1, 1, 0, 255), 128); } }</script></body></html>
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 particle trails follow grid-like noise vectors with fading color shifts; animates continuously, fades to near-black over time.
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.