Flow-field particles · hy4

We need build single index.html with p5 local script. Need inspect files. Need browser checks. Need think implementation robust, visual verification via screenshots/motion, console. Need at least 2000 particles coherent field, fading trails. Need varying colors over time, evolve field gradually, no trail history allocation, bounded population recycle boundaries. Controls Pause Resume Restart. Fullscreen fit, responsive. Self-contained own CSS/JS inline plus plain script src p5.min.js exact. Need write then browser test. Let's inspect cwd and p5.

We need implement. Need consider performance 2000+ particles with p5 drawing each frame canvas 1200x800. Fading trails can be via background with alpha each frame on main canvas, draw lines from previous to next. Important pause: when paused stop drawing fade, static screen. Restart clears trails opaque background and new arrangement. Particle colors over time. Evolving Perlin noise field: noise(x*scale, y*scale, z) angles smoothly varying, z += small. p5 global mode or instance mode. Need perhaps support high DPI via pixelDensity(1) to keep performance. Need robust resize. Need controls overlay. Need perhaps expose debug state for browser inspect via window.__flowField, useful to inspect behavior. Need create visual with enough trails and bright dynamic colors.

Need understand browser tool behavior: can run index.html, screenshot etc. Need make DOM controls responsive. Could perhaps use plain HTML buttons fixed overlay rather than p5 DOM. Need p5 global mode; script src p5.min.js followed by inline script. But p5 global mode auto starts only after document load; definitions setup/draw globally. Fine.

Need specific design:
- HTML full viewport, body margin 0 overflow hidden background dark.
- canvas fixed/inset 0, z-index maybe 0.
- overlay .hud with title, stats maybe 2600 particles, buttons IDs pauseBtn restartBtn. Need controls responsive at 1200x800. Use clickable buttons. Add keyboard shortcuts maybe Space, R.
- Use p5 createCanvas(windowWidth, windowHeight); canvas parent? p5 creates canvas append body; CSS `canvas{display:block;position:fixed;inset:0;}` perhaps p5 sets width/height style. Need p5 global.

Particle representation: use typed arrays for efficient bounded allocation and no per-frame huge objects. NUM_PARTICLES = 3000 maybe requirement at least 2000. Use Float32Array x,y,px,py maybe speed multipliers/phase/hue. No growing trail history. Fixed arrays allocated on setup and restart; perhaps reset values. Need field from p5 noise. Per particle, call noise() 3000 times/frame; likely okay but p5 noise can be heavy. Could precompute flow field grid each frame and interpolate / sample nearest, giving coherent local directions. Requirement motion guided by smoothly varying Perlin-noise vector field and nearby particles locally coherent. Precompute grid of directions from noise using 3D Perlin with evolving z. Need smoothly varying angle. Could call noise(c*fieldScale, r*fieldScale, z), map to maybe angle = noise * TWO_PI * 2? Better multiple octaves? Use single `noise` map to angle range e.g. -PI to 2PI? p5's noise output 0..1. angle = n*TWO_PI*2.0 - PI? That may wrap causing discontinuities in vector directions at n values but cos/sin smooth; if angle multiple rotations, no problem because cos/sin periodic. Local coherent. Could also use two noise fields for x/y? Single angle enough. Need perhaps curl field? Requirement Perlin-noise vector field. Grid vectors from noise angle. Use field grid with cell size 20 or 24, cols ceil(width/cell)+2 rows. Float32Array cols*rows for vx/vy. Recompute each frame with z += 0.002; perhaps update every frame. p5 noise calls ~ (1200/24=50)*(800/24=34)=1700, plus interpolation per particle, better than 3000. Need interpolation bilinear for smooth local directions. Or nearest grid still coherent but abrupt as crossing boundaries; bilinear smooth. We can sample field:
 gx = min(x / CELL, cols - 2?), x can 0..width. `gx = x / CELL`, `gy = y/CELL`; ix=floor(gx), iy=floor(gy); tx=gx-ix; use col count = ceil(width/CELL)+2 so `ix+1` within. bilinear vx/vy. Normalize after interpolation perhaps. Then move: speed = baseSpeed * speedVariation maybe 1.2 to 2.6; x += vx*speed; y += vy*speed. Need previous position px=x,py=y before update. Draw line from px,py to x,y; no wrap draw (if crossing boundary, reset and skip drawing that frame to avoid giant streak). Need define boundary recycling: if x<0, x+=width; etc; if >width x-=width; y likewise. Perhaps when wrapped set `x[i]=...; px[i]=x; py[i]=y; wrapped=true; continue` so no line. Could also randomize other coordinate? Requirement recycle at boundaries and bounded population. Wrapping is fine. New arrangement restart: random positions and/or structured arrangement? "initializes a new particle arrangement". We can fill arrays with random x,y (maybe golden clusters?) and random seeds. To clearly show restart changes arrangement, random positions and perhaps random `seed`? Need evolve field gradually. On restart maybe noiseSeed random? p5 noiseSeed integer. But if reset `fieldZ` random? Need not repeat short recorded sequence. Change z over time. Could also set noiseSeed(random(100000)) on restart. Need gradually evolving field using z. Could use frame-independent dt. `deltaTime` p5 available; `fieldZ += min(deltaTime, 50)*0.00014` (roughly 0.0021/frame at 16ms). That's field change gradually; at rate 0.13/sec, cycles? Perlin z differences 1 significant; pattern changes over several seconds. Need time-varying colors: color based on particle hue + time + position/direction perhaps `hue = (baseHue[i] + colorClock*some + vx*... ) % 360`. Need use HSB. p5 `colorMode(HSB, 360,100,100,100)` and stroke with alpha. But p5 `stroke(h,s,b,a)` per particle 3000 times can be expensive. Could avoid color objects by precomputing RGB? Requirement vary particle colors over time. Use p5 `stroke` each particle with dynamic hsba likely okay at 3000, but p5 may be slow. Could use direct canvas 2D strokes grouped into color bins rather than p5's `stroke()` each particle? But need p5 library used. Can use p5 for setup/draw/noise, but drawing through `drawingContext` may be more performant. Need consider global mode and p5 canvas handles fade. Could draw with native ctx to optimize. Since p5's `stroke` and `line` calls 3000 per frame plus color conversion can be sluggish. Could use `drawingContext` and group by color bins. But changing color per particle likely need `ctx.strokeStyle` per particle; still okay if avoid p5 overhead. Could use p5 `stroke` with HSB noStroke? Let's estimate performance browser maybe screenshot works if frame rate ~30. Need robust.

Potential implementation:
- P5 `createCanvas(windowWidth,windowHeight)` and `pixelDensity(1)`, `frameRate(60)`, `colorMode(HSB,360,100,100,100)`, `noiseDetail(3,0.55)`.
- Fade: `background(8, 12, 25, 5)` each frame in HSB alpha 5%? p5 background alpha with HSB might not fade correctly if using p5's background due to alpha composite? `background(h,s,b,a)` uses clear? In p5, background calls context.fillStyle then rect; alpha should overlay. Need verify. With HSB alpha max 100, 5 means 5% overlay. Could use native `ctx.fillStyle='rgba(4,7,16,0.055)'; ctx.fillRect(0,0,width,height)`. That's reliable. `ctx.globalCompositeOperation='source-over'` and fill with alpha dark color. Could use additive or lighter for particles for glow. Maybe draw with `ctx.globalCompositeOperation = 'lighter'` to make trails glow; fade dark overlay on source-over, then lighter lines. Need ensure p5 state unaffected by native ctx modifications; set each frame. `ctx.lineWidth` maybe 1.1; lineCap='round'. Need not call `p5.background()` because it might clear. Need initial opaque fill on setup/restart.

- Draw trails: no stored trail history, just persistent canvas with alpha fade. Since particles' previous frame positions are stored in fixed arrays. `ctx.beginPath()` per color bin and moveTo/lineTo. Need batch by say 24 hue bins to color variation over time. Each particle has `hueOffset[i]` random [0,360); dynamic hue = (hueOffset[i] + colorClock*? + maybe direction) mod 360. Group by bin = floor(hue/15) -> 24 bins perhaps 30 bins. We can have preallocated arrays of path commands? Better avoid per-frame allocations. We could iterate color bins, and for each bin scan all 3000 particles -> 72k checks/frame, still fine but maybe too much. Or use one path per particle with dynamic `ctx.strokeStyle` and `ctx.beginPath`; 3000 state changes okay maybe slower. Alternative group into fixed bins by storing particle indices into preallocated typed arrays and counts, then draw each bin. Use `Uint16Array(NUM_PARTICLES)` per bin or flat `binIndices` size NUM_PARTICLES; `binCounts` Int32Array(BIN_COUNT), `binStarts` etc. For each particle, compute bin from base hue + colorClock, put index into bin storage. Use counting sort per frame:
  - counts.fill(0)
  - compute `bin[i]` and counts[bin]++.
  - prefix sums to starts (reuse `binStarts`); cursor = copy starts; fill `order[ cursor[bin]++ ] = i`.
  - Then for each bin b, set strokeStyle to precomputed HSL color for bin perhaps dynamic colorClock shifts all bins; need color array or `hsl()` string each frame (24 allocations, okay). Draw path for all indices in range. This is bounded preallocated arrays; no growing trail history. But we also need update positions, perhaps combine update and bin assignment. Need handles wrapping. For each particle:
   oldx=x[i], oldy=y[i].
   sample field.
   newx=oldx+vx*speed etc.
   if wrap, set x/new value etc, draw flag false; else draw line. We can store prev coordinates in `fromX, fromY` fixed arrays maybe px/py; or use x/y arrays and wait to draw until after update. We can update x/y first then group draw uses `x[i]-vx*step`? But if dynamic field and wrap need know. Better fixed `prevX,prevY,drawFromX,drawFromY`? Could set `px[i]=oldx`, `py[i]=oldy`, and `skip[i]=1` for wrap. Then x[i]=newx,y[i]=newy. Draw path from px,py to x,y. That's 2 extra Float32Array and Uint8Array, fine.
   sample field needs use old x,y.
   speed multiplier arrays Float32.
   hueOffset array Uint16 maybe.
   `phase` maybe for color variation. Could use particle base hue plus time and directional offset. Need show changing colors over time; global colorClock increments e.g. 0.003 per ms = 4.8 hue deg/sec? At 0.006 per ms=9.6 deg/sec, perceptible over 5 sec. Better 18 deg/sec. Could use `colorClock = (colorClock + dt*0.018) % 360` = 18 deg/sec. Enough. Then hue = (hueOffset[i] + colorClock + maybe field angle*??) %360. If all random hue offsets, nearby particles might have wildly different colors; still pleasing multicolor. Could base hue on spatial gradient plus slight random jitter so coherent colors and time variation. E.g. hueBase = (x*0.08 + y*0.04 + hueJitter[i] + colorClock) mod 360. But random hue jitters allow rich palette. Or organic palette limited to cyan/blue/violet/gold by mapping 0..1 into palette segment. Need choose palette freely. Could use HSL with saturation 85%, lightness 60%, dynamic hue to show changing colors. Group into 36 bins of 10 degrees. Could use dynamic `hsl(${hue}, 90%, 62%)` and alpha. Need fade trails and glow. Draw with `ctx.globalCompositeOperation='lighter'`, alpha maybe `hsla(hue,90%,62%,0.36)` so overlapping becomes bright. Dark overlay at 0.045 per frame results trail ~22 frames ~0.37 sec. Need visible trails maybe alpha 0.025 -> ~40 frames 0.7 sec. At speed ~1.5 px/frame, trails ~60px. Good. Need perhaps clear at restart with opaque `rgba(3,6,16,1)`.

