Flowfield Visualizer

FLOWFIELD VISUALIZER V2 // GRID-BAKED PARTICLES

A high-performance flowfield painter. 5000 particles advect through a baked Perlin vector field.

CORE ENGINE:

- Custom Perlin: 256 perm table seeded 1337, fade = x^3*(x*(x*6-15)+10), grad ct()

- Field Modes: curl (curl-noise default), vortex (tangential + curl*0.6), radial (outward + curl*0.6), wave (sin(x*y+t) )

- Grid Baked: Float32Array gridX/Y [cols*rows], cols 40-160 (default 120), rows = cols * (H/W) adaptive, bilinear sampling Zf()

- Params: force 0-2 (0.4), noiseScale 0.3-8 (2), timeSpeed 0-2 (0.35), trail 0-1 (0.82) -> fade 0.008+0.7*pow(1-trail,2.2)

- Obstacles: array {x,y,r}, tangential deflect inside ( -y/r, x/r ), Right-click / Shift+Click place, Double-click remove

PARTICLES:

- Typed Arrays: Px, Py, Plife, Pseed, Phue, Pspeed — Float32Array[count]

- Count 500-12000 (5000), Life 1-20 (6), LineWidth 0.3-3 (1.15), Brightness 0.05-1 (0.42)

- Respawn: 4 edges, 40-130% life jitter, edge injection

- Speed calc = dist / deltaTime for alpha

INTERACTION:

- Mouse: off / attract / repel (3), mouseForce 0-12 (3), mouseRadius 0.05-1.2 (0.35)

- Dye Mode: drag to paint, injects ~100/sec at cursor, Phue = dyeHue

- Dye Hue 0-360 (200)

- ObstacleSize 0.1-1 (0.3)

COLOR MODES:

- flow = atan2(fy,fx), speed = 240 - clamp(speed*90), radial = hypot(x,y)*160%360

- spectrum = index/count*360, ice = 185+seed*35, fire = 5+seed*45, mono = white, dye = Phue

RENDER:

- Canvas full DPR, transparent BG toggle, trail via destination-out or rgba(10,10,16,alpha)

- 32 Hue buckets: Path2D per bucket for batched strokes, lighter composite, round caps

- Bloom: dim wide pass lineWidth*3.5 alpha 0.07 + sharp pass alpha = brightness

- ShowField: grid vectors every 6 cells, arrowheads, rgba(255,255,255,0.16)

- ShowObstacles: radial gradient fill + outer stroke + highlight

- UI: 360px glass panel rgba(10,10,16,0.72) blur 20px border white/[0.08], JetBrains Mono + Inter, FPS + Grid Res

HOTKEYS: H hide, Space next field, R respawn, F field overlay, O obstacles, B bloom

Drag = push/dye, Shift+Click = place obstacle

One file. No deps. V2.

DEVELOPER NOTES:

This build is entirely in HTML5 and based on a Unity prototype.

If you would like me to update and expand this file please consider donating.

Let me know in the comments what desired improvements or bugs you experience and we will update it for Version 2.

The Flowfield Visualizer is free to play, if you would like to purchase the zip file you can use the source code to The Flowfield Visualizer in your projects.