oneshotlm
Compare all models on this prompt →

Flow-field particles · gpt-oss-120b

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.

⛨ sandboxed Open in new tab ↗
transcript · 6 messages
user

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.

assistant
thinking
We need to create index.html with p5.min.js loaded via <script src="p5.min.js"></script>. Then we need to implement full-screen flow field particles using Perlin noise, many particles, fading trails, color shift. All code in one file.

First check current directory for p5.min.js.
bash {"command":"ls -1"}
toolResult

p5.min.js

assistant
thinking
We have p5.min.js present. We'll write index.html.

We need to generate HTML skeleton, load p5, script defines sketch.

Implement global mode: function setup() etc.

Full-screen: createCanvas(windowWidth, windowHeight). Use windowResized to adjust.

Create array of particles, each with position (x,y), previous position maybe for trails, or use background with alpha to fade trails.

Simplify: In draw, draw semi-transparent background with low alpha to create fading trails. Or use background with slight opacity using rect with fill(0, 0, 0, 10) etc.

Particles: For each, compute angle from noise at position scaled; use noise(xoff, yoff, time) to get angle, then move.

Color shift: Use hue based on time + maybe position.

Set colorMode(HSB, 360, 100, 100, 100). For each particle, stroke with hue based on sin(time) or map noise.

Implementation details:

We'll store particles in array of objects {x, y, prevX, prevY}. In each frame: for each particle, compute angle = noise(p.x * scale, p.y * scale, frameCount * zoff) * TWO_PI * 4? Actually noise returns 0-1; map to angle = noise * TWO_PI * 4 (to get multiple rotations). We'll move with step size.

We'll draw line from previous to new position.

Set strokeWeight maybe 1.

Implement init: number of particles maybe width * height / 10? But thousands: maybe 2000.

Set scale: e.g., 0.001.

Fading trails: fill with semi-transparent black rect each frame: background(0, 0, 0, 10) (alpha) but p5's background does not support alpha to overlay; better use fill(0,0,0,5); rect(0,0,width,height). We'll set noStroke, then fill.

Implement.

Write index.html.
write index.html (1995 bytes)
toolResult

Successfully wrote 1995 bytes to index.html

assistant

The **index.html** file has been created with a full‑screen flow‑field particle animation using the provided `p5.min.js`. It includes: - Loading `p5.min.js` locally. - A canvas that fills the window and updates on resize. - Thousands of particles moving according to a Perlin‑noise vector field. - Fading trails achieved with a semi‑transparent overlay. - Colors that shift over time using HSB mode. You can open `index.html` in a browser to see the 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

modelgpt-oss-120b
vendorOpenAI
harnesspi-agent
generated2026-07-22

EVALUATION

2/5 partial

Flow-field trails appear but collapse into thin horizontal/vertical lines instead of thousands of drifting particles filling the screen.

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.

idle motion34.0%
on click7.8%
on drag0.2%
on wheel2.0%
on enter + space0.7%
on arrow keys4.0%
on w/a/s/d5.3%
frame spread56.6 / 255
console errors0
js errors none

METRICS

runtime27.5s
tokens in5.2k
tokens out1.3k
cached0
cost / run$0.0004