Potential issue global composite `lighter` with dark overlay when switching: set source-over for fade, lighter for lines, source-over after. Need avoid p5 internal state mismatch? We don't use p5 drawing calls other than noise, so fine. But p5 may apply pixelDensity and context transforms; pixelDensity(1) avoids complexity. Could use `window.drawingContext` global? In global mode `drawingContext` available. Use `const ctx = drawingContext` in draw. Or `p5.instance`? Global mode exposes. Fine.

- Field: Need perhaps field grid precomputation. `cell=24` or 28. For each cell c,r, compute two perhaps layered noise values:
 `n1 = noise(c*0.085, r*0.085, t);`
 `n2 = noise(c*0.085 + 131.7, r*0.085 + 91.3, t*0.73+10);` maybe combine into angle = (n1*1.6 + n2*0.4)*TWO_PI*1.5. But p5 noise coordinate scale relative to grid. If cell=24, grid spacing with 0.085 noise units corresponds physical scale 24/0.085=282px; quite large coherent regions. Need nearby particles follow locally coherent directions; yes. Maybe `fieldScale=0.04` grid units => 600px features, too large; could add second octave. Use 0.11 => ~218 px per noise unit. noise features around 1 unit, so good. We can use `noise(c*0.11 + nxOff, r*0.11 + nyOff, fieldZ)` where c*cell = x. Better use world coords `x = c*CELL`; `noise(x*0.0032, y*0.0032, fieldZ)` => 312px scale. Add octave `noise(x*0.009+50,y*0.009+50, fieldZ*1.3)*0.35`. Angle = (n1*0.75 + n2*0.25)*TWO_PI*2.2 maybe. Need p5 noise 3D with z. `noiseDetail(3,0.5)` means smooth. Could use curl-like field to create swirls; not necessary. Need pattern evolves gradually, not repeating short sequence. `fieldZ += dt*0.00007` maybe 0.07/sec; Perlin changes gradually over ~10s. If too slow visual pattern near static. Use 0.00010 per ms = 0.1/sec; plus field offset drift maybe translation over time:
 `driftX = tSec*4`, `driftY = tSec*2`; sample `noise((x+driftX)*scale, ...)`. This makes pattern change continuously. But z already. Need no short recorded sequence; 3D noise with z is non-looping. Maybe also change noiseSeed on restart. Could mention in debug state. Use `fieldZ += dt*0.00009`, `fieldDrift += dt*0.003` (3 px/sec) and sample world coords shifted. Need ensure no repeating recorded sequence. Fine.

- Need colors vary over time and perhaps based on speed/field. Could calculate `hue = (hueBase[i] + colorClock + (vx+1)*12) % 360`. Need base hue random. Maybe use limited palette of cyan/blue/magenta/gold. We can choose full spectrum but dark background looks nice. Could map `u = (noise? no)` to hues between 180 and 330 plus accent orange? Need maybe fully dynamic color shift. If hue offsets uniformly 0..360, screenshot looks rainbow, perhaps less elegant. Could use `hueBase = 180 + 170*random()` => cyan through magenta/red, plus time shifts wrap to full spectrum. Or use two palettes. Simplicity: HSL hue from `(baseHue + colorClock) %360`, baseHue random mostly 170..320, with 15% warm 20..55. Over time shifts all hues. Need group by bins. Since `colorClock` changes continuously, hue bins shift over time; visible at several moments. Good.

- Need maybe draw some bright particle heads? Drawing thin lines gives particles and trails. Could draw line from old to new (~1-3px) with persistent fading. This leaves trails over time. Could use `ctx.lineWidth=1.15`; perhaps groups with `globalAlpha`? Use hsla. For all lines set `ctx.lineWidth = 1.1; ctx.lineCap='round'`. Could vary line width by bin or speed? Not necessary. At 3000 particles, ~3000 short lines/frame. Need bright enough. A second pass drawing points perhaps no. With `lighter`, repeated bright paths show.

- Need stable population fixed 3000. Need perhaps wrap crossing using modulo to avoid while loops. Since speed small, one boundary crossing. Use if `<0` add width; if `>=width` subtract width. Could also check y. If both wrap, set skip. Need update arrays. Need ensure if x exactly width etc. `>=` and subtraction yields `<width` if step small. If width extremely small, still maybe; we can use modulo robustly but fine. `newX` could be beyond by >width only if tiny viewport; use modulo function. Use `((newX % width)+width)%width`. But modulo costs. Could do while loops rarely. Perhaps:
```
if (nx < 0 || nx >= w || ny <0 || ny>=h) {
  if (nx <0) nx += w; else if(nx>=w) nx-=w;
...
  x[i]=nx; y[i]=ny;
  px[i]=nx; py[i]=ny; skip[i]=1;
} else {...}
```
For resize width/height changes, particles may be out of bounds. On `windowResized`, resizeCanvas(windowWidth,windowHeight), rebuildFieldGrid, clear background, perhaps reinitialize particle positions? Need keep bounded population. Could call initializeParticles on resize too perhaps. "Restart initializes a new particle arrangement"; resize can also. But need ensure all particles within new dims. Use random reinitialize or clamp. Reinitialize on resize. Need p5's `resizeCanvas` perhaps triggers redraw? We fill opaque. Need field arrays reallocated once per resize (not per frame) — bounded, no growing history. Need clear. Need p5 global windowResized works.

- Controls:
 HTML:
```
<div id="ui" class="hud" aria-label...>
 <div class=title>FLOW FIELD <span>3,000 particles</span></div>
 <div class=controls>
  <button id="pauseBtn" type="button">Pause</button>
  <button id="restartBtn">Restart</button>
 </div>
 <div class=hint>space: pause / r: restart</div>
</div>
```
Need pause/resume behavior. Could have `paused` boolean. In p5 `draw()`, if paused return (canvas remains static). Need ensure fade doesn't keep happening. We can either call `noLoop()` on pause and `loop()` on resume, but then button can call loop; controls still responsive because DOM events independent. Using `noLoop` is definitive. Draw might be called once when loop starts. Need update button text and aria-pressed. On pause: `paused=true; noLoop()`. On resume: `paused=false; loop()`. Need `deltaTime` potentially large after resume; in draw clamp dt = min(deltaTime,34) perhaps. If noLoop, deltaTime after resume could be huge but clamp handles. Need restart while paused: Should clear trails, initialize particles, randomize field seed and maybe remain paused? Requirement "Restart clears trails and initializes a new particle arrangement." Could choose restart resumes? Maybe restart should clear and show new arrangement; if paused, could draw one frame or redraw clear + static new particles? Need robust and intuitive. On Restart:
 - clear trails with opaque background
 - `noiseSeed(floor(random(1e9)))`
 - `fieldZ = random(1000)` perhaps instant new field pattern
 - `colorClock=random(360)` maybe new arrangement colors
 - `initializeParticles()` and maybe render an initial frame? If paused, call `redraw()` once? But draw would fade/draw and advance field; okay. If not paused, no need; next frame. Need ensure trails clear immediately even if paused. Could call `clearTrails()` then maybe `renderParticleHeads()` to show new arrangement without waiting. Requirement check trails clear and new arrangement appears. If unpaused, next frame draws. If paused, if restart draws one frame or static heads. We can implement `renderParticleHeads()` drawing dots at positions with current colors (one frame). For immediate visible new arrangement. Or if restart resumes regardless, simplest: set paused false, loop; button text Pause; clear; initialize; draw next frame. But user might expect restart resets state and resumes; okay. Need decide. Could make restart always resume and clear. But if user paused then restart likely wants new animation; that's fine. Need UI state update. However task says pause/resume and restart; no explicit restart should preserve pause. Fine.
 - Need perhaps produce initial frame on setup. On setup, clear background opaque then initialize. In first draw, fade overlay and lines. Need maybe render particle heads on setup so canvas not blank before first frame, but p5 starts draw immediately. Could call render heads. Need trails clear after restart; if we draw heads then opaque trails gone. But "trails clear" could check visually: background mostly dark with short dots. Good.
 - Need expose debug state for browser verification:
