Velocity Field — Interactive p5.js

{"id":"gen-1784892732-ilPmuRJRvdp8XGcCZbgN","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"Here's an interactive p5.js piece — a **Velocity Field**: a glowing particle system that reacts to your cursor speed. Move slowly and you get calm cyan/blue drifting embers with tendrils reaching for your cursor; flick fast and it erupts into hot pink/orange bursts with shockwave rings. Click for an explosion, and it auto-pilots when you stop moving.\n\n```html\n\n\n\n\n\nVelocity Field — Interactive p5.js\n\n\n\n\n\n\n

\n\n\n\n```\n\n**What it does:**\n- 🐌 **Slow movement** → cool cyan/blue palette, few small embers drifting on a Perlin-noise flow field, plus faint tendrils connecting particles back to your cursor\n- 🔥 **Fast movement** → palette shifts through violet/magenta to hot orange, particles get bigger, more numerous, white-hot cores, and inherit your flick direction\n- 💥 **Very fast flicks / clicks** → expanding shockwave rings and burst explosions\n- 📊 **HUD** with a live velocity meter, and an auto-pilot mode (lissajous path with speed surges) that demos the full effect when you stop moving\n- ✨ Additive blending + fading trails give everything a neon glow","refusal":null,"role":"assistant","annotations":null,"audio":null,"function_call":null,"tool_calls":null,"reasoning":"The user wants a p5.js animation that:\n1. Is interactive based on mouse cursor\n2. Has a nice visualization\n3. Changes when the mouse moves faster\n\nLet me think about what would be a cool visualization:\n- Particle systems are always cool\n- Could do flow fields\n- Could do trails\n- Speed-based color/size changes\n\nLet me create something really impressive:\n- A particle system that emits from the mouse cursor\n- When mouse moves fast, particles burst out with more energy, different colors\n- When slow, they're calm and flowy\n- Maybe add some flow field for organic movement\n- Color palette that shifts based on speed\n- Add some glow effects with blend modes\n\nIdeas for the visualization:\n1. Particle trail with speed-reactive properties\n2. Flow field particles that get disturbed by mouse\n3. Ribbons/tentacles following the mouse\n4. Orbs that orbit and react to velocity\n\nI'll make something like a \"energy trail\" / \"neon flow\" system:\n- Particles spawn at mouse position\n- Mouse velocity affects: spawn rate, particle size, color hue, initial velocity, glow\n- Slow movement = cool colors (blue, purple), calm drifting\n- Fast movement = hot colors (orange, pink, white), explosive bursts\n- Add some screen shake or chromatic effects on very fast movement?\n- Background with slight fade for trails\n- Maybe connect nearby particles with lines for a web effect\n\nLet me also add:\n- A subtle UI showing speed\n- Idle animation when mouse hasn't moved (auto-pilot mode so it looks good even without interaction)\n- Nice typography overlay\n\nTechnical details:\n- Use p5.js from CDN\n- Use HSB color mode for nice color transitions\n- Use blendMode(ADD) for glow effects\n- Particle class with position, velocity, life, size, hue\n- Flow field using noise() for organic motion\n- Speed calculation: dist between current and previous mouse pos\n- Smoothed speed value (lerp) for less jittery transitions\n\nLet me write the code:\n\n```javascript\nlet particles = [];\nlet prevMouse = {x: 0, y: 0};\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet autoAngle = 0;\nlet lastMoveTime = 0;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n prevMouse.x = mouseX;\n prevMouse.y = mouseY;\n background(0);\n}\n\nfunction draw() {\n // Fade background for trails\n blendMode(BLEND);\n noStroke();\n fill(0, 0, 5, 20); // dark with alpha\n rect(0, 0, width, height);\n \n // Calculate speed\n let speed = dist(mouseX, mouseY, pmouseX, pmouseY);\n smoothSpeed = lerp(smoothSpeed, speed, 0.15);\n \n // Idle mode - auto pilot\n let t = millis() * 0.001;\n let px = mouseX, py = mouseY;\n if (millis() - lastMoveTime > 2000) {\n px = width/2 + cos(t * 0.7) * width * 0.25;\n py = height/2 + sin(t * 1.1) * height * 0.25;\n }\n \n // Spawn particles based on speed\n let spawnCount = floor(map(smoothSpeed, 0, 50, 2, 20));\n ...\n}\n```\n\nActually let me make this really polished. Key features:\n\n1. **Particle system** with:\n - Flow field influence (Perlin noise)\n - Speed-based hue: slow = blue/cyan, fast = pink/orange/white\n - Speed-based size and count\n - Burst particles on very fast movement\n\n2. **Visual polish**:\n - ADD blend mode for glow\n - Fading background for trails\n - Connection lines between nearby particles when calm\n - Vignette maybe\n\n3. **UI**:\n - Minimal HUD showing velocity\n - Title that fades out\n - Speed meter bar\n\n4. **Idle mode**: lissajous curve auto-movement when mouse is still\n\nLet me also add a shockwave ring when speed crosses a threshold.\n\nLet me write the full HTML:\n\n```html\n\n\n\n \n Velocity Field — Interactive p5.js\n \n \n\n\n\n\n\n```\n\nNow the particle class:\n\n```javascript\nclass Particle {\n constructor(x, y, speed) {\n this.pos = createVector(x, y);\n let angle = random(TWO_PI);\n let mag = random(0.5, 2) + speed * 0.15;\n this.vel = p5.Vector.fromAngle(angle).mult(mag);\n // fast movement: particles inherit mouse direction\n this.life = 1;\n this.decay = random(0.008, 0.02);\n this.baseSize = map(speed, 0, 60, 2, 10) * random(0.5, 1.5);\n this.hue = ...\n }\n \n update() {\n // flow field\n let n = noise(this.pos.x * 0.003, this.pos.y * 0.003, frameCount * 0.002);\n let angle = n * TWO_PI * 2;\n let flow = p5.Vector.fromAngle(angle).mult(0.2);\n this.vel.add(flow);\n this.vel.mult(0.96); // drag\n this.pos.add(this.vel);\n this.life -= this.decay;\n }\n \n show() {\n let h = (this.hue) % 360;\n let s = map(this.life, 0, 1, 30, 90);\n fill(h, s, 100, this.life * 80);\n noStroke();\n let sz = this.baseSize * this.life;\n circle(this.pos.x, this.pos.y, sz);\n // glow\n fill(h, s - 20, 100, this.life * 20);\n circle(this.pos.x, this.pos.y, sz * 3);\n }\n}\n```\n\nHue mapping: I want slow = blue (~200-220), medium = purple/magenta (~280), fast = orange/red/pink (~320-360/0-30). \n\nActually a nice approach: hueBase = map(smoothSpeed, 0, 50, 210, 350) — from blue through purple to pink/red. Add random offset.\n\nMouse direction inheritance for fast movement makes it feel physical:\n```javascript\nlet mouseVel = createVector(mouseX - pmouseX, mouseY - pmouseY);\nparticle.vel.add(mouseVel.copy().mult(0.3 * random()));\n```\n\nShockwave rings:\n```javascript\nlet rings = [];\n// when smoothSpeed crosses threshold\nif (speed > 40 && random() < 0.3) {\n rings.push({x: mouseX, y: mouseY, r: 0, maxR: 200, life: 1});\n}\n```\n\nConnection lines when calm (slow speed): draw lines between particles close to mouse? That might be expensive with many particles. Could limit particle count. Actually connecting particles within a certain distance using spatial check — with ~300 particles it's 45k checks per frame, which is fine in JS actually. Let me keep particle count moderate (~400 max) and only do connections when speed is low.\n\nActually, let me do connections always but with a distance that shrinks when fast... Hmm, might be visually noisy. Let me do: connections drawn between particles and nearby particles, opacity based on slowness. Or simpler: draw lines from particles toward mouse if within range, when slow — creates a \"tendrils reaching for cursor\" effect. That's cool and cheap.\n\nLet me structure:\n\n```\n- Background fade\n- Compute speed, smoothSpeed\n- Determine emitter position (mouse or auto-pilot)\n- Spawn particles (count based on speed)\n- Spawn bursts + rings on fast movement\n- Update & draw rings (behind particles)\n- Update & draw particles (ADD blend)\n- Draw tendril lines when calm\n- Draw cursor orb (glowing core at cursor)\n- HUD: title, speed meter\n```\n\nCursor orb: a glowing circle at the mouse that grows with speed, with hue matching. Nice focal point.\n\nHUD:\n- Top-left: title \"VELOCITY FIELD\" small letter-spaced text\n- Bottom: speed bar with gradient\n- Show numerical speed\n\nIdle detection: if millis() - lastMoveTime > 2500, auto-pilot. Update lastMoveTime when mouse moves (or in mouseMoved). Use pmouse comparison since mouseMoved doesn't fire always? mouseMoved fires whenever it moves. Fine.\n\nAuto-pilot should also inject some variation in speed — lissajous naturally varies speed. Good.\n\nBackground: I'll fade with very dark blue instead of pure black: fill(230, 60, 4, 18) in HSB. Wait, with rect over everything using BLEND mode, that works.\n\nActually, for the fade, better: fill with alpha. In HSB: fill(230, 80, 5, 15). Let me test values mentally — alpha 15-25 out of 100 (since colorMode HSB 360,100,100,100). Alpha 15-25 gives decent trails.\n\nOne issue: with ADD blend mode for particles and BLEND for background fade, need to switch modes each frame. That's fine.\n\nText rendering: p5 text with fill white low alpha. Use textFont('monospace') or a Google font? Could link a Google Font like \"Space Grotesk\" or \"JetBrains Mono\". Since it renders in a browser, Google Fonts link is fine. Let me add:\n\n```html\n\n```\n\nAnd use textFont('Space Grotesk').\n\nSpeed meter: bottom-left, a bar. Draw background rect, then fill gradient-ish (a few rects). Map smoothSpeed 0..60. Also label \"VELOCITY\".\n\nExtra juice:\n- Chromatic rings at high speed\n- Slight screen shake when speed very high? Could translate randomly by speed-based amount. Might be annoying; keep subtle: translate(random(-s, s) * 0.3...). Actually screen shake with trails gets messy because the fade rect also moves. Skip or apply shake only to particles drawing? Skip shake, keep it clean.\n\nLet me also handle mousePressed: big explosion burst. Nice extra interaction.\n\nTouch support: p5 handles touch as mouse automatically mostly. Add touchStarted/touchMoved returning false to prevent scroll.\n\nLet me now write out the complete code carefully.\n\n```javascript\nlet particles = [];\nlet rings = [];\nlet smoothSpeed = 0;\nlet hueBase = 210;\nlet lastMove = 0;\nlet autoT = 0;\nlet started = false;\n\nconst MAX_PARTICLES = 900;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n background(230, 70, 3);\n lastMove = millis();\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n background(230, 70, 3);\n}\n\nfunction draw() {\n // ---- fade ----\n blendMode(BLEND);\n noStroke();\n fill(230, 70, 3, 18);\n rect(0, 0, width, height);\n\n // ---- speed ----\n let rawSpeed = dist(mouseX, mouseY, pmouseX, pmouseY);\n if (rawSpeed > 0.5) lastMove = millis();\n smoothSpeed = lerp(smoothSpeed, rawSpeed, 0.12);\n\n // hue: calm blue -> purple -> hot pink/orange\n let targetHue;\n let sNorm = constrain(smoothSpeed / 55, 0, 1);\n if (sNorm < 0.5) {\n targetHue = map(sNorm, 0, 0.5, 200, 280);\n } else {\n targetHue = map(sNorm, 0.5, 1, 280, 340);\n }\n hueBase = lerp(hueBase, targetHue, 0.08);\n\n // ---- emitter position (mouse or auto-pilot) ----\n let idle = millis() - lastMove > 2500;\n let ex, ey, eSpeed;\n if (idle) {\n autoT += 0.016;\n let t = autoT;\n ex = width / 2 + sin(t * 0.9) * width * 0.28 + sin(t * 0.37) * width * 0.08;\n ey = height / 2 + sin(t * 1.27 + 1.3) * height * 0.28 + cos(t * 0.53) * height * 0.08;\n // approximate auto speed\n eSpeed = 15 + sin(t * 2.3) * 14; // varies over time\n } else {\n ex = mouseX; ey = mouseY;\n eSpeed = rawSpeed;\n }\n\n let emitSpeed = idle ? abs(eSpeed) : smoothSpeed;\n\n // mouse direction vector for inertia\n let dirX = idle ? cos(autoT * 0.9) : (mouseX - pmouseX);\n let dirY = idle ? sin(autoT * 1.27) : (mouseY - pmouseY);\n\n // ---- spawn ----\n let count = floor(map(emitSpeed, 0, 60, 3, 26, true));\n for (let i = 0; i < count; i++) {\n particles.push(new Particle(ex, ey, emitSpeed, dirX, dirY));\n }\n // burst on fast\n if (rawSpeed > 42) {\n for (let i = 0; i < 15; i++) particles.push(new Particle(ex, ey, 80, dirX, dirY));\n if (random() < 0.4) rings.push(new Ring(ex, ey, hueBase));\n }\n\n if (particles.length > MAX_PARTICLES) {\n particles.splice(0, particles.length - MAX_PARTICLES);\n }\n\n // ---- rings ----\n blendMode(ADD);\n for (let i = rings.length - 1; i >= 0; i--) {\n rings[i].update();\n rings[i].show();\n if (rings[i].dead()) rings.splice(i, 1);\n }\n\n // ---- particles ----\n for (let i = particles.length - 1; i >= 0; i--) {\n let p = particles[i];\n p.update();\n p.show();\n if (p.dead()) particles.splice(i, 1);\n }\n\n // ---- tendrils when calm ----\n let calm = 1 - constrain(smoothSpeed / 30, 0, 1);\n if (calm > 0.05) {\n stroke(hueBase, 60, 100, 18 * calm);\n strokeWeight(1);\n for (let p of particles) {\n let d = dist(p.pos.x, p.pos.y, ex, ey);\n if (d < 140) {\n line(p.pos.x, p.pos.y, ex, ey);\n }\n }\n noStroke();\n }\n\n // ---- cursor orb ----\n drawOrb(ex, ey, emitSpeed);\n\n // ---- HUD ----\n drawHUD(idle);\n}\n```\n\nParticle class:\n\n```javascript\nclass Particle {\n constructor(x, y, spd, dx, dy) {\n this.pos = createVector(x + random(-4, 4), y + random(-4, 4));\n let a = random(TWO_PI);\n let m = random(0.3, 1.6) + spd * 0.08;\n this.vel = p5.Vector.fromAngle(a, m);\n // inherit emitter direction (scaled by speed)\n this.vel.x += dx * random(0.1, 0.4);\n this.vel.y += dy * random(0.1, 0.4);\n this.life = 1;\n this.decay = random(0.006, 0.018);\n this.size = random(1.5, 3.5) + spd * random(0.04, 0.12);\n this.hue = (hueBase + random(-25, 25) + 360) % 360;\n this.sat = random(55, 95);\n this.noiseOff = random(1000);\n }\n update() {\n let n = noise(this.pos.x * 0.0022, this.pos.y * 0.0022, frameCount * 0.0015 + this.noiseOff);\n let ang = n * TWO_PI * 2.5;\n this.vel.x += cos(ang) * 0.22;\n this.vel.y += sin(ang) * 0.22;\n this.vel.mult(0.955);\n this.pos.add(this.vel);\n this.life -= this.decay;\n }\n dead() { return this.life <= 0; }\n show() {\n let a = this.life * this.life;\n let sz = this.size * (0.4 + this.life * 0.6);\n // glow halo\n fill(this.hue, this.sat * 0.6, 100, a * 14);\n circle(this.pos.x, this.pos.y, sz * 4.5);\n // core\n fill(this.hue, this.sat, 100, a * 85);\n circle(this.pos.x, this.pos.y, sz);\n // white hot center for bigger ones\n if (this.size > 5) {\n fill(this.hue, 20, 100, a * 60);\n circle(this.pos.x, this.pos.y, sz * 0.5);\n }\n }\n}\n```\n\nRing class:\n\n```javascript\nclass Ring {\n constructor(x, y, hue) {\n this.x = x; this.y = y;\n this.r = 6;\n this.maxR = random(140, 260);\n this.life = 1;\n this.hue = hue;\n }\n update() {\n this.r = lerp(this.r, this.maxR, 0.08);\n this.life -= 0.03;\n }\n dead() { return this.life <= 0; }\n show() {\n noFill();\n strokeWeight(2.5 * this.life);\n stroke(this.hue, 50, 100, this.life * 70);\n circle(this.x, this.y, this.r * 2);\n strokeWeight(1);\n stroke(this.hue, 20, 100, this.life * 40);\n circle(this.x, this.y, this.r * 2 * 1.15);\n noStroke();\n }\n}\n```\n\nOrb:\n\n```javascript\nfunction drawOrb(x, y, spd) {\n blendMode(ADD);\n let r = 6 + spd * 0.35;\n noStroke();\n fill(hueBase, 70, 100, 10);\n circle(x, y, r * 6);\n fill(hueBase, 60, 100, 25);\n circle(x, y, r * 2.6);\n fill(hueBase, 25, 100, 90);\n circle(x, y, r);\n fill(0, 0, 100, 90);\n circle(x, y, r * 0.45);\n}\n```\n\nHUD:\n\n```javascript\nfunction drawHUD(idle) {\n blendMode(BLEND);\n // title\n fill(0, 0, 100, 55);\n textFont('Space Grotesk');\n textSize(13);\n textAlign(LEFT, TOP);\n let title = 'V E L O C I T Y F I E L D';\n text(title, 24, 20);\n fill(0, 0, 100, 30);\n textSize(10);\n text('move slow for calm · move fast for chaos · click to burst', 24, 42);\n\n // speed meter bottom-left\n let bx = 24, by = height - 44, bw = 180, bh = 5;\n let sNorm = constrain(smoothSpeed / 55, 0, 1);\n noStroke();\n fill(0, 0, 100, 12);\n rect(bx, by, bw, bh, 3);\n // gradient fill\n fill(hueBase, 80, 100, 80);\n rect(bx, by, bw * sNorm, bh, 3);\n fill(0, 0, 100, 40);\n textSize(9);\n textAlign(LEFT, BOTTOM);\n text('VELOCITY ' + nf(smoothSpeed, 1, 1), bx, by - 6);\n\n if (idle) {\n fill(0, 0, 100, 25 + sin(frameCount * 0.05) * 10);\n textAlign(RIGHT, BOTTOM);\n textSize(10);\n text('AUTO-PILOT — move your mouse', width - 24, height - 24);\n }\n}\n```\n\nExplosion on click:\n\n```javascript\nfunction mousePressed() {\n for (let i = 0; i < 90; i++) {\n particles.push(new Particle(mouseX, mouseY, 90, 0, 0));\n }\n rings.push(new Ring(mouseX, mouseY, hueBase));\n rings.push(new Ring(mouseX, mouseY, (hueBase + 40) % 360));\n lastMove = millis();\n}\n```\n\nHmm wait, when clicking, Particle constructor with spd 90 gives big particles with high initial velocity. Good.\n\ntouchStarted:\n```javascript\nfunction touchStarted() { lastMove = millis(); }\n```\nActually returning false to prevent default. But careful: returning false in touchStarted prevents mousePressed emulation maybe. Keep it simple:\n\n```javascript\nfunction touchMoved() { lastMove = millis(); return false; }\n```\n\nAlso need `document` title and styling. Let me also add a subtle scanline or vignette? Vignette via CSS radial-gradient overlay div — but that would sit above canvas... pointer-events: none. That works and looks classy:\n\n```css\n#vignette {\n position: fixed; inset: 0;\n pointer-events: none;\n background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);\n}\n```\n\nNice touch.\n\nOne concern: `map(emitSpeed, 0, 60, 3, 26, true)` — p5 map's 5th param clamp exists? Yes, `map(value, start1, stop1, start2, stop2, [withinBounds])` — clamp supported in recent p5. Good.\n\nnoise with frameCount*0.0015 as z — fine.\n\nPerformance: MAX 900 particles with additive glow circles — each particle draws 2-3 circles. ~2000 circles per frame. That's okay for most machines; maybe reduce to 700 to be safe. Canvas is windowWidth/Height. Fine.\n\nTendrils loop over up to 900 particles drawing lines — fine.\n\nOne issue with auto-pilot: emitSpeed uses abs(eSpeed) but eSpeed = 15 + sin*14 → range 1..29, always positive. Fine, no need for abs. But I want the auto-pilot to sometimes go \"fast\" so users see hot colors without moving mouse. Range up to 29 gives purple hues. Maybe make it 8 + max(0, sin(t*0.5))^3 * 45 so it periodically surges into hot range. Let me do:\n\n```javascript\nlet surge = pow(max(0, sin(t * 0.45)), 3); // 0..1 periodic\neSpeed = 6 + surge * 50;\n```\n\nThat gives calm drifting with periodic bursts. \n\nAlso for auto-pilot dir vector — derivative approximation. Simpler: track previous auto position:\n\n```javascript\nlet prevAuto = null;\nif (idle) {\n ...\n if (prevAuto) { dirX = ex - prevAuto.x; dirY = ey - prevAuto.y; }\n prevAuto = {x: ex, y: ey};\n} else {\n prevAuto = null;\n}\n```\n\nGood — that naturally handles direction and I can even compute eSpeed from actual movement: `eSpeed = dist(ex, ey, prevAuto.x, prevAuto.y)` scaled... at 60fps the lissajous moves maybe 3-10px/frame. Multiply by 3 to make it lively? Let me combine: use actual delta * 2.5 + surge bonus. Actually simpler to keep the surge formula — deterministic and shows off the full color range. I'll use actual delta for direction only.\n\nHmm, but in auto-pilot, smoothSpeed still lerps toward rawSpeed (0 since mouse still), so the HUD meter and hue would go calm while particles use emitSpeed... Inconsistent. Better: make smoothSpeed lerp toward the effective speed (mouse or auto). Let me restructure:\n\n```javascript\nlet targetSpeed;\nif (idle) { compute ex, ey and autoSpeed; targetSpeed = autoSpeed; }\nelse { targetSpeed = rawSpeed; }\nsmoothSpeed = lerp(smoothSpeed, targetSpeed, 0.12);\n```\n\nThen everything downstream uses smoothSpeed, hue follows it, HUD shows it. And for burst detection use rawSpeed only (real mouse fast flicks) plus in idle maybe when surge high, spawn rings occasionally. I'll add: if idle && smoothSpeed > 45 && random() < 0.1 → ring.\n\nClean. Let me also define `dirX/dirY`: for idle use delta of auto positions; for mouse use mouseX - pmouseX.\n\nEdge: on first frame pmouseX = 0 maybe, giving a big rawSpeed flash. Initialize by checking frameCount > 1 or just clamp. Actually p5 sets pmouseX to mouseX at start? pmouseX initial is 0 I think. First frame rawSpeed could be dist from (0,0) — if user's mouse is at corner it's small; if center, big flash once. To avoid: `if (frameCount < 5) rawSpeed = 0;` Simple fix.\n\nAlso on window resize, background reset.\n\nText with Space Grotesk — p5 textFont with a string falls back if not loaded yet; fine.\n\nLet me also make sure ADD blend background fade: I set blendMode(BLEND) before fade rect, then ADD for particles, then BLEND for HUD. Tendrils under ADD with low alpha look nice glowing. Orb under ADD. HUD last in BLEND.\n\nLet me reconsider the hue mapping for more wow. Palette journey:\n- calm: cyan/blue (190-210)\n- medium: violet/magenta (270-300)\n- fast: hot pink/orange (320-350)... \n\nActually hot = orange/yellow (20-45) reads as \"fast/hot\" more than pink. Journey: 195 (cyan) → 265 (purple) → 330 (pink) → 25 (orange, wrapping through 360). Hue interpolation across the 360 wrap needs care: I can just let hue go above 360 and mod in fill — HSB with hue > 360 may not wrap automatically. In p5, hue values outside range get wrapped? p5 does wrap hue I believe (it mods by max). Not 100% sure; safer to mod manually. My Particle already does `(hueBase + offset + 360) % 360`.\n\nSo: sNorm 0..1 → hue: piecewise:\n- 0.0–0.33: 190 → 260\n- 0.33–0.66: 260 → 330\n- 0.66–1.0: 330 → 380 (mod → 20, orange)\n\nNice full journey. Write helper:\n\n```javascript\nfunction speedHue(n) {\n if (n < 0.33) return map(n, 0, 0.33, 190, 260);\n if (n < 0.66) return map(n, 0.33, 0.66, 260, 330);\n return map(n, 0.66, 1, 330, 380);\n}\n```\n\nAnd `hueBase = lerp(hueBase, speedHue(sNorm), 0.07)` — lerp across wrap boundary could sweep weirdly (e.g., from 350 down to 190 goes backwards through all colors) — that's actually fine/colorful, acceptable.\n\nAlso white-hot at extreme: when sNorm > 0.85, reduce particle saturation: sat = lerp(sat, 10, ...) — do it in Particle via stored spd: `this.sat = map(spd, 0, 70, 90, 20, true)` — fast particles become white-hot. \n\nParticle size with spd up to 90 (click): size = random(1.5,3.5) + 90*0.12 ≈ 12-14. Fine.\n\nDecay slower for big? Keep random.\n\nNow the initial \"start\" overlay: some p5 sketches need a click to start (audio), but we have no audio. Just start immediately. Add a brief intro text that fades: \"move your cursor\" big center text fading out over first few seconds:\n\n```javascript\nlet introAlpha = 100;\n// in HUD:\nif (millis() < 6000) {\n let a = map(millis(), 3500, 6000, 70, 0, true);\n fill(0, 0, 100, a);\n textAlign(CENTER, CENTER);\n textSize(min(width * 0.05, 42));\n text('M O V E Y O U R C U R S O R', width/2, height/2);\n textSize(13);\n fill(0,0,100, a*0.6);\n text('speed changes everything', width/2, height/2 + 44);\n}\n```\n\nGood.\n\nAlso cursor: hide default cursor over canvas for immersion: `cursor: none` in CSS on canvas/body, since we draw our own orb. Yes — body { cursor: none; }.\n\nLet me finalize all numbers and write the complete file. Also `frameRate(60)` optional.\n\nDouble-check p5 `map` with clamp param — yes, 5th arg withinBounds. `nf()` for number formatting.\n\nFor `textFont('Space Grotesk')` — call in setup after font loads... fonts load async; calling textFont with family name string makes p5 use CSS font resolution at draw time? p5 textFont with a string sets the font family; it resolves at render, so once the webfont loads it applies. Should be fine. Add fallback: textFont('Space Grotesk, monospace').\n\nPotential issue: `pow(max(0, sin(t*0.45)), 3)` — sin negative → max 0 → 0. Good.\n\nRing stroke under ADD: stroke with alpha — fine.\n\nTendril stroke color uses hueBase — could exceed 360 → mod: `stroke(hueBase % 360, 60, 100, ...)`. I'll mod everywhere hueBase is used directly (orb, tendrils, HUD). Or simpler: keep hueBase in 0..380 and mod at usage: define `let hb = hueBase % 360;` at top of draw and use hb everywhere. \n\nParticles capture hue at spawn with mod — already handled.\n\nHUD meter fill hue uses hb.\n\nOne more flourish: star field background? The fade covers it. Skip.\n\nAlso add slight attraction/gravity? The flow field is enough.\n\nLet me write final code now, being careful with syntax.\n\nAlso include meta viewport for mobile.\n\nFull file:\n\n```html\n\n\n\n\n\nVelocity Field — Interactive p5.js\n\n\n\n\n\n\n

\n\n\n\n```\n\nSketch full code:\n\n```javascript\nlet particles = [];\nlet rings = [];\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet lastMove = 0;\nlet autoT = 0;\nlet prevAuto = null;\n\nconst MAX_PARTICLES = 800;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n background(235, 70, 3);\n textFont('Space Grotesk, monospace');\n lastMove = millis();\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n background(235, 70, 3);\n}\n\nfunction speedHue(n) {\n if (n < 0.33) return map(n, 0, 0.33, 190, 262);\n if (n < 0.66) return map(n, 0.33, 0.66, 262, 330);\n return map(n, 0.66, 1, 330, 380);\n}\n\nfunction draw() {\n // fade layer (trails)\n blendMode(BLEND);\n noStroke();\n fill(235, 70, 3, 16);\n rect(0, 0, width, height);\n\n // --- measure speed ---\n let rawSpeed = (frameCount < 5) ? 0 : dist(mouseX, mouseY, pmouseX, pmouseY);\n if (rawSpeed > 0.5 || mouseIsPressed) lastMove = millis();\n let idle = (millis() - lastMove) > 2600;\n\n // --- emitter (mouse or autopilot) ---\n let ex, ey, dirX = 0, dirY = 0, targetSpeed;\n if (idle) {\n autoT += 0.016;\n let t = autoT;\n ex = width * 0.5 + sin(t * 0.83) * width * 0.27 + sin(t * 0.31) * width * 0.09;\n ey = height * 0.5 + sin(t * 1.19 + 1.7) * height * 0.27 + cos(t * 0.47) * height * 0.09;\n if (prevAuto) { dirX = ex - prevAuto.x; dirY = ey - prevAuto.y; }\n prevAuto = { x: ex, y: ey };\n let surge = pow(max(0, sin(t * 0.42)), 3);\n targetSpeed = 7 + surge * 52;\n } else {\n ex = mouseX; ey = mouseY;\n dirX = mouseX - pmouseX;\n dirY = mouseY - pmouseY;\n targetSpeed = rawSpeed;\n prevAuto = null;\n }\n\n smoothSpeed = lerp(smoothSpeed, targetSpeed, 0.12);\n let sNorm = constrain(smoothSpeed / 55, 0, 1);\n hueBase = lerp(hueBase, speedHue(sNorm), 0.07);\n let hb = hueBase % 360;\n\n // --- spawn particles ---\n let count = floor(map(smoothSpeed, 0, 60, 3, 26, true));\n for (let i = 0; i < count; i++) {\n particles.push(new Particle(ex, ey, smoothSpeed, dirX, dirY));\n }\n\n // shockwaves on fast flicks (and autopilot surges)\n if ((rawSpeed > 42 && random() < 0.5) || (idle && smoothSpeed > 45 && random() < 0.12)) {\n rings.push(new Ring(ex, ey, hb));\n }\n if (rawSpeed > 42) {\n for (let i = 0; i < 12; i++) particles.push(new Particle(ex, ey, 85, dirX, dirY));\n }\n\n if (particles.length > MAX_PARTICLES) {\n particles.splice(0, particles.length - MAX_PARTICLES);\n }\n\n // --- render (additive glow) ---\n blendMode(ADD);\n\n for (let i = rings.length - 1; i >= 0; i--) {\n rings[i].update();\n rings[i].show();\n if (rings[i].dead()) rings.splice(i, 1);\n }\n\n for (let i = particles.length - 1; i >= 0; i--) {\n let p = particles[i];\n p.update();\n p.show();\n if (p.dead()) particles.splice(i, 1);\n }\n\n // tendrils when calm\n let calm = 1 - constrain(smoothSpeed / 28, 0, 1);\n if (calm > 0.04) {\n stroke(hb, 55, 100, 20 * calm);\n strokeWeight(1);\n for (let p of particles) {\n if (dist(p.pos.x, p.pos.y, ex, ey) < 150) {\n line(p.pos.x, p.pos.y, ex, ey);\n }\n }\n noStroke();\n }\n\n // cursor orb\n let r = 7 + smoothSpeed * 0.4;\n fill(hb, 70, 100, 8);\n circle(ex, ey, r * 7);\n fill(hb, 60, 100, 22);\n circle(ex, ey, r * 2.6);\n fill(hb, 25, 100, 85);\n circle(ex, ey, r);\n fill(0, 0, 100, 90);\n circle(ex, ey, r * 0.45);\n\n // --- HUD ---\n blendMode(BLEND);\n drawHUD(idle, sNorm, hb);\n}\n```\n\nWait — tendrils loop draws up to 150-distance lines for each of 800 particles; fine.\n\ndrawHUD:\n\n```javascript\nfunction drawHUD(idle, sNorm, hb) {\n // title\n noStroke();\n textAlign(LEFT, TOP);\n textStyle(BOLD);\n textSize(13);\n fill(0, 0, 100, 60);\n text('V E L O C I T Y F I E L D', 24, 22);\n textStyle(NORMAL);\n textSize(10);\n fill(0, 0, 100, 32);\n text('slow = calm · fast = chaos · click = burst', 24, 44);\n\n // velocity meter\n let bx = 24, by = height - 40, bw = 190, bh = 5;\n fill(0, 0, 100, 12);\n rect(bx, by, bw, bh, 3);\n if (sNorm > 0.01) {\n fill(hb, 80, 100, 85);\n rect(bx, by, max(bw * sNorm, 6), bh, 3);\n }\n textAlign(LEFT, BOTTOM);\n textSize(9);\n fill(0, 0, 100, 45);\n text('VELOCITY ' + nf(smoothSpeed, 2, 1), bx, by - 7);\n\n // autopilot notice\n if (idle) {\n textAlign(RIGHT, BOTTOM);\n textSize(10);\n fill(0, 0, 100, 28 + sin(frameCount * 0.06) * 12);\n text('AUTO-PILOT — move your mouse to take control', width - 24, height - 26);\n }\n\n // intro\n let m = millis();\n if (m < 7000) {\n let a = map(m, 4200, 7000, 75, 0, true);\n textAlign(CENTER, CENTER);\n textStyle(BOLD);\n textSize(min(width * 0.045, 40));\n fill(0, 0, 100, a);\n text('M O V E Y O U R C U R S O R', width / 2, height / 2 - 10);\n textStyle(NORMAL);\n textSize(13);\n fill(0, 0, 100, a * 0.7);\n text('the faster you move, the hotter it burns', width / 2, height / 2 + 34);\n textStyle(NORMAL);\n }\n}\n```\n\nHmm, `map(m, 4200, 7000, 75, 0, true)` before 4200 clamps to 75. Good.\n\nInteractions:\n\n```javascript\nfunction mousePressed() {\n burst(mouseX, mouseY);\n lastMove = millis();\n}\nfunction burst(x, y) {\n for (let i = 0; i < 90; i++) particles.push(new Particle(x, y, 90, 0, 0));\n rings.push(new Ring(x, y, hueBase % 360));\n rings.push(new Ring(x, y, (hueBase + 45) % 360));\n}\nfunction touchMoved() { lastMove = millis(); return false; }\n```\n\ntouchStarted also burst? On mobile, tap = burst is nice: touchStarted → burst(touches[0]...). p5 maps touches to mouseX/Y. mousePressed fires on touch too in p5. Keep mousePressed only, plus touchMoved prevent scroll.\n\nParticle & Ring classes as designed. In Particle constructor I reference global hueBase — fine.\n\nParticle.show: alpha values up to 85 in ADD — bright. Size: `this.size * (0.4 + this.life * 0.6)`.\n\nAlso maybe velocity-based stretch? Drawing circles is cheaper; skip.\n\nCheck: In Particle, decay random(0.006, 0.018) → life lasts ~55–165 frames (1–3s). With ~10 spawns/frame avg → ~800 steady-state at cap. OK.\n\nMAX 800 particles × ~3 circles + tendril lines — should hold 60fps on decent machines, might dip on weak ones. Acceptable.\n\nRing.show uses strokeWeight and stroke with alpha — under ADD fine.\n\nOne more check: `fill(hb, 70, 100, 8)` — alpha 8/100 in ADD, subtle glow. Good.\n\nInitial background(235,70,3) — very dark blue. Vignette overlays.\n\nAlso I should double check `textStyle` — exists in p5 (NORMAL/BOLD). Yes.\n\nFont 'Space Grotesk, monospace' — p5 passes to CSS font shorthand; comma-separated works? p5 sets `this._renderer.drawingContext.font = ...`? For string fonts p5 uses p5.Font? Actually textFont(string) sets font family name; it builds `font` CSS string as `${size}px ${family}`. Family with comma and space inside quotes might break: `13px Space Grotesk, monospace` — that's actually valid CSS font shorthand. OK fine. But to be safe use single quotes? CSS font shorthand: `13px 'Space Grotesk', monospace` would be ideal but p5 won't add quotes; unquoted multi-word family names are still valid CSS (interpreted as sequence of identifiers). Fine.\n\nAlright — also consider `pixelDensity(1)`? On retina, pixelDensity 2 with this many particles could hurt perf. I'll leave default but maybe cap: `pixelDensity(min(2, displayDensity()))`... default is displayDensity. Simpler: leave default; p5 defaults pixelDensity to display density (2 on retina) — 800 particles additive on retina full screen may strain. Set pixelDensity(1) for safety and slightly softer look? Retina at density 1 looks fine for glowy art. I'll set pixelDensity(1) — actually might look blurry on text... compromise: leave it out. Most modern machines handle it. Hmm. I'll include pixelDensity(1) to guarantee smooth 60fps — glow aesthetics tolerate it well, and text is small part. Actually let me not over-engineer; many p5 demos run fine. I'll skip it... \n\nDecision: include `pixelDensity(1)`. Smoothness > crispness for an animation piece. Glow + trails at density 1 still look great.\n\nWrite the final answer with brief description of features and controls. Keep prose concise. Provide the full HTML in one code block.","reasoning_details":[{"type":"reasoning.text","text":"The user wants a p5.js animation that:\n1. Is interactive based on mouse cursor\n2. Has a nice visualization\n3. Changes when the mouse moves faster\n\nLet me think about what would be a cool visualization:\n- Particle systems are always cool\n- Could do flow fields\n- Could do trails\n- Speed-based color/size changes\n\nLet me create something really impressive:\n- A particle system that emits from the mouse cursor\n- When mouse moves fast, particles burst out with more energy, different colors\n- When slow, they're calm and flowy\n- Maybe add some flow field for organic movement\n- Color palette that shifts based on speed\n- Add some glow effects with blend modes\n\nIdeas for the visualization:\n1. Particle trail with speed-reactive properties\n2. Flow field particles that get disturbed by mouse\n3. Ribbons/tentacles following the mouse\n4. Orbs that orbit and react to velocity\n\nI'll make something like a \"energy trail\" / \"neon flow\" system:\n- Particles spawn at mouse position\n- Mouse velocity affects: spawn rate, particle size, color hue, initial velocity, glow\n- Slow movement = cool colors (blue, purple), calm drifting\n- Fast movement = hot colors (orange, pink, white), explosive bursts\n- Add some screen shake or chromatic effects on very fast movement?\n- Background with slight fade for trails\n- Maybe connect nearby particles with lines for a web effect\n\nLet me also add:\n- A subtle UI showing speed\n- Idle animation when mouse hasn't moved (auto-pilot mode so it looks good even without interaction)\n- Nice typography overlay\n\nTechnical details:\n- Use p5.js from CDN\n- Use HSB color mode for nice color transitions\n- Use blendMode(ADD) for glow effects\n- Particle class with position, velocity, life, size, hue\n- Flow field using noise() for organic motion\n- Speed calculation: dist between current and previous mouse pos\n- Smoothed speed value (lerp) for less jittery transitions\n\nLet me write the code:\n\n```javascript\nlet particles = [];\nlet prevMouse = {x: 0, y: 0};\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet autoAngle = 0;\nlet lastMoveTime = 0;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n prevMouse.x = mouseX;\n prevMouse.y = mouseY;\n background(0);\n}\n\nfunction draw() {\n // Fade background for trails\n blendMode(BLEND);\n noStroke();\n fill(0, 0, 5, 20); // dark with alpha\n rect(0, 0, width, height);\n \n // Calculate speed\n let speed = dist(mouseX, mouseY, pmouseX, pmouseY);\n smoothSpeed = lerp(smoothSpeed, speed, 0.15);\n \n // Idle mode - auto pilot\n let t = millis() * 0.001;\n let px = mouseX, py = mouseY;\n if (millis() - lastMoveTime > 2000) {\n px = width/2 + cos(t * 0.7) * width * 0.25;\n py = height/2 + sin(t * 1.1) * height * 0.25;\n }\n \n // Spawn particles based on speed\n let spawnCount = floor(map(smoothSpeed, 0, 50, 2, 20));\n ...\n}\n```\n\nActually let me make this really polished. Key features:\n\n1. **Particle system** with:\n - Flow field influence (Perlin noise)\n - Speed-based hue: slow = blue/cyan, fast = pink/orange/white\n - Speed-based size and count\n - Burst particles on very fast movement\n\n2. **Visual polish**:\n - ADD blend mode for glow\n - Fading background for trails\n - Connection lines between nearby particles when calm\n - Vignette maybe\n\n3. **UI**:\n - Minimal HUD showing velocity\n - Title that fades out\n - Speed meter bar\n\n4. **Idle mode**: lissajous curve auto-movement when mouse is still\n\nLet me also add a shockwave ring when speed crosses a threshold.\n\nLet me write the full HTML:\n\n```html\n\n\n\n \n Velocity Field — Interactive p5.js\n \n \n\n\n\n\n\n```\n\nNow the particle class:\n\n```javascript\nclass Particle {\n constructor(x, y, speed) {\n this.pos = createVector(x, y);\n let angle = random(TWO_PI);\n let mag = random(0.5, 2) + speed * 0.15;\n this.vel = p5.Vector.fromAngle(angle).mult(mag);\n // fast movement: particles inherit mouse direction\n this.life = 1;\n this.decay = random(0.008, 0.02);\n this.baseSize = map(speed, 0, 60, 2, 10) * random(0.5, 1.5);\n this.hue = ...\n }\n \n update() {\n // flow field\n let n = noise(this.pos.x * 0.003, this.pos.y * 0.003, frameCount * 0.002);\n let angle = n * TWO_PI * 2;\n let flow = p5.Vector.fromAngle(angle).mult(0.2);\n this.vel.add(flow);\n this.vel.mult(0.96); // drag\n this.pos.add(this.vel);\n this.life -= this.decay;\n }\n \n show() {\n let h = (this.hue) % 360;\n let s = map(this.life, 0, 1, 30, 90);\n fill(h, s, 100, this.life * 80);\n noStroke();\n let sz = this.baseSize * this.life;\n circle(this.pos.x, this.pos.y, sz);\n // glow\n fill(h, s - 20, 100, this.life * 20);\n circle(this.pos.x, this.pos.y, sz * 3);\n }\n}\n```\n\nHue mapping: I want slow = blue (~200-220), medium = purple/magenta (~280), fast = orange/red/pink (~320-360/0-30). \n\nActually a nice approach: hueBase = map(smoothSpeed, 0, 50, 210, 350) — from blue through purple to pink/red. Add random offset.\n\nMouse direction inheritance for fast movement makes it feel physical:\n```javascript\nlet mouseVel = createVector(mouseX - pmouseX, mouseY - pmouseY);\nparticle.vel.add(mouseVel.copy().mult(0.3 * random()));\n```\n\nShockwave rings:\n```javascript\nlet rings = [];\n// when smoothSpeed crosses threshold\nif (speed > 40 && random() < 0.3) {\n rings.push({x: mouseX, y: mouseY, r: 0, maxR: 200, life: 1});\n}\n```\n\nConnection lines when calm (slow speed): draw lines between particles close to mouse? That might be expensive with many particles. Could limit particle count. Actually connecting particles within a certain distance using spatial check — with ~300 particles it's 45k checks per frame, which is fine in JS actually. Let me keep particle count moderate (~400 max) and only do connections when speed is low.\n\nActually, let me do connections always but with a distance that shrinks when fast... Hmm, might be visually noisy. Let me do: connections drawn between particles and nearby particles, opacity based on slowness. Or simpler: draw lines from particles toward mouse if within range, when slow — creates a \"tendrils reaching for cursor\" effect. That's cool and cheap.\n\nLet me structure:\n\n```\n- Background fade\n- Compute speed, smoothSpeed\n- Determine emitter position (mouse or auto-pilot)\n- Spawn particles (count based on speed)\n- Spawn bursts + rings on fast movement\n- Update & draw rings (behind particles)\n- Update & draw particles (ADD blend)\n- Draw tendril lines when calm\n- Draw cursor orb (glowing core at cursor)\n- HUD: title, speed meter\n```\n\nCursor orb: a glowing circle at the mouse that grows with speed, with hue matching. Nice focal point.\n\nHUD:\n- Top-left: title \"VELOCITY FIELD\" small letter-spaced text\n- Bottom: speed bar with gradient\n- Show numerical speed\n\nIdle detection: if millis() - lastMoveTime > 2500, auto-pilot. Update lastMoveTime when mouse moves (or in mouseMoved). Use pmouse comparison since mouseMoved doesn't fire always? mouseMoved fires whenever it moves. Fine.\n\nAuto-pilot should also inject some variation in speed — lissajous naturally varies speed. Good.\n\nBackground: I'll fade with very dark blue instead of pure black: fill(230, 60, 4, 18) in HSB. Wait, with rect over everything using BLEND mode, that works.\n\nActually, for the fade, better: fill with alpha. In HSB: fill(230, 80, 5, 15). Let me test values mentally — alpha 15-25 out of 100 (since colorMode HSB 360,100,100,100). Alpha 15-25 gives decent trails.\n\nOne issue: with ADD blend mode for particles and BLEND for background fade, need to switch modes each frame. That's fine.\n\nText rendering: p5 text with fill white low alpha. Use textFont('monospace') or a Google font? Could link a Google Font like \"Space Grotesk\" or \"JetBrains Mono\". Since it renders in a browser, Google Fonts link is fine. Let me add:\n\n```html\n\n```\n\nAnd use textFont('Space Grotesk').\n\nSpeed meter: bottom-left, a bar. Draw background rect, then fill gradient-ish (a few rects). Map smoothSpeed 0..60. Also label \"VELOCITY\".\n\nExtra juice:\n- Chromatic rings at high speed\n- Slight screen shake when speed very high? Could translate randomly by speed-based amount. Might be annoying; keep subtle: translate(random(-s, s) * 0.3...). Actually screen shake with trails gets messy because the fade rect also moves. Skip or apply shake only to particles drawing? Skip shake, keep it clean.\n\nLet me also handle mousePressed: big explosion burst. Nice extra interaction.\n\nTouch support: p5 handles touch as mouse automatically mostly. Add touchStarted/touchMoved returning false to prevent scroll.\n\nLet me now write out the complete code carefully.\n\n```javascript\nlet particles = [];\nlet rings = [];\nlet smoothSpeed = 0;\nlet hueBase = 210;\nlet lastMove = 0;\nlet autoT = 0;\nlet started = false;\n\nconst MAX_PARTICLES = 900;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 100);\n background(230, 70, 3);\n lastMove = millis();\n}\n\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n background(230, 70, 3);\n}\n\nfunction draw() {\n // ---- fade ----\n blendMode(BLEND);\n noStroke();\n fill(230, 70, 3, 18);\n rect(0, 0, width, height);\n\n // ---- speed ----\n let rawSpeed = dist(mouseX, mouseY, pmouseX, pmouseY);\n if (rawSpeed > 0.5) lastMove = millis();\n smoothSpeed = lerp(smoothSpeed, rawSpeed, 0.12);\n\n // hue: calm blue -> purple -> hot pink/orange\n let targetHue;\n let sNorm = constrain(smoothSpeed / 55, 0, 1);\n if (sNorm < 0.5) {\n targetHue = map(sNorm, 0, 0.5, 200, 280);\n } else {\n targetHue = map(sNorm, 0.5, 1, 280, 340);\n }\n hueBase = lerp(hueBase, targetHue, 0.08);\n\n // ---- emitter position (mouse or auto-pilot) ----\n let idle = millis() - lastMove > 2500;\n let ex, ey, eSpeed;\n if (idle) {\n autoT += 0.016;\n let t = autoT;\n ex = width / 2 + sin(t * 0.9) * width * 0.28 + sin(t * 0.37) * width * 0.08;\n ey = height / 2 + sin(t * 1.27 + 1.3) * height * 0.28 + cos(t * 0.53) * height * 0.08;\n // approximate auto speed\n eSpeed = 15 + sin(t * 2.3) * 14; // varies over time\n } else {\n ex = mouseX; ey = mouseY;\n eSpeed = rawSpeed;\n }\n\n let emitSpeed = idle ? abs(eSpeed) : smoothSpeed;\n\n // mouse direction vector for inertia\n let dirX = idle ? cos(autoT * 0.9) : (mouseX - pmouseX);\n let dirY = idle ? sin(autoT * 1.27) : (mouseY - pmouseY);\n\n // ---- spawn ----\n let count = floor(map(emitSpeed, 0, 60, 3, 26, true));\n for (let i = 0; i < count; i++) {\n particles.push(new Particle(ex, ey, emitSpeed, dirX, dirY));\n }\n // burst on fast\n if (rawSpeed > 42) {\n for (let i = 0; i < 15; i++) particles.push(new Particle(ex, ey, 80, dirX, dirY));\n if (random() < 0.4) rings.push(new Ring(ex, ey, hueBase));\n }\n\n if (particles.length > MAX_PARTICLES) {\n particles.splice(0, particles.length - MAX_PARTICLES);\n }\n\n // ---- rings ----\n blendMode(ADD);\n for (let i = rings.length - 1; i >= 0; i--) {\n rings[i].update();\n rings[i].show();\n if (rings[i].dead()) rings.splice(i, 1);\n }\n\n // ---- particles ----\n for (let i = particles.length - 1; i >= 0; i--) {\n let p = particles[i];\n p.update();\n p.show();\n if (p.dead()) particles.splice(i, 1);\n }\n\n // ---- tendrils when calm ----\n let calm = 1 - constrain(smoothSpeed / 30, 0, 1);\n if (calm > 0.05) {\n stroke(hueBase, 60, 100, 18 * calm);\n strokeWeight(1);\n for (let p of particles) {\n let d = dist(p.pos.x, p.pos.y, ex, ey);\n if (d < 140) {\n line(p.pos.x, p.pos.y, ex, ey);\n }\n }\n noStroke();\n }\n\n // ---- cursor orb ----\n drawOrb(ex, ey, emitSpeed);\n\n // ---- HUD ----\n drawHUD(idle);\n}\n```\n\nParticle class:\n\n```javascript\nclass Particle {\n constructor(x, y, spd, dx, dy) {\n this.pos = createVector(x + random(-4, 4), y + random(-4, 4));\n let a = random(TWO_PI);\n let m = random(0.3, 1.6) + spd * 0.08;\n this.vel = p5.Vector.fromAngle(a, m);\n // inherit emitter direction (scaled by speed)\n this.vel.x += dx * random(0.1, 0.4);\n this.vel.y += dy * random(0.1, 0.4);\n this.life = 1;\n this.decay = random(0.006, 0.018);\n this.size = random(1.5, 3.5) + spd * random(0.04, 0.12);\n this.hue = (hueBase + random(-25, 25) + 360) % 360;\n this.sat = random(55, 95);\n this.noiseOff = random(1000);\n }\n update() {\n let n = noise(this.pos.x * 0.0022, this.pos.y * 0.0022, frameCount * 0.0015 + this.noiseOff);\n let ang = n * TWO_PI * 2.5;\n this.vel.x += cos(ang) * 0.22;\n this.vel.y += sin(ang) * 0.22;\n this.vel.mult(0.955);\n this.pos.add(this.vel);\n this.life -= this.decay;\n }\n dead() { return this.life <= 0; }\n show() {\n let a = this.life * this.life;\n let sz = this.size * (0.4 + this.life * 0.6);\n // glow halo\n fill(this.hue, this.sat * 0.6, 100, a * 14);\n circle(this.pos.x, this.pos.y, sz * 4.5);\n // core\n fill(this.hue, this.sat, 100, a * 85);\n circle(this.pos.x, this.pos.y, sz);\n // white hot center for bigger ones\n if (this.size > 5) {\n fill(this.hue, 20, 100, a * 60);\n circle(this.pos.x, this.pos.y, sz * 0.5);\n }\n }\n}\n```\n\nRing class:\n\n```javascript\nclass Ring {\n constructor(x, y, hue) {\n this.x = x; this.y = y;\n this.r = 6;\n this.maxR = random(140, 260);\n this.life = 1;\n this.hue = hue;\n }\n update() {\n this.r = lerp(this.r, this.maxR, 0.08);\n this.life -= 0.03;\n }\n dead() { return this.life <= 0; }\n show() {\n noFill();\n strokeWeight(2.5 * this.life);\n stroke(this.hue, 50, 100, this.life * 70);\n circle(this.x, this.y, this.r * 2);\n strokeWeight(1);\n stroke(this.hue, 20, 100, this.life * 40);\n circle(this.x, this.y, this.r * 2 * 1.15);\n noStroke();\n }\n}\n```\n\nOrb:\n\n```javascript\nfunction drawOrb(x, y, spd) {\n blendMode(ADD);\n let r = 6 + spd * 0.35;\n noStroke();\n fill(hueBase, 70, 100, 10);\n circle(x, y, r * 6);\n fill(hueBase, 60, 100, 25);\n circle(x, y, r * 2.6);\n fill(hueBase, 25, 100, 90);\n circle(x, y, r);\n fill(0, 0, 100, 90);\n circle(x, y, r * 0.45);\n}\n```\n\nHUD:\n\n```javascript\nfunction drawHUD(idle) {\n blendMode(BLEND);\n // title\n fill(0, 0, 100, 55);\n textFont('Space Grotesk');\n textSize(13);\n textAlign(LEFT, TOP);\n let title = 'V E L O C I T Y F I E L D';\n text(title, 24, 20);\n fill(0, 0, 100, 30);\n textSize(10);\n text('move slow for calm · move fast for chaos · click to burst', 24, 42);\n\n // speed meter bottom-left\n let bx = 24, by = height - 44, bw = 180, bh = 5;\n let sNorm = constrain(smoothSpeed / 55, 0, 1);\n noStroke();\n fill(0, 0, 100, 12);\n rect(bx, by, bw, bh, 3);\n // gradient fill\n fill(hueBase, 80, 100, 80);\n rect(bx, by, bw * sNorm, bh, 3);\n fill(0, 0, 100, 40);\n textSize(9);\n textAlign(LEFT, BOTTOM);\n text('VELOCITY ' + nf(smoothSpeed, 1, 1), bx, by - 6);\n\n if (idle) {\n fill(0, 0, 100, 25 + sin(frameCount * 0.05) * 10);\n textAlign(RIGHT, BOTTOM);\n textSize(10);\n text('AUTO-PILOT — move your mouse', width - 24, height - 24);\n }\n}\n```\n\nExplosion on click:\n\n```javascript\nfunction mousePressed() {\n for (let i = 0; i < 90; i++) {\n particles.push(new Particle(mouseX, mouseY, 90, 0, 0));\n }\n rings.push(new Ring(mouseX, mouseY, hueBase));\n rings.push(new Ring(mouseX, mouseY, (hueBase + 40) % 360));\n lastMove = millis();\n}\n```\n\nHmm wait, when clicking, Particle constructor with spd 90 gives big particles with high initial velocity. Good.\n\ntouchStarted:\n```javascript\nfunction touchStarted() { lastMove = millis(); }\n```\nActually returning false to prevent default. But careful: returning false in touchStarted prevents mousePressed emulation maybe. Keep it simple:\n\n```javascript\nfunction touchMoved() { lastMove = millis(); return false; }\n```\n\nAlso need `document` title and styling. Let me also add a subtle scanline or vignette? Vignette via CSS radial-gradient overlay div — but that would sit above canvas... pointer-events: none. That works and looks classy:\n\n```css\n#vignette {\n position: fixed; inset: 0;\n pointer-events: none;\n background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);\n}\n```\n\nNice touch.\n\nOne concern: `map(emitSpeed, 0, 60, 3, 26, true)` — p5 map's 5th param clamp exists? Yes, `map(value, start1, stop1, start2, stop2, [withinBounds])` — clamp supported in recent p5. Good.\n\nnoise with frameCount*0.0015 as z — fine.\n\nPerformance: MAX 900 particles with additive glow circles — each particle draws 2-3 circles. ~2000 circles per frame. That's okay for most machines; maybe reduce to 700 to be safe. Canvas is windowWidth/Height. Fine.\n\nTendrils loop over up to 900 particles drawing lines — fine.\n\nOne issue with auto-pilot: emitSpeed uses abs(eSpeed) but eSpeed = 15 + sin*14 → range 1..29, always positive. Fine, no need for abs. But I want the auto-pilot to sometimes go \"fast\" so users see hot colors without moving mouse. Range up to 29 gives purple hues. Maybe make it 8 + max(0, sin(t*0.5))^3 * 45 so it periodically surges into hot range. Let me do:\n\n```javascript\nlet surge = pow(max(0, sin(t * 0.45)), 3); // 0..1 periodic\neSpeed = 6 + surge * 50;\n```\n\nThat gives calm drifting with periodic bursts. \n\nAlso for auto-pilot dir vector — derivative approximation. Simpler: track previous auto position:\n\n```javascript\nlet prevAuto = null;\nif (idle) {\n ...\n if (prevAuto) { dirX = ex - prevAuto.x; dirY = ey - prevAuto.y; }\n prevAuto = {x: ex, y: ey};\n} else {\n prevAuto = null;\n}\n```\n\nGood — that naturally handles direction and I can even compute eSpeed from actual movement: `eSpeed = dist(ex, ey, prevAuto.x, prevAuto.y)` scaled... at 60fps the lissajous moves maybe 3-10px/frame. Multiply by 3 to make it lively? Let me combine: use actual delta * 2.5 + surge bonus. Actually simpler to keep the surge formula — deterministic and shows off the full color range. I'll use actual delta for direction only.\n\nHmm, but in auto-pilot, smoothSpeed still lerps toward rawSpeed (0 since mouse still), so the HUD meter and hue would go calm while particles use emitSpeed... Inconsistent. Better: make smoothSpeed lerp toward the effective speed (mouse or auto). Let me restructure:\n\n```javascript\nlet targetSpeed;\nif (idle) { compute ex, ey and autoSpeed; targetSpeed = autoSpeed; }\nelse { targetSpeed = rawSpeed; }\nsmoothSpeed = lerp(smoothSpeed, targetSpeed, 0.12);\n```\n\nThen everything downstream uses smoothSpeed, hue follows it, HUD shows it. And for burst detection use rawSpeed only (real mouse fast flicks) plus in idle maybe when surge high, spawn rings occasionally. I'll add: if idle && smoothSpeed > 45 && random() < 0.1 → ring.\n\nClean. Let me also define `dirX/dirY`: for idle use delta of auto positions; for mouse use mouseX - pmouseX.\n\nEdge: on first frame pmouseX = 0 maybe, giving a big rawSpeed flash. Initialize by checking frameCount > 1 or just clamp. Actually p5 sets pmouseX to mouseX at start? pmouseX initial is 0 I think. First frame rawSpeed could be dist from (0,0) — if user's mouse is at corner it's small; if center, big flash once. To avoid: `if (frameCount < 5) rawSpeed = 0;` Simple fix.\n\nAlso on window resize, background reset.\n\nText with Space Grotesk — p5 textFont with a string falls back if not loaded yet; fine.\n\nLet me also make sure ADD blend background fade: I set blendMode(BLEND) before fade rect, then ADD for particles, then BLEND for HUD. Tendrils under ADD with low alpha look nice glowing. Orb under ADD. HUD last in BLEND.\n\nLet me reconsider the hue mapping for more wow. Palette journey:\n- calm: cyan/blue (190-210)\n- medium: violet/magenta (270-300)\n- fast: hot pink/orange (320-350)... \n\nActually hot = orange/yellow (20-45) reads as \"fast/hot\" more than pink. Journey: 195 (cyan) → 265 (purple) → 330 (pink) → 25 (orange, wrapping through 360). Hue interpolation across the 360 wrap needs care: I can just let hue go above 360 and mod in fill — HSB with hue > 360 may not wrap automatically. In p5, hue values outside range get wrapped? p5 does wrap hue I believe (it mods by max). Not 100% sure; safer to mod manually. My Particle already does `(hueBase + offset + 360) % 360`.\n\nSo: sNorm 0..1 → hue: piecewise:\n- 0.0–0.33: 190 → 260\n- 0.33–0.66: 260 → 330\n- 0.66–1.0: 330 → 380 (mod → 20, orange)\n\nNice full journey. Write helper:\n\n```javascript\nfunction speedHue(n) {\n if (n < 0.33) return map(n, 0, 0.33, 190, 260);\n if (n < 0.66) return map(n, 0.33, 0.66, 260, 330);\n return map(n, 0.66, 1, 330, 380);\n}\n```\n\nAnd `hueBase = lerp(hueBase, speedHue(sNorm), 0.07)` — lerp across wrap boundary could sweep weirdly (e.g., from 350 down to 190 goes backwards through all colors) — that's actually fine/colorful, acceptable.\n\nAlso white-hot at extreme: when sNorm > 0.85, reduce particle saturation: sat = lerp(sat, 10, ...) — do it in Particle via stored spd: `this.sat = map(spd, 0, 70, 90, 20, true)` — fast particles become white-hot. \n\nParticle size with spd up to 90 (click): size = random(1.5,3.5) + 90*0.12 ≈ 12-14. Fine.\n\nDecay slower for big? Keep random.\n\nNow the initial \"start\" overlay: some p5 sketches need a click to start (audio), but we have no audio. Just start immediately. Add a brief intro text that fades: \"move your cursor\" big center text fading out over first few seconds:\n\n```javascript\nlet introAlpha = 100;\n// in HUD:\nif (millis() < 6000) {\n let a = map(millis(), 3500, 6000, 70, 0, true);\n fill(0, 0, 100, a);\n textAlign(CENTER, CENTER);\n textSize(min(width * 0.05, 42));\n text('M O V E Y O U R C U R S O R', width/2, height/2);\n textSize(13);\n fill(0,0,100, a*0.6);\n text('speed changes everything', width/2, height/2 + 44);\n}\n```\n\nGood.\n\nAlso cursor: hide default cursor over canvas for immersion: `cursor: none` in CSS on canvas/body, since we draw our own orb. Yes — body { cursor: none; }.\n\nLet me finalize all numbers and write the complete file. Also `frameRate(60)` optional.\n\nDouble-check p5 `map` with clamp param — yes, 5th arg withinBounds. `nf()` for number formatting.\n\nFor `textFont('Space Grotesk')` — call in setup after font loads... fonts load async; calling textFont with family name string makes p5 use CSS font resolution at draw time? p5 textFont with a string sets the font family; it resolves at render, so once the webfont loads it applies. Should be fine. Add fallback: textFont('Space Grotesk, monospace').\n\nPotential issue: `pow(max(0, sin(t*0.45)), 3)` — sin negative → max 0 → 0. Good.\n\nRing stroke under ADD: stroke with alpha — fine.\n\nTendril stroke color uses hueBase — could exceed 360 → mod: `stroke(hueBase % 360, 60, 100, ...)`. I'll mod everywhere hueBase is used directly (orb, tendrils, HUD). Or simpler: keep hueBase in 0..380 and mod at usage: define `let hb = hueBase % 360;` at top of draw and use hb everywhere. \n\nParticles capture hue at spawn with mod — already handled.\n\nHUD meter fill hue uses hb.\n\nOne more flourish: star field background? The fade covers it. Skip.\n\nAlso add slight attraction/gravity? The flow field is enough.\n\nLet me write final code now, being careful with syntax.\n\nAlso include meta viewport for mobile.\n\nFull file:\n\n```html\n\n\n\n\n\nVelocity Field — Interactive p5.js\n\n\n\n\n\n\n

Create a p5.js animation that is a cool interactive thing based on my mouse cursor and a nice visualization thing, if mouse move faster it should change it!