```
window.__flow = {
 getState: () => ({ particleCount:NUM, paused, fieldZ, colorClock, trailAge:..., ...}),
 restart, pause, resume,
 getSample: maybe sample positions...
}
```
This helps inspect via browser tool. Need maybe tool's `inspect` gives DOM and console only, not arbitrary JS? We have browser `inspect` action could perhaps return DOM and console, maybe can run JS? Need discover. Tool description: "Run index.html, inspect DOM/console, interact, and see screenshots or motion frames." likely `inspect` returns DOM and console, maybe can evaluate? No explicit script eval action. We can use screenshots and perhaps set debug info in DOM itself (e.g., status text and counters) to inspect via DOM. Could add stats display with particle count, status, field phase and color hue. Browser inspect likely returns DOM info, maybe text. Need make data attributes on body or data-test attributes so inspect can show. Could set `document.body.dataset.state` / hidden debug span. But ideally use screenshot at several moments and controls via click.

Need understand browser tool API. We'll use reload then inspect and screenshot. Motion action may return frames. Need maybe check screenshots manually (as attachments). We'll need use browser tool several times with actions. Need perhaps run `browser({action:'screenshot'})` after reload etc. It might capture current content; for moments need wait? There is no wait action, but motion action might sample frames. Could use `motion` with text/delta? Need see. We can call `browser({action:'motion'})` and inspect output. Maybe tool has built-in wait/duration. We'll figure.

Need write robust code. Need possibly use p5 `noise` in global mode; p5 requires `setup` defined before load? Inline script after p5, defining setup/draw, then p5 auto-instantiates on DOMContentLoaded (or immediately if loaded). Since p5.min.js loaded before inline likely body parse and p5 sets load event. Definitions set before event, okay.

Need global constants maybe `NUM_PARTICLES = 3200` (at least 2000, clearly). At 1200x800, 3200 enough density. Field grid cell 24 ~ 52*36=1872 noise cells. p5 noiseDetail(3,0.55) means 3 octaves -> 5616 noise evaluations, plus particle loops 3200. Might be ~10ms. Could use 2400 to be safe, maybe 2800. Requirement at least 2000; choose 2600 or 3000. Performance perhaps okay. Need carefully optimize field compute: Sample one noise per grid cell with noiseDetail(2,0.55) => 2 octaves, ~3700 calls. Add second noise for fine detail doubles; maybe skip. Use one noise call but field scale plus `sin`? For naturally coherent flow, angle from noise. `noiseDetail(3,0.5)`, one `noise()` per grid point with 3 internal octave calls. ~5k internal. Fine. Could also precompute field only every 2 frames, but smoothly evolves slowly; not necessary. Need maybe avoid `Math.hypot` per cell as costly; use `sqrt` or simply use cos/sin from angle (unit vectors). Interpolation may reduce magnitude but could normalize per particle; that costs sqrt per particle. Not needed; interpolated vector magnitude near 1 but can be ~0.7. That's okay, just slightly variable speed. Need smooth field. Use angle = `n * Math.PI * 4` (two full turns across noise range). Since n tends around 0.5, angles around 0..4π with most 1π..3π; vectors vary. Could add `fieldAngleBias` slowly rotating: `angle = n*TAU*2.2 + Math.sin(fieldZ*0.7)*0.6`; all vectors slowly rotate. But fieldZ already changes. Could use two noise samples offset to produce angle via curl-like gradient, but no need. Need "nearby particles should follow locally coherent directions"; with bilinear interpolation definitely.

Maybe use p5 `noise(x*scale+fieldDriftX, y*scale+fieldDriftY, fieldZ)`, angle = `(n - 0.5)*TAU*2.4 + time*0.15`. With noise values 0.3..0.7, angle range -2.4..2.4 rad, coherent swirls. Field drift gives gradual change. Need no short repeating. `fieldZ += dt*0.00008` (0.08/s), `driftX += dt*0.000015`? If field coords scale=0.0032, shifting world by `driftX` accumulates e.g. 0.000015*16=0.00024 noise units/frame, 0.015 noise units/sec, negligible. Better world drift 2 px/sec => noise coords shift 0.0064/sec. Use `driftX = tSec*2` and scale. Could simply use `noise((x+tSec*4)*scale, (y+tSec*1.5)*scale, fieldZ)` where tSec accumulates dt*0.001 (bounded but grows). Field won't repeat. Need no issue with large values over long time (fine). Need expose fieldZ.

Need find p5 noiseSeed behavior: random seed; `noiseSeed(Math.floor(Math.random()*1000000))`. p5 random uses p5's seeded PRNG perhaps fine. Could use Math.random directly to initialize arrays, no p5 `random()` needed. But need p5 noise. Use native Math.random. Need avoid p5 random() overhead. Use `noiseSeed(Math.floor(Math.random()*1e9))`. Need note p5 noiseSeed accepts number.

Need color HSL strings. HSL hues from bins with dynamic offset. For `ctx.strokeStyle = 'hsla(' + Math.round(hue) + ', 92%, 64%, 0.42)'` per bin. To avoid 36 string allocations/frame? fine. Precompute based on colorClock? Could compute 36 strings each frame; 36 allocations small. Need no "ever-growing trail history"; string allocations are garbage but not history. Could avoid with bin hues fixed and shift bin assignment based on particles' base hue + colorClock; strokeStyle per bin can be fixed palette string, while particles move among bins over time, so colors change discretely. That's even better and precomputed strings. But requirement vary colors over time; shifting bins by global hue causes each particle's color to change over time. Need full palette. Could define `PALETTE_COLORS` 36 fixed hsla strings with hues b*10. Then `bin = floor(((hueBase[i]+colorClock+direction hue offset)%360)/10)`; particles shift to neighboring bins over time; color changes gradually in 10° steps. Good. No per-frame stroke string allocation. At 18°/sec, each particle changes bin every ~0.55 sec, visible. Could use 72 bins 5° steps for smoother; 72 paths/frame, okay. Use 48 bins 7.5° steps; a bit complex. 36 bins fine. Need maybe alpha constant 0.32; brightness from `lighter`. Could set line width 1.05. Need perhaps `ctx.globalAlpha` varying? no.

Need dynamic color via `colorClock` maybe 18 deg/s. If moving through bins, color changes gradually. Need base hue array `Float32Array` or Uint16; store 0..360. `colorBias[i]` maybe `-20..20`; use `angle*...` to shift hue based on direction. Could just base hue + colorClock + `vx*18+vy*9` (direction term changes with field, adding spatial color variation). Need compute after field sampling; fine. Need convert mod robustly:
```
let hue = hueBase[i] + colorClock + (vx*30 + vy*12);
hue %= 360; if(hue<0) hue+=360;
let b = (hue * BIN_COUNT / 360) |0; if(b>=BIN_COUNT) b=BIN_COUNT-1;
```
Need preserve bin per particle for draw ordering. We can compute counts in first pass and store `particleBin[i]=b`; then prefix start and fill. Arrays fixed. Count assignments while updating positions. Then draw each bin. Need skip wrapped particles from drawing; we can either exclude them from bins by setting bin = 255 (Uint8Array supports 255) and not count. Then filter in draw. Good:
```
if (wrapped) { particleBin[i]=255; continue; }
...
particleBin[i]=b; binCounts[b]++;
```
Then counting sort:
```
let offset=0;
for b: binStarts[b]=offset; binCursor[b]=offset; offset += counts[b];
for i: if(bin<BIN_COUNT) order[cursor[bin]++] = i;
for b:
 start=binStarts[b], end=start+counts[b]; if(start===end) continue;
 ctx.strokeStyle=palette[b]; ctx.beginPath();
 for k=start;k<end;k++ { idx=order[k]; ctx.moveTo(prevX[idx],prevY[idx]); ctx.lineTo(x[idx],y[idx]);}
 ctx.stroke();
```
Need order array length NUM_PARTICLES. All fixed. Could avoid prefix arrays by one Int32Array starts and another cursors. Fine. Need `particleBin[i]` for 255 sentinel; with BINS=36. Need `Uint8Array`.

Potential issue HSL `hsla(h,95%,64%,0.42)` with `lighter` and dark fade; line strokes maybe too faint. Need test screenshot. Could adjust alpha to 0.55 and fade 0.04. Need maybe draw second wider glow pass for each bin? Could set lineWidth 2, alpha 0.1 then thin 1, alpha 0.55; doubles path calls. Could just use `ctx.shadowBlur=6; ctx.shadowColor=...` but per bin shadow color may be expensive. Keep simple.

Need perhaps pointer interaction? Not required. Don't add unnecessary.

Need responsiveness: CSS controls maybe top-left or top-center. At 1200x800, buttons easy. Need avoid user-select. Need use `touch-action:manipulation`, min-height 40px. Body dark background. HUD with backdrop blur, semi-transparent dark panel. On small screens, wrap. Need full-screen canvas. Could add subtle gradient overlay? No external assets. Maybe `body::before` radial gradient behind canvas? Canvas opaque dark fill will cover; no need. Could use alpha background fade with rgba so body gradient could show, but p5 canvas starts transparent. We fill opaque dark initially; fine. Could draw subtle static grid? Not required. Need avoid controls overlay blocking canvas? Fine.

Need perhaps handle p5 canvas `aria-label`? Use `canvas.attribute('aria-label',...)` or `cnv.elt.setAttribute`. In setup. Need use p5 canvas id maybe. Could set `canvas.position(0,0)`? CSS can handle. `cnv = createCanvas(windowWidth, windowHeight); cnv.parent(document.body);` but p5 automatically appends to body. We can call `cnv.elt.setAttribute`. CSS `canvas { position:fixed; inset:0; width:100vw!important; height:100vh!important; }` However p5 sets width/height attributes as pixels and style width/height maybe. `resizeCanvas` updates. Need avoid CSS `!important` if window dims mismatch? It might stretch slightly. Better CSS `canvas { display:block; position:fixed; top:0; left:0; z-index:0; }` and p5 sets inline style width/height. Fine. Need `pixelDensity(1)` so canvas backing dims exactly windowWidth x windowHeight.

Need p5 global `windowWidth`/`windowHeight`; at 1200x800 browser viewport maybe same. Need UI accessible.

Need perhaps use `document.getElementById` after DOM elements parsed. Script placed at end of body after HTML, so fine.
Need event handlers:
```
const pauseBtn=...;
pauseBtn.addEventListener('click',()=>togglePause());
restartBtn...;
window.addEventListener('keydown', e=>{ if(e.code==='Space' && !...button focus?) { e.preventDefault(); togglePause();} else if(e.key.toLowerCase()==='r') restartAnimation();});
```
If focused on button, Space triggers click too, causing double toggle if also keydown. Could skip if target is button/input. Or handle:
```
if (e.code==='Space' && e.target.tagName !== 'BUTTON')...
```
Maybe space on button should activate native click; no need custom. For R on button okay. Need avoid `r` when meta/ctrl. fine.
Need expose `window.flowFieldDebug = {...}` with `getState` and `sample`:
```
getState: () => ({particleCount: COUNT, paused, fieldZ: +fieldZ.toFixed(3), colorClock:+..., width,height, canvasPixel...}),
restart: restartAnimation, pause:..., resume:...
```
Need perhaps expose positions to verify coherent nearby motion. Could provide method `nearestMotionSample()` returns a few nearby pairs and vector angles. But tool likely can't call JS. Could write status display in DOM with stats including mean coherent angle? We can add hidden debug element with `data-particles`, `data-paused`, etc. Browser inspect may show DOM. Could set document body dataset attributes on each frame maybe too much. We can update status text every ~200ms:
```
<span id=status>Running · 3,000 particles · field 0.000 · hue 0°</span>
```
This yields visible time-varying diagnostics and helps check pause/resume (field/hue stop). Need maybe no need but nice. Need controls responsive; status text can fit. Use small labels. Update DOM every 250ms to avoid overhead. On pause/resume/restart update immediately. Need status `#statusText`. Could include `data-state` attributes on `#app` or body. Browser inspect likely returns text and attributes. We can set:
```
document.body.dataset.running = paused ? 'paused':'running';
document.body.dataset.particles = String(COUNT);
document.body.dataset.fieldphase = fieldZ.toFixed(3);
document.body.dataset.hue = colorClock.toFixed(1);
```
Update every ~250ms. But absent eval tool, inspect output maybe DOM dump includes dataset. Add hidden `<output id="debugState" aria-live="off" ...>` with text JSON. Could include `data-particles="3000"` etc. It might be visible if not hidden. We can put `<div id=telemetry>` small visible. Need aesthetics. Let's design HUD:
```
<div class="hud" id="hud">
  <div class="brand">
    <span class="dot"></span>
    <div>
      <div class="title">PERLIN FLOW</div>
      <div class="meta"><span id=stateLabel>RUNNING</span> · <span id=count>3,000 particles</span></div>
    </div>
  </div>
  <div class="buttons">...
  <div class="readout" id=readout>FIELD 0.00 · HUE 0°</div>
</div>
<div class="hint">Space pause · R restart</div>
```
At 1200x800, HUD width maybe 480px, top-left 22px. Buttons ~100 each. Readout maybe small. Need not hide stage. Could use top row. CSS media query for <600px to stack. Need maybe title font letter spacing. Fine.

Need maybe indicate paused by button text "Resume" and state label "PAUSED", dot color. Need `aria-pressed`. Restart button text "Restart". Need perhaps `aria-live=polite` on state label. Need not network/fonts; use system monospace. External assets none. Need no `url()` backgrounds. CSS gradients okay. Buttons styled. Need no external. Need no separate file.

Need issue p5 library may try network for docs? no. Need no network requests. Fine.

Need verify with browser. Need perhaps use local `p5.min.js` script exact tag `<script src="p5.min.js"></script>`. Need ensure body scripts order. Need perhaps p5 global warnings about `noiseDetail` etc. Fine.

Let's write code carefully.

Detailed code sketch:

```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" ...>
<title>Perlin Flow Field</title>
<style>
:root { color-scheme:dark; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#030610; }
body { font-family:...; }
canvas { display:block; position:fixed; top:0; left:0; z-index:0; }
.hud { position:fixed; z-index:2; top:18px; left:18px; display:flex; gap...; align-items:center; padding...; background:linear-gradient(...); border...; border-radius...; box-shadow...; backdrop-filter: blur(12px); ...}
... 
</style>
</head>
<body>
<section class=hud ...>
...
<button id=pauseBtn ...><span class=icon>Ⅱ</span><span id=pauseLabel>Pause</span></button>
...
<div id=readout>FIELD 0.00 · HUE 0°</div>
</section>
<div class=hint>...
<output id=telemetry class=sr-only aria-hidden=true>...</output>
<script src="p5.min.js"></script>
<script>
(() => {
'use strict';
const COUNT=3000, CELL=26, BINS=36, TAU=Math.PI*2;
let paused=false, cnv, ctx;
let cols=0,rows=0, fvx,fvy;
let x,y,prevX,prevY,speed,hueBase, particleBin, binCounts, binStarts, binCursor, order;
let fieldZ=0, colorClock=0, elapsed=0, lastUi=0;
const palette = Array.from({length:BINS}, (_,i)=>`hsla(${Math.round(i*360/BINS)}, 94%, 63%, 0.46)`);
... 
window.setup = function(){...}
window.draw = function(){ if(paused)return; const dt=Math.min(Math.max(deltaTime||16.67, 1), 34); ...}
...
})();
</script>
</body>
</html>
```
Need careful: global mode p5 looks up `window.setup` etc. Defining inside IIFE as `window.setup = ...` works. `deltaTime`, `width`, `height`, `noise`, `createCanvas`, etc are globals (globally bound variables from p5). Access inside function works via global lexical lookup. But p5 maybe attaches globals to window; fine. Using `window.setup` okay. Need avoid name clash with built-in `speed`, no issue. Need `windowResized` similarly. Need `window.keyPressed` maybe not needed. Need setup called by p5 after DOM load. Need `ctx = drawingContext` global inside setup; `cnv.elt.getContext('2d')` could be more robust. Use `ctx = cnv.elt.getContext('2d')`, avoids relying on global `drawingContext`. Need p5 with `pixelDensity(1)` before createCanvas? p5 docs: `pixelDensity(1)` can be called before createCanvas? Usually `pixelDensity(1)` in setup after createCanvas works but resizes backing store. We can call `pixelDensity(1)` before createCanvas perhaps p5 warns cannot before? Safer:
```
cnv=createCanvas(windowWidth,windowHeight);
pixelDensity(1);
```
This sets canvas width/height to displayed dims. `ctx = cnv.elt.getContext('2d')`. Need after pixelDensity perhaps context still same. Fine.
`frameRate(60); noiseDetail(3,0.52);`
`allocateParticles()` creates arrays.
`rebuildField()` creates grid arrays based on width/height.
`clearCanvas(true); initializeParticles(); updateField(0); drawHeads(); updateUI(true);`
Potential issue `noiseSeed` call should be before first `updateField`.
Need maybe p5 `noiseDetail(3,0.5)` accepted. Good.

Rebuild field dims:
```
cols = Math.ceil(width/CELL)+2;
rows = Math.ceil(height/CELL)+2;
fvx=new Float32Array(cols*rows);
fvy=...
```
When sampling x from 0..width, gx=x/CELL <= width/CELL <= cols-2, so ix+1 <= cols-1. Good. For y similarly. If x near width exactly, ix = floor(width/CELL), plus1 safe. Fine.
`computeField()`:
```
const scale=0.0034;
const driftX=elapsed*0.004? Need choose.
for r...
  const wy=r*CELL;
  for c...
    const wx=c*CELL;
    const n = noise((wx + elapsed*0.006?)*scale, (wy+elapsed*0.002?)*scale, fieldZ);
```
Need decide drift in px/s. `elapsed` in seconds. If `wx + elapsed*7` (7 px/s), noise coords shift 0.0238/s at scale 0.0034; significant over 40s. If too slow, z handles. Use 4 px/s x, -2.5 px/s y. Need maybe no negative coordinate issues; p5 noise handles negative? likely. Add offset 1000 to avoid. `noise(1000+(wx+elapsed*4)*scale, 1000+(wy-elapsed*2)*scale, fieldZ)`. Large offset 1000 can cause floating precision issues? p5 noise handles within. Better 100. Use `wx*scale + 100 + elapsed*0.018`, `wy*scale + 100 - elapsed*0.009`, `fieldZ`. Here field coords drift 0.018/s, ~0.18 noise units in 10s, good. That means pattern flows. `fieldZ += dt*0.000075`; at 60fps 0.0045/s? Wait dt milliseconds ~16, times 0.000075 = 0.0012 per frame, times 60 = 0.072 per sec. Yes. Fine. `elapsed += dt*0.001` = 0.0167/frame. `colorClock = (colorClock + dt*0.012) %360` = 12°/s. Good. Need fieldZ not grow indefinitely? Could modulo but then repeats; requirement pattern changes instead of repeating short recorded sequence. If fieldZ modulo 1000 maybe effectively nonrepeating for hours. Keep growing; noise precision eventually maybe but okay. Could wrap at 10000 with noiseSeed change but no need.

Angle computation:
```
const n = noise(...); 
const angle = (n - 0.5) * TAU * 2.6 + Math.sin(fieldZ*0.35)*0.35;
fvx[idx] = Math.cos(angle);
fvy[idx] = Math.sin(angle);
```
Since p5 noise output typically 0.3..0.7, angle range -2.6..2.6 plus bias; vectors mostly coherent but enough variety. Need perhaps map n to 0..TAU*2 for more swirls:
`const angle = n * TAU * 1.8 + elapsed*0.04;`
n around 0.5 => 5.65 rad, nearby n differences small; vectors vary smoothly. Full range 0..11.3 rad (nearly two rotations), which can create vortices. That's good. Use `noise` 3D with drift. Need maybe fields can have abrupt direction if n crosses boundaries where angle wraps, but cos/sin continuous, so no issue. The field can locally rotate. Good.
Could use second lower-amplitude noise to make more organic:
```
const n = noise(...);
const n2 = noise(...+57, ...+..., fieldZ*0.7+11);
const angle = (n*0.78 + n2*0.22)*TAU*2.0 + elapsed*0.025;
```
Doubles noise calls. Maybe okay but not needed. Use `noiseDetail(3,0.55)` gives detail. Need "smoothly varying Perlin-noise vector field" — one 3D noise with multiple octaves qualifies. Add `angle = n * TAU * 2.0 + Math.sin(elapsed*.07)*.5` maybe global rotation. Since `elapsed` drift affects sample, field evolves. `fieldZ` affects. Fine.

Interpolation:
```
const gx=oldX/CELL; const gy=oldY/CELL;
const ix=gx|0; const iy=gy|0; // nonnegative
const tx=gx-ix, ty=gy-iy;
const i00=iy*cols+ix,i10=i00+1,i01=i00+cols,i11=i01+1;
const w00=(1-tx)*(1-ty), w10=tx*(1-ty), w01=(1-tx)*ty,w11=tx*ty;
let vx = fvx[i00]*w00+...;
let vy = ...
const mag = Math.sqrt(vx*vx+vy*vy);
if (mag>0.0001) { vx/=mag; vy/=mag; } else { vx=1;vy=0; }
```
Per particle sqrt 3000, okay. Could skip normalize but need speed consistent. Use 1/Math.sqrt via `Math.sqrt`. Fine.
Need perhaps include slight inertia to make smooth trajectories? Particle velocity directly follows field; visually fine. Could store velocity arrays and blend:
```
velX[i] = velX[i]*0.82 + vx*0.18; velY...; normalize; x += velX*speed...
```
This adds local coherence and graceful turns. Need two more arrays. But not necessary; field already smooth. Could add to make trails less jittery. p5 noise field changes slowly, direct vector is fine. Need speed variation maybe 1.1..2.4 px/frame. At dt 16.7, use `step = dt/16.6667` to make frame-independent:
`const step = dt*0.06` (16.7*0.06=1). `x += vx*speed[i]*step`. On 120Hz speed per step smaller; fine.
Need `speed[i] = 0.9+Math.random()*1.6` px/frame. Field vector magnitude 1, so 0.9-2.5 px/frame.
Need head dots at initial setup maybe drawing with current hues. `drawHeads()`:
```
ctx.globalCompositeOperation='source-over'; maybe clear already.
ctx.globalCompositeOperation='lighter';
for b ... ctx.fillStyle=...; ctx.beginPath(); for particles in bin ctx.moveTo(x+1.1,y); ctx.arc(x,y,1.1,0,TAU); ctx.fill();
```
Need bin assignment computed from current colorClock and maybe no field direction. Could just draw one path per bin with `ctx.rect(x,y,1.2,1.2)` to avoid arcs. Define heads as small squares with `ctx.fillRect` per particle grouped by fillStyle:
```
for b: ctx.fillStyle=paletteHeads[b]; for all i if(binBase...)=... ctx.fillRect(x[i]-0.7,y[i]-0.7,1.4,1.4)
```
Scanning 36*3000 =108k on restart only, fine. Or compute sorted order. Need not. Could use one `ctx.fillStyle` per particle; 3000 on restart only fine. But `renderInitialHeads` after restart while paused may show arrangement. Use `ctx.fillStyle = 'rgba(190,220,255,.65)'` and fill all; but colors should vary over time. Could use paletteHeads string computed from base hue + colorClock. Need use `headPalette` perhaps strings with alpha 0.8. Could draw small rects with HSL color per particle; 3000 state changes on restart only okay. Fine.
Need clear canvas:
```
function clearTrails(){
 ctx.save? no need.
 ctx.globalCompositeOperation='source-over';
 ctx.globalAlpha=1;
 ctx.fillStyle='#030610';
 ctx.fillRect(0,0,width,height);
 ctx.globalCompositeOperation='source-over';
}
```
Need perhaps p5 canvas transforms? pixelDensity=1, no transforms. Fine.
Need fade:
```
ctx.globalCompositeOperation='source-over';
ctx.fillStyle='rgba(3, 6, 16, 0.045)';
ctx.fillRect(0,0,width,height);
ctx.globalCompositeOperation='lighter';
...
ctx.globalCompositeOperation='source-over';
```
Alpha fade per frame. Need frame-rate independence: at 30fps dt double, should fade more to maintain same trail duration. Could compute alpha = `1 - Math.pow(1-0.045, dt/16.67)`; maybe use string with dynamic alpha (one allocation). Fine. Use fixed alpha 0.04; at 60fps trail ~25 frames, at 30fps ~50 frames but same time duration if dt doubles? Actually fixed per frame means half fade rate in time at 30fps, longer trails; should adapt. Compute:
```
const fade = 1 - Math.pow(0.955, dt/16.6667);
ctx.fillStyle = `rgba(3,6,16,${fade.toFixed(4)})`;
```
Need dynamic string per frame, fine. Could use `ctx.globalAlpha=fade; ctx.fillStyle='#030610'; ctx.fillRect(...); ctx.globalAlpha=1;` avoids string. Great. Use `ctx.globalAlpha = fade`. Then switch to lighter and palette strings with fixed alpha. Need remember globalAlpha multiplies stroke alpha. Set to 1 after fade. Fine.
Need fade after compute field? Order: fade first, update positions, draw lines. If paused return so nothing fades. Good.
Need field update before particle loop. Need compute field with current fieldZ/elapsed. Need maybe advance field first (so pattern changes) then compute. Sequence:
```
const dt=...
elapsed += dt/1000;
fieldZ += dt*0.000075;
colorClock = ...
const fade = ...
clear/fade...
computeField();
updateAndDraw();
updateTelemetry...
```
Need when restart fieldZ random and elapsed maybe 0; clear; initialize; computeField; drawHeads. Next frame increments. Need new arrangement and new field. Good.
Need noiseSeed changes on restart; p5's noiseSeed maybe global impure; fine. Need `fieldZ = Math.random()*500;` then computeField. This makes field immediate random. Need `noiseSeed(Math.floor(Math.random()*1e9));` before compute. Need `elapsed=0; colorClock=Math.random()*360;`.
Need reset arrays. Need perhaps `initializeParticles()` uses low-discrepancy arrangement? "new particle arrangement" random positions enough. But to show coherent motion, maybe use uniform random distribution. Need nearby particles can be spatially near; with 3000 random points on 1200x800, density ~1 per 320 px², average nearest ~9px, so plenty. Need local coherent motion. Good.
Could use clusters or offscreen? No need.
Need perhaps assign particle hue based on position to create color gradients. We can combine:
```
hueBase[i] = (180 + 200*Math.random()) %360; // mostly cool/warm? 
```
Maybe use two bands:
```
const u=Math.random();
hueBase[i] = u<.82 ? 175 + u*1.9? 
```
Let's choose palette:
- 70% cool: 185..300 (cyan-blue-violet)
- 20% magenta: 300..340
- 10% amber: 25..50.
With colorClock shifting, full spectrum eventually. Need base array:
```
const q=Math.random();
hueBase[i] = q<0.72 ? 185+Math.random()*105 : q<0.9 ? 285+Math.random()*55 : 25+Math.random()*30;
```
Maybe all colors around cyan-violet plus gold. Good.
Need `hue = hueBase[i] + colorClock + (vx*22 - vy*14);` direction term ±36. This means spatial color variation tied to field. Need bin 0..35.
Need palette HSL strings fixed across full hue spectrum; saturation 92% lightness 64% alpha 0.42. Need perhaps head palette alpha 0.85 and lightness 72%. Fine.
Need line width perhaps `ctx.lineWidth = 1.15;` and `ctx.lineJoin='round'`, lineCap. With lighter composite, strokes accumulate into bright trails. Need maybe use `ctx.shadowBlur=0`.
Need set `ctx.globalAlpha=1` before strokes. Need palette strings have alpha. Fine.
Need maybe draw all particles at pause? When pause via `noLoop`, last frame remains. Good.
Need `noLoop` call from event after p5 initialized. Buttons can be clicked before setup? p5 loads quickly, but if click very early might call `noLoop()` before p5 global exists. Could guard:
```
function setPaused(value) {
 paused=value;
 if (typeof window.noLoop==='function') {...}
 ...
}
```
Since p5 global methods attached to window by time script runs? After p5.min.js loaded, global p5 exists but global mode methods maybe created at instantiation. Could be undefined. Better events only after DOM loaded; p5 auto setup maybe soon. Could use `requestAnimationFrame` or guard. Need robust:
```
if (paused && typeof window.noLoop==='function') window.noLoop(); else if (!paused && typeof window.loop==='function') window.loop();
```
In setup, if initial paused false, loop already running. Need if `paused` was set before setup, call noLoop at end setup. Fine.
Need maybe expose debug object before p5 setup; functions handle ctx null. If restart called before setup, could set flag. Could ignore; not likely. But robust:
```
function restartAnimation() {
 if (!ctx) { pendingRestart=true; return; }
 ...
}
setup: if (pendingRestart) ...
```
Not necessary but can implement simple guard `if (!ctx || !x) return;`. The browser tests likely after load. Need expose functions that can be called from console if possible. Need `window.flowField = {state: ..., pause, resume, restart, sample...}`. Need `state()` not `getState` perhaps. We can include both. Need perhaps `sampleMotion()` to inspect coherence: could implement method returning field vectors at sample points or nearest particles. But no eval tool? Could be useful for automated checks maybe evaluator calls window API. Let's design debug robustly:
```
window.flowField = {
 get state(){...} // maybe not JSON
 getState(){ return {...}; },
 pause(){setPaused(true);},
 resume(){setPaused(false);},
 restart(){restartAnimation();},
 sampleField(px=width/2,py=height/2){...},
 sampleParticles(n=12){ return ... } // returns positions/velocities?
};
```
Need not expose 3000 positions. But could implement `coherenceSample()` computing direction angles for 5 nearby points. This directly verifies. Might be overkill. Maybe evaluator not using debug. But nice.
Could store `lastVX,lastVY` arrays for each particle from update, then debug can return nearby neighbor directions. Need two more arrays; fine. Could compute from field in debug directly. Add `velX`, `velY` arrays? Need not for update; but can fill from vx/vy each frame. Then debug `nearestPairs()` finds first 8 particles within e.g. 30px of a reference and returns their vx/vy/hue. But evaluator would need call. Not required. Could avoid complexity.

Need telemetry DOM:
```
const readout = document.getElementById('readout');
const stateLabel = ...
const telemetry = ...
function updateTelemetry(force=false){
 if(!force && millis()-lastUi<250) return; // p5 millis() global; use performance.now()
 ...
 stateLabel.textContent = paused?'PAUSED':'RUNNING';
 pauseLabel.textContent = paused?'Resume':'Pause';
 pauseBtn.setAttribute('aria-pressed', paused?'true':'false');
 readout.textContent = `FIELD ${fieldZ.toFixed(2)} · HUE ${Math.round(colorClock)}° · ${COUNT.toLocaleString()} PARTICLES`;
 document.body.dataset.state=...
 document.body.dataset.field=...
 telemetry.textContent = JSON.stringify(...) maybe hidden.
}
```
Need avoid `millis()` before p5 setup? Use `performance.now()`. Good. Need `lastUi` based on performance.now. Need update on every pause/resume/restart with force=true. Need call from draw every 250ms. Need `fieldZ.toFixed(2)` changes ~0.07/s, so over 250ms 0.02, visible. Hue changes 3° per 250ms. Good. Need state label. Need maybe status dot class `paused` on HUD.
Need `aria-live` for state label maybe `polite`. Fine.

Need screen reader hidden `.sr-only`. Need maybe `output` hidden but still inspect. Could set `aria-hidden=true` but visible DOM text. Good.

Need `windowResized`:
```
window.windowResized = function(){
  resizeCanvas(windowWidth, windowHeight);
  pixelDensity(1);
  ctx = cnv.elt.getContext('2d'); // same
  rebuildField();
  clearTrails();
  initializeParticles();
  computeField();
  drawHeads();
  updateTelemetry(true);
};
```
`pixelDensity(1)` after resize maybe redundant but can call. Need p5 `resizeCanvas` can trigger draw? I think it calls redraw maybe if noLoop. But we do fill. Need if paused, resize triggers redraw? p5 resizeCanvas calls `redraw()` maybe draw returns due paused, leaving clear+heads. Fine.
Need `windowWidth`, `windowHeight` may be 0? no.
Need `cnv.elt.setAttribute('aria-label', ...)`. Fine.
Need maybe add `role="img"`? canvas can be decorative; controls semantic. Fine.

Need ensure no accidental external requests: p5.min.js local script only, no fonts. CSS no URL. Fine.
Need maybe script tag `src="p5.min.js"` exact. Good.

Need verify p5 global mode load: Using IIFE and `window.setup`, p5 scans window at constructor time. Let's recall p5.js global mode: when document ready, it creates `new p5()` and then copies methods to window. It checks if `window.setup` or `window.draw` exist before instantiating? p5.min.js at bottom likely:
```
if (document.readyState === "complete") {...} else window.addEventListener("load", ...)
```
It may create p5 and then `if (!window.setup && !window.draw) return;` after copying? Need no issue. Defining window.setup before load event works. Good.

Potential issue with `ctx` native drawing and p5's internal state: p5's `_renderer` might reset globalCompositeOperation or alpha at start of each draw? Actually p5 calls `this._renderer._update()` etc and `resetMatrix`; may set styles? It could reset `drawingContext` properties? I think no. But to be safe set all needed state each frame. Fine.
Need maybe p5's `createCanvas` sets canvas context with `alpha:true`; our opaque fill covers. Fine.

Need maybe use `document.body.dataset` in hidden telemetry; okay.
Need use `performance.now()` in setup before p5? available. Fine.

Let's write file.

Need inspect/reload browser. Need perhaps check `sampleField` unused in update? We defined sampleField but update duplicates sampling. Could leave; debug uses. Need check compile errors. Need use browser reload/inspect.

We have initial output screenshot from reload showing lots of curved trails, coherent motion, colors but seems very dim and mostly green/yellow/blue. Need inspect at several moments, motion frames, controls. Need maybe wait some time. Browser tool likely reload captures frame after ~? It displayed field 431.55 and hue 172, so already many frames. Need screenshot now.

Interesting screenshot shows dramatic collapse to attractor-like bright ribbon, large empty regions. Field may be too convergent over time; particles collect into certain flow lines and wrap, leaving sparse areas. Requirement full-screen flow-field particle animation; ideally maintain coverage, even after minutes. Need perhaps recycle particles not only at boundaries but also random lifespan/respawn to maintain full-screen distribution. Requirement "Recycle particles at canvas boundaries and keep population bounded." Could also lifespan respawn random location to prevent clustering. Need bounded population, no growing trail history. We should add age/lifetime arrays and respawn particles at random locations after randomized lifespan, which keeps full canvas populated and variation. But phrase recycle at boundaries suggests wrap; we do. Need perhaps add random respawn to maintain distribution. Need carefully think if screenshot after long time perhaps fieldZ started random 431.5 and noise 3D with large z; p5 noise with z large? Perlin at z=431 may have fine periodic? It may still. Pattern seems particles converge to a narrow ribbon, which can happen in a divergence-free? Our angle-based vector field isn't divergence-free; particles eventually collect along attracting streamlines. Need respawn to maintain coverage. Add `age` and `life` Float32Array; increment by dt; when `age >= life`, respawn at random x,y, reset age, random life maybe 300-900 frames (5-15 sec). Need avoid too frequent; perhaps 4-12 sec. This is a common flow-field technique. Also boundary wrap stays. Need skip draw on respawn. Need define `age` and `life` arrays; initialize with random initial ages so respawns stagger. Use `life[i] = 350+Math.random()*650` frames equivalent. Since step = dt/16.67, `age[i] += step`; when >= life, respawn. Need maybe new speeds/hue? Could set hueBase to new value too? Not necessary but nice. Need no bound issue. Need skip draw for respawn. Need ensure not mixed with wrapping. Good.

Also need perhaps make particles brighter and color variation more evident. Screenshot shows mostly green/blue/yellow lines; color bins shift globally but base hues random. Need perhaps increase alpha/lightness and line width to make animation more visible. Initial screenshot was dark but coherent; second has bright white ribbons due accumulation from overlap. Need respawn will spread. Could perhaps set line width 1.25 and alpha 0.42. Fine.
Need maybe lower

fade alpha? Current 0.044 per frame -> trails ~22 frames. Screenshot shows long trails perhaps due many particles overlapping and additive, okay. Need perhaps shorten fade to 0.06 to prevent overly long bright ribbons. But requirement fading trails; visible. At 0.044, clear after ~1 sec, good. Need maybe bright color variation over time; HSL hue shifts 12°/s. In 5 seconds from hue 172 to 237 (actually 65° over ~5.4s), visible. Good. Need perhaps use `colorClock` to also change strokePalette hues rather than shifting particles through fixed hues? Shifting bins works.

Need check initial coherent nearby motion and changing colors by taking motion frames. Need maybe use `browser motion` tool. Let's first add lifespan respawn, then reload and sample multiple moments. Need maybe compute field initial head colors. Need perhaps reset after restart draws new heads. Need clear. Need perhaps preserve full-screen coverage.

Need edit code with multiple changes: add `particleAge, particleLife`; allocate; initialize random age/life; update loop respawn; skip. Need choose lifespan perhaps 4-12 seconds: at 60 fps 240-720 frames. With 3000 particles, average ~8 sec, ~375 respawns/sec, enough to maintain uniform distribution. That's fairly high but okay. Need avoid too much randomness interfering with coherent trails; 8 sec gives long enough trails. Initial ages random up to life to stagger. Need maybe if lifespan too short, random specks always; fine.
Implementation in update loop:
```
particleAge[i] += step;
if (particleAge[i] >= particleLife[i]) {
  const rx=Math.random()*width, ry=...;
  x[i]=previousX[i]=rx; y[i]=previousY[i]=ry;
  particleAge[i]=0;
  particleLife[i]=260+Math.random()*620;
  particleSpeed[i]=... maybe no need;
  particleBin[i]=255;
  continue;
}
```
Need place before sampling? Currently loop samples field first; can check age first and skip. Need use oldX etc after. Need order:
```
for i:
 const oldX=x[i], oldY=y[i];
 previousX=oldX...
 particleAge[i]+=step;
 if (particleAge[i]>=life) { respawn; skip; }
 // sample field...
```
Need boundary wrap as before. Need perhaps set age arrays
in initialize. Need update `sampleField` not relevant.
Need maybe add debug state averageAge? no.
Need density maybe field convergence still strong; respawn should show random sparse dots plus streamlines. Need perhaps provide a small "source" distribution even along attractors. Good.

Need maybe field scale too large causing global convergence across screen. We could use `noise` angle map with too much swirl; could choose 2D curl noise to be divergence-free and maintain uniform density. That would be more robust. Curl of scalar noise:
 vx = ∂n/∂y, vy = -∂n/∂x, normalized. This is incompressible, so particles don't cluster as strongly. Need compute finite differences from noise at grid points; more noise calls (4 per cell) or precompute scalar grid then finite differences (one noise per cell). That's ideal! Precompute scalar noise for field grid (extra neighbor row/col), then set vector from differences:
```
scalar[idx]=noise(...);
for row 0..rows-2, col 0..cols-2:
 dx = scalar[(row)*cols+col+1] - scalar[row*cols+col-1]? Need neighbors.
 dy = scalar[(row+1)*cols+col] - scalar[(row-1)*cols+col].
 vx=dy; vy=-dx; normalize.
```
Need extra boundary around grid to compute derivatives; could compute scalar with col=-1..cols-2 etc. Our grid `fieldCols = ceil(width/CELL)+2` already has one extra; need two extra maybe. We can compute scalar with dimensions cols+? Simpler sample noise at each vector grid point plus use forward differences:
```
for row=0..rows-1, col=0..cols-1:
 scalar[idx] = noise(nx, ny, z)
for row=0..rows-2, col=0..cols-2:
 dx=scalar[idx+1]-scalar[idx];
 dy=scalar[idx+cols]-scalar[idx];
 vx=dy; vy=-dx; normalize
```
Need last row/col vectors zero; sampling particle near width uses col up to ceil(width/CELL), and cols = ceil(width/CELL)+2, so we never reach last row+1. Need forward difference valid at col<=cols-2; yes. Need fill last row/col from previous values to be safe. Could compute fieldX/Y for all grid points including last row/col by using derivatives

at neighbor if available or duplicate. Need no zeros causing weird. Could set for last row/col to value from previous. Or compute scalar array with cols+1/rows+1 and then vector grid cols/rows. Let's do simpler:
- `noiseValues = new Float32Array((fieldCols+1)*(fieldRows+1))` with scalar samples for grid points including one extra at right/bottom.
- `sCols=fieldCols+1`; for row=0..fieldRows, col=0..fieldCols, scalar[row*sCols+col]=noise(...)
- For each vector grid point row=0..fieldRows-1, col=0..fieldCols-1:
  dx = scalar[row*sCols+col+1] - scalar[row*sCols+col];
  dy = scalar[(row+1)*sCols+col] - scalar[row*sCols+col];
  vx=dy; vy=-dx; normalize (with small epsilon)
  fieldX[row*fieldCols+col]=vx; ...
- Curl field is divergence-free (approximately), preventing attractor clustering. But finite differences may be tiny; normalize yields chaotic direction from small gradients but coherent due noise. Need perhaps blend with a base angle-based field to avoid zero gradient weirdness? Curl field could create many vortices and no convergence, likely nice. Need test. Color depends vx,vy.
- Need `noiseValues` and `scalarCols` global. Rebuild allocate. Need one extra row/col. Need fieldCols = ceil(width/CELL)+2 as before.
- Need use `noiseDetail(3,0.52)`, scalar smooth. Need finite derivative from adjacent grid points; normalized. This yields vector field tangent to noise contours, very coherent. Nearby vectors locally coherent. Good.
- But at saddle points magnitude near zero, normalization amplifies tiny variations and can cause abrupt direction; with smooth noise and interpolation okay. Could add small smoothing or blend with angle field. Could compute n at center and angle, then use `angle` field rather than curl; but clustering. Need maybe use curl mixed with angle:
```
const angle = n*TAU*1.85+...
const curlX=dy, curlY=-dx; normalize curl.
fieldX = curlX*0.75 + cos(angle)*0.25; fieldY=...; normalize resultant.
```
This introduces some divergence but less convergence. Could just use pure curl. Need test visual.
- Need perhaps choose field scale such that scalar gradients coherent over ~

300 px. `scale=0.00335`; noise at adjacent 26px grid differs ~0.05 noise units, p5 noise gradient perhaps 0.1; okay.
- Need perhaps `noiseDetail(2,0.55)` for smoother curl; 3 octaves can make fine variations but still coherent. Use 3 as is.
- Need gradual evolution via z and drift. Fine.
- Need perhaps field pattern can still create closed loops; particles follow contours and wrap; random lifespan respawn maintains distribution.
This would improve full-screen animation. Need decide whether to replace angle field with curl. The first screenshot after reload showed full-screen wavy pattern; second after maybe 5 sec showed concentration. Pure curl should stay distributed. Let's implement curl + lifespan. Need careful code edit. Could use read to inspect relevant sections. Need maybe simpler patch with exact matches. Let's read lines around globals/computeField/initialize/update.

Need maybe inspect top globals lines 155-185.

Need edit globals:
```
let fieldScalar, scalarCols;
let particleAge, particleLife;
```
TAU maybe no longer used if curl; could keep. Need maybe curl with angle mixed uses TAU. Need decide.

Let's implement pure curl plus angle bias maybe. Need ensure no clustering. Let's analyze curl field mathematically: For scalar φ, v=(∂φ/∂y, -∂φ/∂x), divergence ∂vx/∂x + ∂vy/∂y = φ_yx - φ_xy =0. So incompressible. Normalizing by magnitude breaks divergence-free property (multiplying by spatially varying scalar), but direction field still follows contours; trajectories can converge due normalization factor. Specifically v = ∇⊥φ/|∇φ| has divergence = ∇(1/|∇φ|)·∇⊥φ ≠0 generally, but less severe. Could skip normalization and scale velocities by a constant based on gradient magnitude; then divergence-free exactly. But gradient magnitudes might be tiny/variable; particles could stall in flat areas. Could blend normalized and unnormalized with speed factor. Need maintain coverage. Maybe use unnormalized curl multiplied by constant e.g. 80, then clamp magnitude to [0.3,2]? Clamping again breaks divergence-free. But can use a soft speed function of gradient magnitude that preserves direction. Better use angle-based field with `curl` direction only, random respawn might suffice. Need test screenshot. Could also create divergence-free angle field via streamfunction and use unnormalized vector without per-particle normalization; use field vectors scaled globally based on gradient (small). Need calibrate: p5 noise differences between neighboring grid points maybe ~0.02-0.1. Multiplying by 30 gives 0.6-3 px/frame. Could use `fieldX = dy*35; fieldY=-dx*35;` and in particle update no normalization, but speed variation correlated to gradient. Need avoid particles stuck where gradient zero. Could add small base rotation or use `vx = dy*35 + cos(angle)*0.4`. Hmm.

Alternative use `angle = noise*TAU*...` and add random lifespan respawn; perhaps enough. But screenshots after 5 sec showed severe convergence; respawn with average 8 sec might still have many particles converging over 8 sec. Need pure curl to reduce.

Could precompute scalar grid and set normalized curl; then blend with a small rotational global drift to avoid stagnation. Need use step speed. Let's test. We can always adjust based on screenshot. Need browser test after edit.

Implementation computeField:
```
let fieldScalar, scalarCols;
...
rebuild: fieldCols=...; fieldRows=...; scalarCols=fieldCols+1; fieldScalar=new Float32Array((fieldCols+1)*(fieldRows+1));...
computeField:
  const scale...
  for row=0; row<=fieldRows; row++:
    ...
    for col=0; col<=fieldCols; col++:
       fieldScalar[row*scalarCols+col]=noise(...)
  for row=0; row<fieldRows; row++:
    for col=0; col<fieldCols; col++:
      sIndex=row*scalarCols+col;
      dx=fieldScalar[sIndex+1]-fieldScalar[sIndex];
      dy=fieldScalar[sIndex+scalarCols]-fieldScalar[sIndex];
      let vx=dy, vy=-dx;
      // maybe add gently rotating bias from scalar angle:
      const n=fieldScalar[sIndex];
      const a=n*TAU*1.5+elapsed*.05;
      vx += Math.cos(a)*0.015; vy += Math.sin(a)*0.015; // ensures nonzero and breaks exact contour following slightly.
      mag=sqrt...
      fieldX[idx]=vx/mag;...
```
Need gradient differences likely ~0.05, bias 0.015 small. Could normalize. Need maybe add `noiseDetail(2,0.5)` to smoother field; 3 okay. Need perhaps field scale 0.0028 to larger coherent swirls. Let's keep.
Need maybe `sampleField` debug works.

Lifespan arrays:
```
particleAge[i]=Math.random()*life
```
Need maybe `particleLife[i] = 260 + Math.random()*620;` frame units. With initial age random, particles have 0-~14s remaining. Need maybe avoid immediate random respawns causing sparse coverage? With uniform initial positions, fine.
Need respawn at random position and perhaps randomize hue/speed to keep changing color. Could set `hueBase[i] = (hueBase[i]+90+Math.random()*180)%360` but palette eventually full spectrum anyway. Could leave. Need maybe `particleAge[i]=0; particleLife[i]=260+...; particleSpeed[i]=...;`
Need maybe skip drawing on respawn.

Need perhaps remove `sampleField` function? no.
Need maybe `TAU` still used in computeField.
Need perhaps color shift based on `vx*22-vy*14`; fine.
Need maybe stroke alpha adjust to 0.5 and line width 1.25 to brighten. Could decide after screenshot.

Let's edit with one call multiple replacements. Need exact text.

Need check syntax perhaps scalarIndex loops: row loop each row has fieldCols+1 entries = scalarCols, but `scalarIndex` increments globally and continues; that's correct. sIndex = row*scalarCols; here+scalarCols accesses next row. Last row `fieldRows` has scalar data; okay. Need maybe fieldX/Y sampling i11 at row=ceil(height/CELL) +1? We have fieldRows=ceil(height/CELL)+2. For y<height, gy<height/CELL <= ceil(height/CELL), row<=ceil(...), row+1<=+1 < fieldRows. Good. For x similarly.
Need perhaps `fieldScalar[scalarIndex]` with col<=fieldCols (fieldCols+1 values), scalarCols=fieldCols+1. Good.

Need reload and screenshot. Need perhaps check console.

New screenshot full-screen coherent vortices, nice. Colors mostly yellow/green/magenta due current hue; need maybe more brightness. Trails are short arcs and swirls; good. Need sample several moments. We can use motion action perhaps. Let's call.

Looks great: coherent swirls, full-screen, trails, color changes from green/yellow to cyan/blue over ~2 sec. Need note field readout from 416.97 to 417.12 (increases), hue 182->207. Good. Need verify pause/resume and restart. Need use browser click on pause button coordinates. HUD at x ~250? Buttons: pause around x 290,y49, restart x 397,y49. Need click pause then check telemetry stable across moments/screenshots, then click resume check changes, then restart check clear and new arrangement. Need perhaps use motion after restart. Need maybe inspect screenshot right after restart to see clear. Need tool click can target coordinates. Let's click Pause at (290,49).

Need verify pause actually static. Take motion frames while paused and compare DOM field/hue; screenshot maybe same. Need call motion.

Great. Need resume click same coords.

Need verify resume with motion frames/field increases. Call motion maybe.

Nice. Need now verify restart clears trails and new arrangement appears. Need click restart at (397,49). The screenshot right after click should show dark canvas with tiny dots. Then motion to see new pattern develop. Need maybe check field resets to random, elapsed 0, color new. Let's click.

The screenshot after click already shows fresh short arcs, not just dots, meaning a few frames ran; trails are cleared and new arrangement/field pattern clearly different. Good. Need maybe motion after restart to see new pattern and changing colors. Also need perhaps check restart while paused behavior? We set resume. Requirement not specific. Need maybe check that restart clears trails using a more precise screenshot maybe use pause then restart? But click output is enough. Could perhaps use `motion` to see new arrangement develops. Let's call.

Great. Need maybe inspect final file syntax, perhaps check no console errors after all interactions. We have no console errors. Need maybe need test restart while paused maybe not necessary but could quickly check. Need need to verify "Pause/Resume and Restart" controls responsive at 1200x800; done. Need perhaps verify restart clears trails and new arrangement; screenshot immediately after click showed no old trails? Let's revisit attached image from click perhaps not shown explicitly in user image? It is likely included but omitted from text; we saw perhaps? The earlier browser click output had an image but not displayed in user message? We can call screenshot or maybe need more precise check. Maybe use `click` from a paused state then capture screenshot, or use Restart while animation running and `motion` starting with dark background. We saw click output's screenshot maybe tool attached but not rendered in conversation; likely yes. Could call restart then screenshot immediately. But need note that click tool captures frame after 1ms; could show dark canvas with short strokes. Need perhaps call click again then screenshot right away. Let's do one more targeted check maybe with restart click and screenshot, then inspect. Also need perhaps verify keyboard shortcuts? Not required. Need maybe console errors. Could use `inspect` action after all. Need maybe check file includes p5 script tag and no external URLs. Use bash grep. Need maybe static sanity check with Node parsing inline JS? Could extract script and run node --check, but p5 references not executed, just parse. Need use `node` maybe available. Could use basic grep. Need maybe check final file line count. Need maybe consider browser tool state after motion; no console errors. Good.

Potential issues:
- p5 global `noiseSeed` call in `restartAnimation` may be undefined if called before p5 init; browser tests after load. fine.
- `sampleField` debug method may be called with x=width exactly and array indices safe? width/2 default. fine.
- `window.flowField.getState()` returns fieldCells etc after setup. fine.
- `window.setup` may conflict p5's global `setup` property; works.
- `pixelDensity(1)` after resizeCanvas may trigger p5 internal redraw and maybe reset context; we reset.
- `particleBin` Uint8Array with 255 sentinel; fine.
- `sortedIndices` Uint16Array can store up to 2999; fine.
- wrap detection with large dt clamp 34 -> step 2.04, speed max 2

.5 => 5px, one cross. fine.
- viewport tiny width/height less than 5 could wrap beyond one width; not likely. Could use modulo for robustness. But at 1200x800 fine.
- no trail history: persistent canvas. fine.
- field evolves gradually via z/drift and no short sequence. fine.
- varying colors over time via colorClock. fine.
- at least 2000: 3000. fine.
- nearby coherent: bilinear curl field. screenshots show.
- bounded population: fixed arrays, lifespan/respawn. fine.
- recycle at boundaries: wrap. fine.
- restart clears trails and new arrangement: `clearTrails`, `initializeParticles`, new noise seed etc. fine.
- pause/resume: noLoop and loop. fine.
- full-screen fit: createCanvas windowWidth/Height, resizeCanvas. fine.
- controls responsive at 1200x800: yes.

Need maybe check no hidden external resources. Grep `http|url(` etc. Need maybe static syntax check via `node --check` extracting inline script. Could use Python maybe available. Let's run:
- `grep -n "script src" index.html`
- `rg "https?://|url\(" index.html` maybe none.
- use Python extract last script block and `node --check /tmp/...` if node available.
Need not create extra files in cwd? Could write temp to /tmp. Fine.
Need maybe check browser `inspect` final. Let's do parallel with bash and browser inspect? Tools can operate parallel maybe safe; could call multi_tool_use. But browser inspect and bash independent. Let's use one multi tool call.

Need note python3 unavailable; use node to extract inline script maybe. Need fix static check. Could use `node -e` with fs and regex write file then `node --check`. Need do. Also perhaps final browser screenshot shows color changed to purple/blue, field evolved. Great.

Need perhaps check restart clear more explicitly. We could pause then restart? But restart resumes; after click screenshot at +1ms likely shows dark canvas with short strokes, but since it resumes, animation may run a few frames before capture. Could call `window.flowField.pause()` via browser? No eval action. Could add a hidden debug button? Not necessary. Could use keyboard maybe: click pause, then click restart; restart resumes, no. Could perhaps click restart and immediately screenshot to see clear; click tool already captures. Need perhaps trust. Need maybe use tool `click` with coordinates and then screenshot; likely screenshot after 1ms. Let's do targeted verification with click restart then `screenshot` and inspect attached. Need maybe no need, but requirement explicitly asks check trails clear. We should do. Need maybe click restart from current bright pattern and capture.

This screenshot shows dark canvas with short arcs and no long trails, new arrangement indeed. Good. Need static syntax check via Node directly. Let's do.

Need decide if any more improvements needed. We have 15 min budget but plenty. Need perhaps inspect code for duplicates/unused sampleField? It's okay. Need perhaps consider hidden bug with `sampleField` debug method: `sampleVector` is shared Float32Array could be mutated by multiple calls, returns plain object. fine.
Need perhaps concern use of `document.body.dataset` generated on every telemetry update (every 220ms) creates strings, but no growing history. fine.
Need perhaps concern p5 global mode `window.draw` returns if paused; with `noLoop`, draw not called anyway. fine.
Need perhaps `setPaused` calls `loop()` on restart even if already running; p5's loop() might call `_draw()` immediately and potentially schedule extra RAF? Let's check p5 loop does `if (!this._loop) { this._loop=true; if(this._setupDone) this._draw(); }` maybe no duplicate. Fine.
Need perhaps `restartAnimation` calls `setPaused(false)` which calls loop, then updateTelemetry again; redundant but fine.
Need perhaps `updateTelemetry(true)` inside setPaused and then again in restart; harmless.
Need perhaps `drawInitialHeads` uses 3000 fillStyle assignments on setup/restart/resize; okay.
Need perhaps field grid scalar includes `fieldRows+1` rows, each scalarCols; row loop `row<=fieldRows` inclusive -> fieldRows+1 rows, good.
Need maybe `scalarIndex` increments across all rows and not reset; correct.
Need maybe `fieldX/Y` gradients at last row/col use scalar samples one step ahead; good.
Need maybe sim performance: browser motion frames ~700ms intervals, field readout +0.6 over 2s -> ~0.3/s not 0.075/s expected because p5 `deltaTime` maybe larger than 16ms due heavy computation? Let's compute: fieldZ increment dt*0.000075; dt clamped 34, at ~30fps dt=33 -> 0.002475/frame*30=0.074/s. But observed +0.61 over 2s -> ~0.3/s. Wait earlier field from 168.49 to 168.56 in 2.077s =0.07/2s=0.034/s. Actually `motion` DOM final 168.56, first frame maybe 168.49; +0.07/2s =0.035/s. Another

check after initial 416.55 at reload to 417.12 after motion ~0.57 perhaps over longer wait between tool calls. Good. So field evolves ~0.035/s because frame rate maybe 8fps? Hmm. ColorClock from 115 at reload to 207 after motion =92°; at 12°/s, ~7.7s elapsed between tools including screenshot/reload etc. So field +0.57 =0.57/7.7=0.074/s. Exactly expected. Fine. Visual pattern changes in screenshots due particle motion and drift. Good.
Need perhaps frame rate maybe low? Tool captures at ~700ms frames, not necessarily indicating FPS. We can infer colorClock from 182 to 207 in 2s =25°/2s=12.5°/s, so yes ~60fps or dt properly scaled. Great. Field +0.15/2s=0.075/s. Good. Fine.
Need perhaps check `frameRate(60)` and heavy compute field ~1900 noise calls + 3000 particles; likely 60fps. Good.
Need perhaps verify `console` no errors across all checks; yes. Need maybe final file present. yes.
Need maybe need mention unverified behaviors. User asks "briefly report what you actually checked and which behaviors remain unverified." Need give concise report with verified and unverified. Need mention:
- checked initial and motion frames at several moments: 3000 particles, coherent vortex/streamlines, fading trails, hue changes, evolving field readout.
- clicked Pause, 4 motion frames static field/hue, clicked Resume, field/hue advanced.
- clicked Restart, immediate frame dark with short strokes and new field seed/arrangement, then new pattern grew.
- console no errors, local p5 script, JS syntax, no external refs.
- unverified: long-duration field non-repetition beyond short sample, viewport resizing/other sizes, keyboard shortcuts maybe (not tested), exact FPS/performance on low-end devices. Need mention these as remaining unverified. Need not overdo.
Need maybe mention file path clearly `index.html`. Need no need to include code. Good.

Before final, perhaps maybe need ensure browser final state doesn't matter. Fine.
Need maybe perhaps use `browser reload` one final time after static check? No edits after last browser check, so no need. The file unchanged since edits. Static check found no external refs. Good.

Need maybe consider requirement "Use provided p5.min.js (global p5) through a plain local script tag; runner will inline it into final artifact." We did exact. Great.

Need maybe maybe title's `canvas` element has no `role` but okay. controls responsive. Fine.

Need maybe mention no external network requests verified via grep, not actual network instrumentation. Could say "Checked source has no URLs/CDNs; console clean." Need distinguish actually checked. Fine.

Need final concise. Need not mention static parse failed initial attempt. No. Need maybe say "unverified: resize behavior and long-run non-repetition / keyboard shortcuts". Need mention field evolves by 3D Perlin z/drift in code, but only short-term evolution observed. Good.

Let's compose final with bullets.