NEBULA // DRIVE

{"id":"gen-1785162899-zkYOXWyF5teBPU8CegyO","choices":[{"finish_reason":"stop","index":0,"logprobs":null,"message":{"content":"Here's a velocity-reactive particle universe — **NEBULA//DRIVE**. Everything responds to your cursor speed: drift slowly and you get a calm cyan flow field; whip the mouse around and it ignites into magenta overdrive with shockwaves, screen shake, warp-streaking stars, and particle storms. Bonus: hold click to charge a gravity well, release to detonate it.\n\n```html\n\n\n\n\n\nNEBULA // DRIVE\n\n\n\n\n\n\n\n```\n\n**Things to try:**\n- **Slow circles** — the flow field gently orbits your cursor in cool cyan\n- **Fast flicks** — hue snaps toward magenta, shockwaves fire, stars warp-streak, and the screen starts shaking in OVERDRIVE\n- **Hold click ~2s, then release** — everything collapses into a gravity well, then detonates in a full-screen blast\n- Watch the **velocity gauge** (bottom-left) drive every parameter of the system in real time\n\nIt also self-tunes particle counts if your machine struggles, so it should stay smooth everywhere.","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 nice visualization\n3. Changes based on mouse speed (faster = more dramatic)\n4. Should be overboard and impressive\n\nLet me create something truly spectacular. Ideas:\n- Particle system with trails that respond to mouse velocity\n- Flow field that gets warped by mouse movement\n- Audio-reactive style visuals (without audio, but simulated)\n- Multiple layers of effects: particles, trails, ripples, glow\n- Speed-based color shifts, size changes, explosions\n\nLet me design a \"velocity-reactive particle universe\":\n1. Mouse position tracked with velocity calculation\n2. Particle emitters at mouse position - more particles when moving fast\n3. Speed affects:\n - Hue/color palette shifts\n - Particle count/size\n - Trail length\n - Ripple/shockwave effects\n - Background warp\n - Bloom intensity (simulated with blend modes)\n4. Additional flair:\n - Flow field particles that swirl around cursor\n - Shockwaves on fast movements\n - \"Gravity wells\" \n - Starfield background with parallax\n - Smooth lerped \"ghost\" cursors trailing behind\n - Color scheme that cycles through palettes\n - Screen shake on extreme speeds?\n - Connecting lines between nearby particles (constellation effect)\n\nLet me write a comprehensive p5.js sketch:\n\n```javascript\n// Features:\n// 1. Velocity-smoothed speed tracking\n// 2. Particle system with additive blending\n// 3. Shockwave rings when speed crosses thresholds\n// 4. Flow field background particles\n// 5. Ribbon/trail following cursor\n// 6. Color palette that shifts with speed\n// 7. Glow effects via layered drawing\n// 8. Speed meter HUD\n// 9. Screen warp/vignette\n// 10. Constellation connections\n```\n\nLet me code this carefully:\n\n```javascript\nlet particles = [];\nlet shockwaves = [];\nlet ribbons = [];\nlet flowParticles = [];\nlet stars = [];\n\nlet mouseTrail = [];\nlet smoothSpeed = 0;\nlet prevMouse;\n\nlet hueBase = 180;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n prevMouse = createVector(mouseX, mouseY);\n \n // starfield\n for (let i = 0; i < 200; i++) {\n stars.push({\n x: random(width),\n y: random(height),\n z: random(0.2, 1),\n size: random(1, 3)\n });\n }\n \n // ambient flow field particles\n for (let i = 0; i < 300; i++) {\n flowParticles.push(new FlowParticle());\n }\n}\n\nfunction draw() {\n // trail effect with alpha\n background(230, 60, 8, 0.25); // hmm, for trails use semi-transparent bg\n \n // calculate mouse velocity\n let m = createVector(mouseX, mouseY);\n let vel = p5.Vector.sub(m, prevMouse);\n let speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.15);\n let speedNorm = constrain(smoothSpeed / 50, 0, 1);\n \n // hue shifts with speed\n let targetHue = map(speedNorm, 0, 1, 190, 330); // cool blue -> hot magenta\n hueBase = lerp(hueBase, targetHue, 0.1);\n \n ...\n}\n```\n\nKey effects to make it \"overboard\":\n\n1. **Particle burst emitter** - emits particles from cursor, count proportional to speed. Particles have physics: drag, turbulence, glow.\n\n2. **Shockwaves** - when speed exceeds threshold, spawn expanding rings.\n\n3. **Velocity ribbons** - a ribbon mesh that follows cursor, width based on speed, gradient color.\n\n4. **Flow field** - Perlin noise field, ambient particles drift through it, and mouse creates a vortex force that bends them.\n\n5. **Vortex/gravity** - mouse acts as attractor or repulsor, stronger when moving fast. Actually, fast movement = repulsor (like stirring), slow = gentle attractor? Or swirl force perpendicular to velocity - creates nice stirring effect.\n\n6. **Constellation lines** - connect nearby particles with faint lines.\n\n7. **Starfield parallax** - background stars that shift slightly based on mouse movement (motion parallax / warp streaks when moving fast).\n\n8. **HUD** - speed gauge, particle count, maybe a circular speedometer.\n\n9. **Bloom** - use drawingContext shadowBlur sparingly, or use blendMode(ADD) with layered strokes. ADD blending with low alpha works great for glow.\n\n10. **Ghost cursors** - echo circles that follow with delay.\n\n11. **Screen shake** at extreme speeds - subtle translate.\n\n12. **Chromatic vignette** - radial gradient overlay.\n\nLet me also add a \"pulse\" ring that emanates from cursor continuously, size based on speed.\n\nFor performance: keep particle counts reasonable (cap ~1500), use simple shapes (points/lines/ellipses), avoid shadowBlur per particle (too slow) — instead use ADD blending with 2-3 layered ellipses or strokes.\n\nActually for glow: draw each particle twice — once large with low alpha, once small bright core. With blendMode(ADD) it looks like bloom.\n\nLet me structure:\n\n```javascript\nclass Particle {\n constructor(x, y, vel, hue, size, life) {...}\n update() {\n // drag, turbulence, vortex from mouse\n }\n show() {\n // glow layer + core\n }\n}\n```\n\nVortex force: given mouse position and velocity, particles near the cursor get pushed along the velocity direction plus perpendicular swirl. This makes \"stirring\" the particle field feel amazing.\n\nFlow field: `noise(x * s, y * s, t)` angle, ambient particles follow it, wrap around edges. Their hue slightly offset from base. They leave trails due to semi-transparent background.\n\nWait — conflict: semi-transparent background for trails means everything trails including bursts. That's actually fine and looks great. Use blendMode(BLEND) for background fade rect, then blendMode(ADD) for drawing.\n\nOrder in draw():\n1. blendMode(BLEND); noStroke(); fill(bgHue, 80, 10, 0.22); rect full screen. (fade trails)\n2. translate for screen shake.\n3. draw starfield (with parallax offset).\n4. blendMode(ADD);\n5. update/draw flow particles (lines from prev to current position).\n6. update/draw burst particles.\n7. draw constellation links (only among burst particles, limit checks — maybe use spatial hash or just check a subset).\n8. draw shockwaves.\n9. draw cursor aura: radial glow rings, rotating arc segments, pulsing core.\n10. draw ribbon trail along mouse history.\n11. HUD: speedometer arc, text.\n12. vignette overlay (BLEND mode).\n\nConstellation check: O(n²) with n=400 is 160k checks per frame — too much. Limit to every other frame and sample particles, or only check first ~150 particles. Or skip constellation and do something cheaper: connect particles emitted at similar times? Simpler: connect particles to their \"siblings\" spawned in same burst — creates web-like structures. Actually simpler constellation: for each particle, check next few in array (like 6 neighbors) — creates decent line web cheaply. Hmm, array order isn't spatial though.\n\nAlternative: grid-based neighbor lookup. Let me just do a simple spatial hash for burst particles; it's not that hard:\n\n```javascript\nlet grid = {};\nlet cellSize = 80;\nfor (p of particles) {\n let key = floor(p.pos.x/cellSize) + ',' + floor(p.pos.y/cellSize);\n (grid[key] ||= []).push(p);\n}\n// then for each particle check its cell + neighbors, draw line if dist < 60\n```\n\nThat works and is fast enough.\n\nRibbon: store mouse history points with speed; draw as triangle strip with width mapped from speed, hue gradient. Drawing triangle strips in p5: use beginShape(TRIANGLE_STRIP).\n\nCursor aura design:\n- Central glowing core (ellipse with layered alpha)\n- Rotating dashed arc segments (2-3 rings rotating different directions), radius pulsing with speed\n- Crosshair ticks\n- When speedNorm high: extra spiky rays emanating\n\nHUD:\n- Bottom-left: \"VELOCITY\" label + arc gauge + numeric readout + bar\n- Maybe mode text: when speedNorm > 0.75, \"OVERDRIVE\" with flashing color\n\nAlso add: mouse pressed = attract all particles toward cursor (gravity well), releasing creates explosion. That's a nice extra interaction! Click & hold to charge, release to detonate — pushing all particles outward with force based on charge time. That'll impress.\n\nLet me also add:\n- Subtle grid or nebula background? The stars cover it.\n- Idle behavior: when mouse hasn't moved, gentle ambient animation continues (flow particles, slow emitter drip).\n\nHandle first frames where mouseX/mouseY are 0: initialize prevMouse to center.\n\nWindow resize: resizeCanvas, keep stuff.\n\nLet me now write the whole thing carefully.\n\n```javascript\n// ============================================\n// NEBULA DRIVE — velocity-reactive particle universe\n// Move slow: calm drift. Move fast: overdrive.\n// Hold click: gravity well. Release: detonate.\n// ============================================\n\nlet burstParticles = [];\nlet flowParticles = [];\nlet shockwaves = [];\nlet stars = [];\nlet trail = [];\n\nlet prevMouse;\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet time = 0;\n\nlet charging = false;\nlet chargeStart = 0;\n\nconst MAX_PARTICLES = 900;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n prevMouse = createVector(width / 2, height / 2);\n \n for (let i = 0; i < 220; i++) {\n stars.push({\n x: random(width), y: random(height),\n z: random(0.15, 1),\n tw: random(TWO_PI)\n });\n }\n for (let i = 0; i < 260; i++) flowParticles.push(new FlowParticle());\n}\n\nfunction draw() {\n time += 0.016;\n \n // ---- velocity tracking ----\n let m = createVector(mouseX, mouseY);\n let vel = p5.Vector.sub(m, prevMouse);\n let speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.12);\n let sn = constrain(smoothSpeed / 60, 0, 1); // speed normal\n let overdrive = sn > 0.72;\n \n let targetHue = (200 + sn * 160) % 360;\n hueBase = lerpHue(hueBase, targetHue, 0.06);\n \n // ---- trail fade ----\n blendMode(BLEND);\n noStroke();\n fill(235, 70, 6, map(sn, 0, 1, 0.28, 0.16)); // faster = longer trails? lower alpha = longer trails\n rect(0, 0, width, height);\n \n // screen shake at overdrive\n if (overdrive) {\n translate(random(-1,1) * sn * 3, random(-1,1) * sn * 3);\n }\n \n // ---- stars with parallax ----\n drawStars(vel, sn);\n \n blendMode(ADD);\n \n // ---- flow field particles with mouse vortex ----\n updateFlow(m, vel, sn);\n \n // ---- emitters ----\n let emitCount = floor(map(sn, 0, 1, 1, 14));\n for (let i = 0; i < emitCount; i++) {\n spawnBurst(m, vel, sn);\n }\n \n // cap particles\n while (burstParticles.length > MAX_PARTICLES) burstParticles.shift();\n \n // ---- update & draw burst particles ----\n ...\n \n // ---- constellation ----\n drawConstellation();\n \n // ---- shockwaves ----\n if (smoothSpeed > 55 && frameCount % 4 === 0) {\n shockwaves.push({ x: m.x, y: m.y, r: 10, max: 120 + sn * 220, hue: hueBase });\n }\n updateShockwaves();\n \n // ---- cursor aura ----\n drawAura(m, vel, sn, overdrive);\n \n // ---- ribbon ----\n updateTrail(m, sn);\n drawRibbon(sn);\n \n // ---- charge / detonate ----\n if (charging) drawCharge(m);\n \n // ---- HUD ----\n blendMode(BLEND);\n drawHUD(sn, overdrive);\n \n prevMouse = m.copy();\n}\n```\n\nWait — the trail points and ribbon: store history of mouse positions with ages. Draw as triangle strip with hue gradient and alpha fade. \n\nlerpHue helper: handle wraparound.\n\n```javascript\nfunction lerpHue(a, b, t) {\n let d = ((b - a + 540) % 360) - 180;\n return (a + d * t + 360) % 360;\n}\n```\n\nFlowParticle:\n\n```javascript\nclass FlowParticle {\n constructor() { this.reset(); }\n reset() {\n this.pos = createVector(random(width), random(height));\n this.prev = this.pos.copy();\n this.vel = createVector();\n this.hueOff = random(-30, 30);\n this.speed = random(0.5, 1.6);\n this.life = random(100, 400);\n }\n update(m, vel, sn) {\n this.prev = this.pos.copy();\n let a = noise(this.pos.x * 0.0022, this.pos.y * 0.0022, time * 0.15) * TWO_PI * 2;\n let f = p5.Vector.fromAngle(a).mult(this.speed);\n \n // mouse vortex\n let d = p5.Vector.sub(this.pos, m);\n let dist = d.mag();\n if (dist < 260 && dist > 1) {\n d.normalize();\n // swirl: perpendicular\n let swirl = createVector(-d.y, d.x).mult(map(sn,0,1, 0.6, 6) * (1 - dist/260));\n let push = d.copy().mult(sn * 2.5 * (1 - dist/260));\n f.add(swirl).add(push);\n }\n \n if (charging) {\n let dd = p5.Vector.sub(m, this.pos);\n let l = max(dd.mag(), 20);\n f.add(dd.normalize().mult(120 / l));\n }\n \n this.vel.lerp(f, 0.08);\n this.pos.add(this.vel);\n this.life--;\n \n if (this.life < 0 || this.pos.x < -20 || this.pos.x > width+20 || this.pos.y < -20 || this.pos.y > height+20) {\n this.reset();\n this.prev = this.pos.copy();\n }\n }\n show() {\n stroke((hueBase + this.hueOff + 360) % 360, 60, 90, 0.5);\n strokeWeight(1.2);\n line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);\n }\n}\n```\n\nBurst particle:\n\n```javascript\nfunction spawnBurst(m, vel, sn) {\n let baseAng = vel.heading();\n let spread = random(-1, 1) * map(sn, 0, 1, PI, 0.5);\n // spray backwards from movement direction + some randomness\n let ang = baseAng + PI + random(-0.6, 0.6);\n if (vel.mag() < 1) ang = random(TWO_PI);\n let sp = random(1, 3 + sn * 10);\n burstParticles.push({\n pos: m.copy().add(p5.Vector.random2D().mult(random(4))),\n vel: p5.Vector.fromAngle(ang).mult(sp).add(p5.Vector.mult(vel, 0.35)),\n size: random(2, 4 + sn * 8),\n hue: (hueBase + random(-25, 25) + 360) % 360,\n life: 1,\n decay: random(0.008, 0.02 + sn * 0.02),\n spin: random(-0.1, 0.1)\n });\n}\n```\n\nUpdate burst particles: drag, slight turbulence, vortex pull, fade. Draw: glow (big, low alpha) + core (small, bright). Also streak: line from pos-vel to pos for motion blur feel. Streaks look great. Maybe draw as line with glow: two lines — thick low alpha, thin bright.\n\nActually to save perf, draw each burst particle as a streak line (from pos - vel*2 to pos) with 2 passes. Good.\n\nConstellation: spatial hash on burstParticles, draw lines between close ones, alpha by distance. Do it every frame but only for particles with life > 0.3, and cap lines.\n\nShockwave: expanding ring, 2-3 concentric ellipses, alpha fading, strokeWeight decreasing. Also spawn a few debris particles on shockwave spawn? Fine as is.\n\nAura (cursor): \n- big soft glow circle (radial: draw concentric circles decreasing alpha) — cheaper: 4-5 ellipses.\n- rotating arcs: arc() with start/stop, dashed appearance via multiple small arcs.\n- inner crosshair ticks rotating opposite.\n- rays when overdrive: N lines emanating outward with random jitter.\n- text? no.\n\nAlso draw the smoothSpeed as pulsing aura radius: auraR = 30 + sn * 70 + sin(time*6)*4.\n\nCharge (mouse held): \n- charging = true on mousePressed, record chargeStart.\n- While charging: particles pulled toward cursor (both flow and burst), draw growing energy ball with flickering, converge rings.\n- On release: detonate — force = f(chargeTime), push everything radially, spawn big shockwave + burst of 100 particles, flash.\n\nDetonate:\n\n```javascript\nfunction detonate(m, power) {\n shockwaves.push({x:m.x, y:m.y, r: 5, max: 300 + power*400, hue: hueBase, thick: true});\n for (p of burstParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 10);\n p.vel.add(d.normalize().mult(power * 500 / l));\n }\n for (p of flowParticles) { similar }\n for (let i = 0; i < 60 + power*80; i++) spawn radial burst particle\n}\n```\n\nHUD design:\n- bottom left panel: \"VELOCITY\" text, bar with gradient, percentage.\n- circular gauge around... maybe arc in corner.\n- \"OVERDRIVE\" flashing text when overdrive.\n- instructions center-top fading in at start: \"move slow — drift · move fast — ignite · hold click — collapse · release — detonate\", fade out after first interaction or after 8 seconds.\n\nFont: use default sans, textFont('monospace') for techy feel? Use 'Courier New' monospace. Or just default. I'll style: small caps letter spacing (can't easily do letter-spacing in p5; just use text with spaces like \"V E L O C I T Y\").\n\nVignette: radial gradient via drawingContext at the end (BLEND mode):\n\n```javascript\nlet g = drawingContext.createRadialGradient(cx, cy, min(width,height)*0.3, cx, cy, max(width,height)*0.75);\ng.addColorStop(0, 'rgba(0,0,0,0)');\ng.addColorStop(1, 'rgba(0,0,0,0.45)');\ndrawingContext.fillStyle = g;\ndrawingContext.fillRect(0,0,width,height);\n```\n\nThat's fine perf-wise.\n\nAlso, full HTML page styling: black background, no margins, hide cursor (custom cursor drawn in canvas — yes, hide system cursor for immersion: `cursor: none` in CSS and draw our own aura). p5 has `noCursor()`. But on HUD interactions... no buttons, fine. Use noCursor() and draw everything.\n\nEdge: touch devices — mouseX/mouseY work with touch in p5. Fine.\n\nPerformance considerations:\n- flowParticles 260 lines + glow? Just single line each, alpha 0.5 — fine.\n- burst up to 900, two stroke passes = 1800 line draws — should be OK on desktop. Maybe reduce to glow pass only every other... Let's keep MAX 800 and two passes; modern machines handle it. Could also scale: if frameRate drops below 45, reduce emission. Add simple adaptive quality: track avg frameRate, scale emitCount multiplier. Nice touch, include it.\n\nConstellation with spatial hash over 800 particles: each particle checks 9 cells... total distance checks maybe ~5-10k. Fine. Cap total lines drawn at 300.\n\nLet me write the final code cleanly, then wrap in HTML with p5 CDN.\n\nAlso the intro hint text and a title \"N E B U L A // D R I V E\" top-left? Keep subtle.\n\nColor approach: hueBase cycles 200 (cyan/blue) → 360/0 (magenta/red) at top speed. Overdrive: white-hot cores.\n\nRibbon: store last ~40 mouse points with timestamps. Draw triangle strip:\nfor each point i, compute direction to next, perpendicular normal, width w_i = map based on age & speed stored. Left/right vertices. fill hue gradient. With ADD blending, ribbon glows. Also draw a bright center line through points (polyline) for the \"energy blade\" look.\n\nActually a really nice effect: the ribbon width proportional to speed at that point → fast movement = wide blade, slow = thin. Looks like light-saber trail.\n\nImplementation detail: to draw gradient triangle strip in p5, set fill per vertex — p5 supports fill() between vertex() calls with beginShape(TRIANGLE_STRIP)? In WebGL yes; in 2D canvas, per-vertex fill isn't supported — the shape uses single fill. Hmm. So for 2D renderer, draw ribbon as sequence of quads, each quad filled with interpolated hue/alpha. That works: for each segment, draw a quad (two tris or just quad()) with fill set per segment. ADD blending, low alpha — looks good.\n\nLet me write ribbon:\n\n```javascript\nfunction drawRibbon() {\n if (trail.length < 2) return;\n noStroke();\n for (let i = 0; i < trail.length - 1; i++) {\n let p0 = trail[i], p1 = trail[i+1];\n let t = i / trail.length; // 0 oldest -> 1 newest? depends on push order\n let dir = p5.Vector.sub(p1.p, p0.p);\n if (dir.mag() < 0.1) continue;\n dir.normalize();\n let n = createVector(-dir.y, dir.x);\n let w0 = p0.w, w1 = p1.w;\n let hue = (hueBase + t * 40) % 360;\n fill(hue, 80, 100, 0.05 + t * 0.1);\n quad(\n p0.p.x + n.x*w0, p0.p.y + n.y*w0,\n p0.p.x - n.x*w0, p0.p.y - n.y*w0,\n p1.p.x - n.x*w1, p1.p.y - n.y*w1,\n p1.p.x + n.x*w1, p1.p.y + n.y*w1\n );\n }\n}\n```\n\nStore trail as newest at end; age out points older than 500ms or fixed count 45. w = (2 + snAtPoint * 14) * fadeByIndex.\n\nHmm wait: p0.w where older points should taper to 0 at the oldest end — multiply by t (i/len) so oldest is thin.\n\nAlso add center bright polyline:\n\n```javascript\nstroke(hue, 60, 100, 0.6); strokeWeight(2); // segments\n```\n\nDraw segment lines with per-segment stroke. OK.\n\nMouse vortex applied to burst particles too (stirring). Yes — apply same swirl, scaled.\n\nAdaptive quality:\n\n```javascript\nlet quality = 1;\nif (frameCount % 60 === 0) {\n let fr = frameRate();\n if (fr < 45 && quality > 0.4) quality -= 0.1;\n else if (fr > 55 && quality < 1) quality += 0.05;\n}\nemitCount = floor(emitCount * quality);\n```\n\nAlso cap flowParticles count by quality — skip drawing some.\n\nIntro overlay: draw text with alpha that fades after 6 seconds or after speed first exceeds threshold. Track `interacted` flag.\n\nLet me also make hue drift slowly over time even at rest for ambient color life: hueBase target adds sin(time*0.1)*20.\n\nDetonation flash: white rect with alpha fading quickly (ADD mode, alpha ~0.5 → decays).\n\nShockwave class:\n\n```javascript\nfunction updateShockwaves() {\n for (let i = shockwaves.length-1; i >= 0; i--) {\n let s = shockwaves[i];\n s.r += (s.max - s.r) * 0.08 + 2;\n let t = s.r / s.max;\n let a = (1 - t);\n noFill();\n for (let k = 0; k < 3; k++) {\n stroke(s.hue, 70, 100, a * (0.5 - k*0.12));\n strokeWeight((s.thick? 8:4) * (1-t) + 1);\n ellipse(s.x, s.y, s.r*2 - k*14);\n }\n if (t >= 1) shockwaves.splice(i,1);\n }\n}\n```\n\nAura drawing:\n\n```javascript\nfunction drawAura(m, vel, sn, overdrive) {\n push();\n translate(m.x, m.y);\n let pulse = 1 + sin(time * 5) * 0.06;\n let R = (34 + sn * 80) * pulse;\n \n // soft glow\n noStroke();\n for (let i = 5; i > 0; i--) {\n fill(hueBase, 80, 100, 0.03 + sn*0.015);\n ellipse(0, 0, R * 2.4 * i / 5 + 20);\n }\n \n // rotating arcs\n noFill();\n for (let ring = 0; ring < 3; ring++) {\n let rr = R * (0.7 + ring * 0.35);\n let dirRot = time * (ring % 2 === 0 ? 1 : -1) * (1 + sn * 3);\n let segs = 3 + ring;\n strokeWeight(1.5 + sn * 2.5);\n for (let sgt = 0; sgt < segs; sgt++) {\n let a0 = dirRot + sgt * TWO_PI / segs;\n stroke((hueBase + ring * 20) % 360, 70, 100, 0.55);\n arc(0, 0, rr*2, rr*2, a0, a0 + TWO_PI/segs * 0.55);\n }\n }\n \n // ticks\n ...\n \n // overdrive rays\n if (overdrive) {\n let n = 14;\n for (let i = 0; i < n; i++) {\n let a = i * TWO_PI/n + time*2;\n let len = R * 1.2 + random(20, 60) * sn;\n stroke((hueBase + 40)%360, 60, 100, random(0.2, 0.7));\n strokeWeight(random(1, 3));\n line(cos(a)*R*0.8, sin(a)*R*0.8, cos(a)*(R*0.8+len), sin(a)*(R*0.8+len));\n }\n }\n \n // core\n noStroke();\n fill((hueBase+180)%360, 40, 100, 0.9); // contrasting core? or white\n ellipse(0,0, 6 + sn*10);\n fill(0, 0, 100, 0.9);\n ellipse(0,0, 3 + sn*5);\n pop();\n}\n```\n\nCore white-hot looks good.\n\nCharge effect drawing:\n\n```javascript\nfunction drawCharge(m) {\n let ct = (millis() - chargeStart) / 1000;\n let power = constrain(ct / 2.5, 0, 1);\n push();\n translate(m.x, m.y);\n // converging rings\n for (let i = 0; i < 4; i++) {\n let rr = (200 * (1 - power)) * ((time*2 + i*0.25) % 1);\n stroke(0,0,100, 0.3*(1-((time*2+i*0.25)%1)));\n noFill();\n ellipse(0,0, rr*2);\n }\n // jittery energy ball\n noStroke();\n let br = 10 + power * 50 + random(-3,3);\n fill(hueBase, 60, 100, 0.35);\n ellipse(0,0, br*2.4);\n fill(0,0,100, 0.7 + power*0.3);\n ellipse(0,0, br);\n // sparks\n for (let i=0;i<6*power+2;i++){\n let a = random(TWO_PI);\n let rr = br + random(60*(1-power)+10);\n stroke(0,0,100,0.6);\n line(cos(a)*rr, sin(a)*rr, cos(a)*br*0.5, sin(a)*br*0.5);\n }\n pop();\n}\n```\n\nDetonate on release:\n\n```javascript\nfunction mouseReleased() {\n if (!charging) return;\n charging = false;\n let ct = (millis() - chargeStart)/1000;\n let power = constrain(ct/2.5, 0.15, 1);\n let m = createVector(mouseX, mouseY);\n shockwaves.push({x:m.x,y:m.y,r:8,max:250+power*500,hue:hueBase,thick:true});\n flash = 0.35 + power*0.4;\n for (let p of burstParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 12);\n p.vel.add(d.mult((6 + power*26) * 60/l));\n }\n for (let p of flowParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 12);\n p.vel.add(d.mult((3 + power*12) * 80/l));\n }\n let n = floor(80 + power*160);\n for (let i = 0; i < n; i++) {\n let a = random(TWO_PI);\n let sp = random(2, 6 + power*16);\n burstParticles.push({...});\n }\n}\n```\n\nNote d.mult mutates d after normalize — write carefully: `d.normalize().mult(...)`. Since l computed before. Wait I wrote `d.mult((...) * 60/l)` — d not normalized; |d|=l, so d.mult(k/l) gives magnitude k. Actually that normalizes implicitly: d * (K/l) has magnitude K. OK that works: `p.vel.add(d.mult(K / l))` where K = 6 + power*26... but mutating d fine.\n\nHmm, but better physical feel: closer particles get more push → magnitude should fall with distance: K2 = (6+power*26) * (100/l)? Might be extreme near center; clamp. I'll use magnitude = (4 + power * 20) * constrain(140 / l, 0.3, 3). Fine.\n\nFlash: after drawing everything, ADD rect white with flash alpha, decay flash *= 0.85. Draw before HUD.\n\nmousePressed: charging = true; chargeStart = millis(); Also while charging, spawn inward-streaming particles? The pull on flow + burst particles suffices, plus sparks drawn.\n\nAlso prevent context menu? Only left click matters; fine.\n\nHUD:\n\n```javascript\nfunction drawHUD(sn, overdrive) {\n // bottom-left velocity gauge\n let x = 28, y = height - 40;\n noStroke();\n textFont('monospace');\n textSize(10);\n fill(0, 0, 100, 0.5);\n text('V E L O C I T Y', x, y - 18);\n // bar bg\n fill(0, 0, 100, 0.12);\n rect(x, y - 12, 220, 6, 3);\n // bar fill\n let w = 220 * sn;\n for (let i = 0; i < w; i += 4) { gradient } \n```\n\nSimpler: draw fill rect with hueBase color plus bright tip. Also numeric: text(nf(sn*100,1,0) ...) maybe value in \"px/frame\": text(floor(smoothSpeed) + ' px/f').\n\nOverdrive text: center top? flashing near gauge: if overdrive, text('◆ OVERDRIVE', x + 230...) with alpha oscillating.\n\nTitle top-left: 'NEBULA//DRIVE' small, alpha 0.35. Hint bottom-center fading.\n\nParticle count display maybe top-right: 'ENTITIES: n'. Cute. Keep minimal: title + gauge + hint.\n\nInstructions hint: \"drift slowly · move fast to ignite · hold click to collapse · release to detonate\" at bottom center, fades out after user reaches overdrive once or after 12s.\n\nStars with parallax & warp:\n\n```javascript\nfunction drawStars(vel, sn) {\n noStroke();\n for (let s of stars) {\n s.x -= vel.x * 0.05 * s.z;\n s.y -= vel.y * 0.05 * s.z;\n // wrap\n ...\n let tw = 0.5 + 0.5 * sin(time*2 + s.tw);\n fill(220, 20, 90, 0.25 + 0.45 * tw * s.z);\n let sz = s.z * 2.2;\n ellipse(s.x, s.y, sz);\n // warp streaks at high speed\n if (sn > 0.5) {\n stroke(220, 15, 100, (sn-0.5)*0.5*s.z);\n strokeWeight(sz*0.5);\n line(s.x, s.y, s.x + vel.x*0.6*s.z*sn, s.y + vel.y*0.6*s.z*sn);\n noStroke();\n }\n }\n}\n```\n\nThis gives motion parallax: stars shift opposite mouse movement. \n\nNow the bg fade fill color: deep space blue-purple: fill(240, 75, 5, alpha). With ADD blending on top, blacks stay black. Note: fade rect uses BLEND with HSB color — dark blue fill with alpha. Good. Alpha higher = shorter trails. At high speed, want longer trails: alpha = lerp(0.30, 0.14, sn)? I said map(sn,0,1,0.28,0.16) — yes.\n\nAlso first frame: clear background to solid: background(240, 75, 5) in setup.\n\nTrail storing: \n\n```javascript\ntrail.push({ p: m.copy(), w: (2 + sn * 16), t: time });\nwhile (trail.length > 46) trail.shift();\n```\n\nEven when idle it keeps adding points at same spot — fine, ribbon collapses.\n\nIn drawRibbon, multiply width by taper: wi = p.w * (i / trail.length).\n\nAlso hue for ribbon segments: shift toward white core at newest: fill(hue, 80 - t*40, 100, alpha).\n\nConstellation detail:\n\n```javascript\nfunction drawConstellation() {\n let cell = 90;\n let grid = new Map();\n for (let p of burstParticles) {\n if (p.life < 0.35) continue;\n let k = floor(p.pos.x / cell) + '_' + floor(p.pos.y / cell);\n if (!grid.has(k)) grid.set(k, []);\n grid.get(k).push(p);\n }\n let drawn = 0;\n strokeWeight(1);\n for (let p of burstParticles) {\n if (p.life < 0.35) continue;\n let cx = floor(p.pos.x/cell), cy = floor(p.pos.y/cell);\n for (let ix = cx; ix <= cx+1; ix++) for (let iy = cy-1; iy <= cy+1; iy++) {\n // only forward neighbors to avoid duplicates... \n }\n }\n}\n```\n\nDuplicate lines are okay-ish in ADD mode but slightly brighter; avoid by only checking half the neighborhood (cells with greater index ordering) and within same cell only pairs where index j > i. Simpler: accept duplicates? Lines drawn twice = brighter = actually fine glow. But perf doubles. Let's do the proper half-neighborhood:\n\nStandard approach: for each particle at cell (cx,cy), check cells (cx,cy), (cx+1,cy), (cx-1,cy+1), (cx,cy+1), (cx+1,cy+1) — hmm that's for 2D avoiding duplicates: check east, and the three southern-ish cells. Plus within-cell j>i. Neighborhood offsets: (0,0) with j>i, (1,0), (-1,1), (0,1), (1,1). That covers all unique pairs within distance cell. Distance cutoff 70.\n\nCap lines: if drawn > 260 return.\n\nAlpha = (1 - d/70) * 0.35 * min(p.life, q.life).\n\nOK.\n\nNow — order of drawing matters with ADD. Also the fade rect must be drawn before shake translate? translate after fade rect, then everything moves including HUD? HUD shouldn't shake. So push/translate after fade, pop before HUD. But flash + vignette: flash inside shake (fine), vignette after pop (screen-space). Let me organize:\n\n```\ndraw():\n compute vel/speed/sn/hue\n blendMode(BLEND); fade rect\n push(); if overdrive translate shake\n drawStars\n blendMode(ADD)\n updateFlow+show\n emit\n update+show burst\n constellation\n shockwaves\n ribbon\n aura\n charge visuals (if charging)\n flash rect (ADD white, alpha=flash); flash *= 0.86\n pop()\n blendMode(BLEND)\n vignette\n HUD\n hint text\n prevMouse update\n```\n\nWait — flow particle update needs m and vel — fine.\n\nOne more wow: **idle comet** — if mouse idle for > 3s, spawn a slow orbiting drone around the last mouse pos emitting particles so screen never goes dead? The flow field already keeps alive. Skip extra complexity; ambient flow + star twinkle suffice.\n\nAlso hue drift: hueBase target = (200 + sn*150 + sin(time*0.2)*15 + 360)%360.\n\nText rendering with ADD? Draw HUD in BLEND after vignette — crisp white text. Good.\n\nCursor: noCursor() in setup. Also CSS cursor:none on canvas for safety.\n\nResize: resizeCanvas + regenerate stars spread; keep particles.\n\nLet me also add subtle **nebula blobs**: a few large, very low-alpha radial blobs drifting slowly (noise-based positions) in ADD mode behind everything, hue near hueBase. Draw 4 blobs: ellipse big with alpha 0.02 layered ×3. Cheap, adds depth. Position: center + sin/cos(time*speed + offset) * range.\n\nNow let me carefully write the final HTML file.\n\nAlso ensure `pixelDensity(1)` maybe for perf on retina? particle-heavy — set pixelDensity(min(1.5, displayDensity()))? Keep default; adaptive quality handles it. Actually retina Macs: pixelDensity 2 = 4x pixels; fade rects + many strokes might chug. I'll set pixelDensity(1) explicitly for perf, slight blur acceptable... Actually strokes look crisper at density 2 but glow aesthetic tolerates density 1 well. Go pixelDensity(1).\n\nHmm, but text HUD at density 1 on retina looks blurry. Compromise: pixelDensity(Math.min(2, displayDensity())) but rely on adaptive quality. I'll keep adaptive quality + full density; if user machine slow, quality drops. Fine. Actually let me just cap at 1.5? Eh — simplest: leave default (matches display). Adaptive quality kicks in. OK.\n\nWrite the code:\n\n```html\n\n\n\n\nNEBULA // DRIVE\n\n\n\n\n\n\n\n```\n\nNow full sketch. Let me be careful with all variables and functions.\n\n```javascript\n'use strict';\n\nlet burstParticles = [];\nlet flowParticles = [];\nlet shockwaves = [];\nlet stars = [];\nlet trail = [];\nlet nebulaBlobs = [];\n\nlet prevMouse;\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet time = 0;\nlet flash = 0;\nlet quality = 1;\nlet interacted = false;\nlet startTime;\n\nlet charging = false;\nlet chargeStart = 0;\n\nconst MAX_PARTICLES = 850;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n noCursor();\n prevMouse = createVector(width/2, height/2);\n startTime = millis();\n background(240, 80, 4);\n\n for (let i = 0; i < 240; i++) {\n stars.push({ x: random(width), y: random(height), z: random(0.12, 1), tw: random(TWO_PI) });\n }\n for (let i = 0; i < 280; i++) flowParticles.push(new FlowParticle());\n for (let i = 0; i < 5; i++) {\n nebulaBlobs.push({ off: random(1000), sp: random(0.05, 0.14), r: random(180, 420), hueOff: random(-40, 40) });\n }\n}\n```\n\ndraw():\n\n```javascript\nfunction draw() {\n time += 1/60;\n\n const m = createVector(mouseX, mouseY);\n const vel = p5.Vector.sub(m, prevMouse);\n const speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.12);\n const sn = constrain(smoothSpeed / 55, 0, 1);\n const overdrive = sn > 0.7;\n if (sn > 0.25) interacted = true;\n\n const targetHue = (200 + sn * 150 + sin(time * 0.25) * 18 + 360) % 360;\n hueBase = lerpHue(hueBase, targetHue, 0.05);\n\n // adaptive quality\n if (frameCount % 45 === 0) {\n const fr = frameRate();\n if (fr < 42 && quality > 0.35) quality -= 0.12;\n else if (fr > 54 && quality < 1) quality += 0.06;\n }\n\n // fade\n blendMode(BLEND);\n noStroke();\n fill(238, 80, 4, lerp(0.3, 0.15, sn));\n rect(0, 0, width, height);\n\n push();\n if (overdrive) translate(random(-1,1)*sn*3.5, random(-1,1)*sn*3.5);\n\n drawStars(vel, sn);\n drawNebula();\n\n blendMode(ADD);\n\n updateFlow(m, vel, sn);\n\n // emit\n let emit = floor(map(sn, 0, 1, 1.5, 15) * quality);\n for (let i = 0; i < emit; i++) spawnBurst(m, vel, sn);\n while (burstParticles.length > MAX_PARTICLES * quality) burstParticles.shift();\n\n updateBurst(m, vel, sn);\n drawConstellation();\n\n if (smoothSpeed > 46 && frameCount % 5 === 0) {\n shockwaves.push({ x: m.x, y: m.y, r: 12, max: 130 + sn * 260, hue: hueBase, thick: false });\n }\n updateShockwaves();\n\n updateTrail(m, sn);\n drawRibbon();\n\n if (charging) drawCharge(m);\n drawAura(m, vel, sn, overdrive);\n\n if (flash > 0.01) {\n noStroke();\n fill(0, 0, 100, flash);\n rect(-20, -20, width + 40, height + 40);\n flash *= 0.85;\n }\n pop();\n\n blendMode(BLEND);\n drawVignette();\n drawHUD(sn, overdrive);\n drawHint();\n\n prevMouse = m.copy();\n}\n```\n\nNote: flash rect drawn in ADD mode — white add = flash. But it's inside push with shake translate; rect covers extra margin. OK. But flash uses fill(0,0,100,flash) HSB white. ADD white — good.\n\nHmm: `flash` in ADD mode with HSB: fill(0,0,100,flash) — white. good.\n\nFlowParticle with hueBase global — show uses global hueBase + hueOff. fine.\n\nupdateFlow:\n\n```javascript\nfunction updateFlow(m, vel, sn) {\n const n = floor(flowParticles.length * quality);\n for (let i = 0; i < n; i++) {\n const p = flowParticles[i];\n p.update(m, sn);\n p.show();\n }\n}\n```\n\nFlowParticle.update(m, sn) uses global time & charging.\n\n```javascript\nclass FlowParticle {\n constructor() { this.reset(true); }\n reset(init) {\n this.pos = createVector(random(width), random(height));\n this.prev = this.pos.copy();\n this.vel = p5.Vector.random2D().mult(0.5);\n this.hueOff = random(-35, 35);\n this.maxSp = random(0.6, 1.8);\n this.life = init ? random(60, 500) : 500;\n }\n update(m, sn) {\n this.prev.x = this.pos.x;\n this.prev.y = this.pos.y;\n const ang = noise(this.pos.x * 0.0021, this.pos.y * 0.0021, time * 0.12) * TWO_PI * 2.2;\n const f = p5.Vector.fromAngle(ang).mult(this.maxSp);\n\n const dx = this.pos.x - m.x, dy = this.pos.y - m.y;\n const d = Math.hypot(dx, dy);\n if (d < 300 && d > 0.5) {\n const fall = 1 - d / 300;\n const inv = 1 / d;\n // swirl (perpendicular) + slight push outward when fast\n const sw = lerp(0.5, 7, sn) * fall;\n f.x += (-dy * inv) * sw + dx * inv * sn * 3.2 * fall;\n f.y += ( dx * inv) * sw + dy * inv * sn * 3.2 * fall;\n }\n if (charging) {\n const gx = m.x - this.pos.x, gy = m.y - this.pos.y;\n const gd = Math.max(Math.hypot(gx, gy), 24);\n f.x += gx / gd * 2.6;\n f.y += gy / gd * 2.6;\n }\n this.vel.x = lerp(this.vel.x, f.x, 0.07);\n this.vel.y = lerp(this.vel.y, f.y, 0.07);\n this.pos.x += this.vel.x;\n this.pos.y += this.vel.y;\n if (--this.life < 0 || this.pos.x < -30 || this.pos.x > width + 30 || this.pos.y < -30 || this.pos.y > height + 30) {\n this.reset(false);\n this.prev = this.pos.copy();\n }\n }\n show() {\n stroke((hueBase + this.hueOff + 360) % 360, 55, 95, 0.45);\n strokeWeight(1.1);\n line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);\n }\n}\n```\n\nspawnBurst:\n\n```javascript\nfunction spawnBurst(m, vel, sn) {\n let ang;\n if (vel.magSq() > 0.5) ang = vel.heading() + PI + random(-0.7, 0.7);\n else ang = random(TWO_PI);\n const sp = random(0.6, 2.5 + sn * 11);\n burstParticles.push({\n pos: createVector(m.x + random(-3, 3), m.y + random(-3, 3)),\n vel: p5.Vector.fromAngle(ang).mult(sp).add(p5.Vector.mult(vel, random(0.15, 0.4))),\n size: random(1.5, 3.5 + sn * 7),\n hue: (hueBase + random(-28, 28) + 360) % 360,\n life: 1,\n decay: random(0.006, 0.014 + sn * 0.02),\n });\n}\n```\n\nupdateBurst: apply drag, turbulence, swirl, charging pull, draw streaks.\n\n```javascript\nfunction updateBurst(m, vel, sn) {\n for (let i = burstParticles.length - 1; i >= 0; i--) {\n const p = burstParticles[i];\n // drag\n p.vel.mult(0.965);\n // turbulence\n const tA = noise(p.pos.x * 0.004, p.pos.y * 0.004, time * 0.3) * TWO_PI;\n p.vel.x += cos(tA) * 0.12;\n p.vel.y += sin(tA) * 0.12;\n // swirl around cursor\n const dx = p.pos.x - m.x, dy = p.pos.y - m.y;\n const d = Math.hypot(dx, dy);\n if (d < 240 && d > 0.5) {\n const fall = 1 - d / 240, inv = 1 / d;\n const sw = lerp(0.2, 4.5, sn) * fall;\n p.vel.x += (-dy * inv) * sw;\n p.vel.y += ( dx * inv) * sw;\n }\n if (charging) {\n const gx = m.x - p.pos.x, gy = m.y - p.pos.y;\n const gd = Math.max(Math.hypot(gx, gy), 20);\n p.vel.x += gx / gd * 1.4;\n p.vel.y += gy / gd * 1.4;\n }\n const px = p.pos.x, py = p.pos.y;\n p.pos.x += p.vel.x;\n p.pos.y += p.vel.y;\n p.life -= p.decay;\n if (p.life <= 0) { burstParticles.splice(i, 1); continue; }\n\n const a = p.life;\n // glow streak\n stroke(p.hue, 85, 100, 0.10 * a);\n strokeWeight(p.size * 3.2);\n line(px - p.vel.x * 1.5, py - p.vel.y * 1.5, p.pos.x, p.pos.y);\n // core streak\n stroke(p.hue, 40, 100, 0.85 * a);\n strokeWeight(max(0.8, p.size * 0.55));\n line(px - p.vel.x * 1.5, py - p.vel.y * 1.5, p.pos.x, p.pos.y);\n }\n}\n```\n\nNote splicing while iterating backwards — fine.\n\ndrawConstellation as planned.\n\n```javascript\nfunction drawConstellation() {\n const cell = 80, maxD = 70;\n const grid = new Map();\n for (const p of burstParticles) {\n if (p.life < 0.3) continue;\n const k = floor(p.pos.x / cell) + ',' + floor(p.pos.y / cell);\n let arr = grid.get(k);\n if (!arr) { arr = []; grid.set(k, arr); }\n arr.push(p);\n }\n strokeWeight(1);\n let drawn = 0;\n const offs = [[0,0],[1,0],[-1,1],[0,1],[1,1]];\n for (const p of burstParticles) {\n if (p.life < 0.3) continue;\n const cx = floor(p.pos.x / cell), cy = floor(p.pos.y / cell);\n for (const [ox, oy] of offs) {\n const arr = grid.get((cx + ox) + ',' + (cy + oy));\n if (!arr) continue;\n for (const q of arr) {\n if (q === p) continue;\n if (ox === 0 && oy === 0 && q.id <= p.id) continue; // hmm need ids\n ...\n }\n }\n }\n}\n```\n\nIDs: simpler to skip dedup and accept double-drawn lines (ADD → slightly brighter, looks like stronger links). Actually simplest correct dedup: within same cell only pair with index check using object reference index — I can store index in array iteration. Or: compare object references via `if (q === p) continue;` and accept duplicates from cross-cells? Cross-cell pairs appear once because we only check 4 directional offsets + same cell. Same-cell pairs appear twice (p sees q, q sees p). Fix with reference comparison trick: can't order objects easily... assign each particle an incrementing id at spawn. Add `id: nextId++`. Then same-cell: `if (q.id <= p.id) continue;`. Easy.\n\nBut wait, with only forward offsets, pair p in cell A, q in cell B where B is west of A: p checks east (sees q? no, q is west), q checks east → sees p. Covered. Good — the 5-offset scheme covers all pairs exactly once with the same-cell id rule.\n\nCap: `if (drawn > 280) return;`\n\ndrawRibbon and trail:\n\n```javascript\nfunction updateTrail(m, sn) {\n trail.push({ x: m.x, y: m.y, w: 2.5 + sn * 17 });\n if (trail.length > 44) trail.shift();\n}\n\nfunction drawRibbon() {\n const n = trail.length;\n if (n < 3) return;\n noStroke();\n for (let i = 0; i < n - 1; i++) {\n const p0 = trail[i], p1 = trail[i + 1];\n let dx = p1.x - p0.x, dy = p1.y - p0.y;\n const L = Math.hypot(dx, dy);\n if (L < 0.5) continue;\n dx /= L; dy /= L;\n const t0 = i / n, t1 = (i + 1) / n;\n const w0 = p0.w * t0, w1 = p1.w * t1;\n const hue = (hueBase + t0 * 45) % 360;\n fill(hue, 85 - t0 * 45, 100, 0.04 + t0 * 0.10);\n quad(\n p0.x - dy * w0, p0.y + dx * w0,\n p0.x + dy * w0, p0.y - dx * w0,\n p1.x + dy * w1, p1.y - dx * w1,\n p1.x - dy * w1, p1.y + dx * w1\n );\n }\n // bright spine\n for (let i = 0; i < n - 1; i++) {\n const p0 = trail[i], p1 = trail[i + 1];\n const t = i / n;\n stroke((hueBase + t * 45) % 360, 25, 100, t * 0.7);\n strokeWeight(1 + t * 2);\n line(p0.x, p0.y, p1.x, p1.y);\n }\n}\n```\n\nPerpendicular: normal to (dx,dy) is (-dy,dx). Points: p + n*w. I wrote (x - dy*w, y + dx*w) = p + n*w with n=(-dy,dx). Yes.\n\ndrawAura: as above plus tick marks.\n\n```javascript\nfunction drawAura(m, vel, sn, overdrive) {\n push();\n translate(m.x, m.y);\n const pulse = 1 + sin(time * 6) * 0.05;\n const R = (30 + sn * 85) * pulse;\n\n // layered glow\n noStroke();\n for (let i = 6; i >= 1; i--) {\n fill(hueBase, 75, 100, 0.022 + sn * 0.012);\n ellipse(0, 0, R * 2 * (i / 6) + 26);\n }\n\n // rotating segmented rings\n noFill();\n for (let ring = 0; ring < 3; ring++) {\n const rr = R * (0.62 + ring * 0.33);\n const rot = time * (ring % 2 === 0 ? 1.4 : -1.1) * (1 + sn * 4);\n const segs = 3 + ring * 2;\n strokeWeight(1.4 + sn * 2.2);\n stroke((hueBase + ring * 22) % 360, 65, 100, 0.5);\n for (let s = 0; s < segs; s++) {\n const a0 = rot + s * TWO_PI / segs;\n arc(0, 0, rr * 2, rr * 2, a0, a0 + (TWO_PI / segs) * 0.52);\n }\n }\n\n // orbiting satellite dots\n const sats = 3;\n noStroke();\n for (let i = 0; i < sats; i++) {\n const a = time * (1.5 + sn * 3) + i * TWO_PI / sats;\n const rr = R * 1.15;\n fill((hueBase + 60) % 360, 50, 100, 0.8);\n ellipse(cos(a) * rr, sin(a) * rr, 3 + sn * 4);\n }\n\n // overdrive rays\n if (overdrive) {\n const rays = 16;\n for (let i = 0; i < rays; i++) {\n const a = (i / rays) * TWO_PI + time * 2.5;\n const len = R * 0.9 + random(15, 70) * sn;\n stroke((hueBase + 40) % 360, 55, 100, random(0.15, 0.65));\n strokeWeight(random(1, 2.6));\n line(cos(a) * R * 0.75, sin(a) * R * 0.75, cos(a) * (R * 0.75 + len), sin(a) * (R * 0.75 + len));\n }\n }\n\n // white hot core\n noStroke();\n fill(hueBase, 30, 100, 0.55);\n ellipse(0, 0, 12 + sn * 16);\n fill(0, 0, 100, 0.95);\n ellipse(0, 0, 4 + sn * 7);\n pop();\n}\n```\n\nCharge visuals:\n\n```javascript\nfunction drawCharge(m) {\n const ct = (millis() - chargeStart) / 1000;\n const power = constrain(ct / 2.2, 0, 1);\n push();\n translate(m.x, m.y);\n // converging rings\n noFill();\n for (let i = 0; i < 4; i++) {\n const ph = (time * 1.6 + i / 4) % 1;\n const rr = (60 + 240 * ph) * (1 - power * 0.55);\n stroke(hueBase, 40, 100, 0.5 * (1 - ph));\n strokeWeight(1.5);\n ellipse(0, 0, rr * 2);\n }\n // energy ball\n noStroke();\n const br = 8 + power * 46 + random(-2, 2);\n fill(hueBase, 70, 100, 0.3);\n ellipse(0, 0, br * 2.6);\n fill(0, 0, 100, 0.55 + power * 0.4);\n ellipse(0, 0, br);\n // inward sparks\n const spN = floor(3 + power * 9);\n for (let i = 0; i < spN; i++) {\n const a = random(TWO_PI);\n const r0 = br + random(20, 90 * (1 - power) + 20);\n stroke(0, 0, 100, random(0.3, 0.8));\n strokeWeight(random(1, 2));\n line(cos(a) * r0, sin(a) * r0, cos(a) * br * 0.4, sin(a) * br * 0.4);\n }\n pop();\n}\n```\n\nmousePressed / Released:\n\n```javascript\nfunction mousePressed() {\n charging = true;\n chargeStart = millis();\n}\n\nfunction mouseReleased() {\n if (!charging) return;\n charging = false;\n const ct = (millis() - chargeStart) / 1000;\n const power = constrain(ct / 2.2, 0.18, 1);\n const m = createVector(mouseX, mouseY);\n shockwaves.push({ x: m.x, y: m.y, r: 10, max: 260 + power * 520, hue: hueBase, thick: true });\n flash = 0.3 + power * 0.45;\n\n const pushAll = (arr, base) => {\n for (const p of arr) {\n const dx = p.pos.x - m.x, dy = p.pos.y - m.y;\n const d = Math.max(Math.hypot(dx, dy), 14);\n const f = base * constrain(150 / d, 0.25, 3);\n p.vel.x += dx / d * f;\n p.vel.y += dy / d * f;\n }\n };\n pushAll(burstParticles, 5 + power * 22);\n pushAll(flowParticles, 3 + power * 9);\n\n const n = floor((70 + power * 170) * quality);\n for (let i = 0; i < n; i++) {\n const a = random(TWO_PI);\n const sp = random(2, 5 + power * 17);\n burstParticles.push({\n id: nextId++,\n pos: m.copy(),\n vel: p5.Vector.fromAngle(a).mult(sp),\n size: random(1.5, 4 + power * 8),\n hue: (hueBase + random(-35, 35) + 360) % 360,\n life: 1,\n decay: random(0.004, 0.012),\n });\n }\n}\n```\n\nAdd id to spawnBurst too. nextId global.\n\nShockwaves update:\n\n```javascript\nfunction updateShockwaves() {\n noFill();\n for (let i = shockwaves.length - 1; i >= 0; i--) {\n const s = shockwaves[i];\n s.r += (s.max - s.r) * 0.075 + 1.5;\n const t = s.r / s.max;\n const a = 1 - t;\n for (let k = 0; k < 3; k++) {\n stroke(s.hue, 60, 100, a * (0.55 - k * 0.15));\n strokeWeight((s.thick ? 7 : 3.5) * a + 0.8);\n const rr = s.r * 2 - k * 16;\n if (rr > 0) ellipse(s.x, s.y, rr);\n }\n if (t >= 0.995) shockwaves.splice(i, 1);\n }\n}\n```\n\nStars:\n\n```javascript\nfunction drawStars(vel, sn) {\n noStroke();\n for (const s of stars) {\n s.x -= vel.x * 0.06 * s.z;\n s.y -= vel.y * 0.06 * s.z;\n if (s.x < 0) s.x += width; if (s.x > width) s.x -= width;\n if (s.y < 0) s.y += height; if (s.y > height) s.y -= height;\n const tw = 0.5 + 0.5 * sin(time * 2.2 + s.tw);\n fill(225, 25, 95, (0.2 + 0.5 * tw) * s.z);\n const sz = 0.6 + s.z * 2;\n ellipse(s.x, s.y, sz);\n if (sn > 0.45) {\n stroke(225, 20, 100, (sn - 0.45) * 0.6 * s.z);\n strokeWeight(sz * 0.55);\n line(s.x, s.y, s.x + vel.x * 0.9 * s.z * sn, s.y + vel.y * 0.9 * s.z * sn);\n noStroke();\n }\n }\n}\n```\n\nHmm wrapping with += width when x<0 — if jump large, might stay out; use modulo: s.x = (s.x + width) % width. vel per frame is small though. Use modulo to be safe.\n\nNebula blobs:\n\n```javascript\nfunction drawNebula() {\n blendMode(ADD);\n noStroke();\n for (const b of nebulaBlobs) {\n const x = width * 0.5 + sin(time * b.sp + b.off) * width * 0.38;\n const y = height * 0.5 + cos(time * b.sp * 0.8 + b.off * 1.7) * height * 0.36;\n const hue = (hueBase + b.hueOff + 360) % 360;\n for (let i = 3; i >= 1; i--) {\n fill(hue, 70, 60, 0.012);\n ellipse(x, y, b.r * 2 * i / 3);\n }\n }\n}\n```\n\nVery faint (alpha 0.012 ×3 layers ×5 blobs) — subtle color wash. But wait — drawNebula called before blendMode(ADD) set? I call drawStars (BLEND) then drawNebula sets ADD itself. Order in draw(): drawStars; drawNebula(); blendMode(ADD) — redundant but fine. Let drawNebula set it.\n\nVignette:\n\n```javascript\nfunction drawVignette() {\n const g = drawingContext.createRadialGradient(\n width/2, height/2, Math.min(width, height) * 0.35,\n width/2, height/2, Math.max(width, height) * 0.72\n );\n g.addColorStop(0, 'rgba(0,0,0,0)');\n g.addColorStop(1, 'rgba(2,2,10,0.5)');\n drawingContext.fillStyle = g;\n drawingContext.fillRect(0, 0, width, height);\n}\n```\n\nHUD:\n\n```javascript\nfunction drawHUD(sn, overdrive) {\n const x = 26, y = height - 34;\n textFont('monospace');\n noStroke();\n\n // title\n textSize(11);\n fill(0, 0, 100, 0.4);\n textAlign(LEFT, TOP);\n text('N E B U L A // D R I V E', 26, 20);\n\n // gauge label\n textSize(9);\n fill(0, 0, 100, 0.45);\n text('V E L O C I T Y', x, y - 16);\n\n // bar\n fill(0, 0, 100, 0.1);\n rect(x, y - 6, 200, 5, 2.5);\n const w = 200 * sn;\n if (w > 1) {\n // gradient segments\n for (let i = 0; i < w; i += 3) {\n const t = i / 200;\n fill((200 + t * 150) % 360, 75, 100, 0.85);\n rect(x + i, y - 6, 2.6, 5);\n }\n }\n // readout\n fill(0, 0, 100, 0.6);\n text(nf(smoothSpeed, 2, 1) + ' px/f', x + 210, y - 16); // hmm align\n```\n\nLet me place readout right of bar: text at x+208, y-6-ish baseline. textAlign(LEFT, BASELINE) default. Fine-tune y coordinates: label at y-16, bar top at y-6 height 5 → bar bottom y-1. readout text at (x + 208, y) aligned LEFT. OK-ish.\n\nOverdrive indicator:\n\n```javascript\nif (overdrive) {\n const blink = 0.5 + 0.5 * sin(time * 14);\n fill(0, 90, 100, 0.5 + 0.5 * blink);\n textSize(11);\n text('◆ OVERDRIVE ◆', x + 230, y);\n}\n```\n\nHmm HSB hue 0 = red. Use (hueBase+... ) or just red-white: fill(0, 80, 100, ...). Red fits overdrive.\n\nAlso entity count top-right:\n\n```javascript\ntextAlign(RIGHT, TOP);\nfill(0, 0, 100, 0.35);\ntextSize(9);\ntext('ENTITIES ' + (burstParticles.length + flowParticles.length), width - 26, 22);\ntextAlign(LEFT, BASELINE);\n```\n\nHint:\n\n```javascript\nfunction drawHint() {\n const el = millis() - startTime;\n let a = 0;\n if (!interacted) a = constrain(map(el, 800, 1600, 0, 1), 0, 1) * 0.75;\n else {\n const t = millis() - interactedAt;\n a = constrain(1 - t / 1500, 0, 1) * 0.75;\n }\n if (a <= 0.01) return;\n textAlign(CENTER, CENTER);\n textSize(12);\n fill(0, 0, 100, a);\n text('drift slowly · move fast to ignite · hold click to collapse · release to detonate', width/2, height - 70);\n textAlign(LEFT, BASELINE);\n}\n```\n\nSet interactedAt when interacted first true: in draw, `if (sn > 0.25 && !interacted) { interacted = true; interactedAt = millis(); }`.\n\nwindowResized:\n\n```javascript\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n background(240, 80, 4);\n stars = [];\n for (let i = 0; i < 240; i++) stars.push({...});\n}\n```\n\nRefactor star creation into makeStars().\n\nlerpHue:\n\n```javascript\nfunction lerpHue(a, b, t) {\n const d = ((b - a + 540) % 360) - 180;\n return (a + d * t + 360) % 360;\n}\n```\n\nCheck: b-a range [-360,360]; +540 → [180, 900]; %360 → [180,360)∪... hmm (b-a+540) for b-a=-360 → 180; for +360 → 900 %360=180. So result in [180, 900) %360 ∈ [0,360). minus 180 → [-180, 180). Good.\n\nnextId init 1.\n\nOne concern: `text()` with HSB colorMode — fill uses HSB; fine.\n\nBlend modes: p5 blendMode(ADD) works in 2D context (uses globalCompositeOperation 'lighter'? p5 maps ADD to 'lighter'... In p5, blendMode(ADD) → 'lighter'? Yes approximately.)\n\nPerformance: per-frame allocations — p5.Vector creations in spawnBurst etc. Acceptable.\n\nFlowParticle prev copying: using this.prev.x = ... avoids alloc. Good.\n\nIn updateBurst, splice(i,1) while iterating backwards — OK.\n\nTrail uses plain objects {x,y,w} — good.\n\nOne more flourish: **double-tap**? skip. Keyboard? Press 'c' to clear? minor: add keyPressed to clear screen / randomize hue? Add: pressing any key randomizes hueBase jump. Eh, add subtle: press H to hide HUD? Skip — keep focused. Actually add 'space' to trigger detonate at cursor without charge? That duplicates click. Skip keyboard.\n\nAlso handle mouse leaving canvas — mouseX/Y clamp anyway.\n\nFirst-frame mouse at (0,0): prevMouse center; initial speed spike? vel from center to (0,0) if user hasn't moved — mouseX defaults 0. Guard: on first real mouseMoved set prevMouse to mouse pos. Add a flag: `let firstMove = true;` in mouseMoved: if firstMove { prevMouse.set(mouseX, mouseY); firstMove=false; }. Also in draw, before first move, m=(0,0)... aura drawn at 0,0 — acceptable, or default m to center until first move. Do: `let hasMouse = false;` m = hasMouse ? createVector(mouseX,mouseY) : center. Good.\n\nTouch: touchStarted → treat as mousePressed but return false to prevent scrolling? p5 mousePressed handles touch. Add `function touchStarted(){ mousePressed(); return false; }`? mousePressed already fires for touch in p5. To prevent default scroll, canvas is fullscreen fixed; add CSS `touch-action: none` on body/canvas. And in setup: `canvas.elt`? Simpler: CSS touch-action:none on html,body.\n\nEdge: charging while moving — pull uses current m each frame, good.\n\nNow, double check constellation offsets loop with destructuring `for (const [ox,oy] of offs)` fine.\n\nAlso cap: skip constellation if quality low? include drawn cap 260 * quality.\n\nLet me also think about the \"fade rect\" color: fill(238, 80, 4) HSB = very dark navy. Alpha 0.15–0.3. With ADD strokes, trails accumulate brightness nicely. \n\nOne issue: HUD drawn in BLEND each frame after full-opacity? HUD bar fill alpha 0.85 over dark bg fine. But vignette drawn every frame at alpha 0.5 solid over previous vignette — it's opaque-ish overlay each frame; since we re-fade bg each frame and redraw everything, vignette doesn't accumulate (it's drawn once per frame over the frame). But it dims the ADD glow near edges permanently — intended.\n\nBut text HUD each frame redrawn over faded previous frame text → slight ghost of previous text persists (alpha fade). SmoothSpeed number changes → ghosting digits. Acceptable (HUD over near-black corner, ghost barely visible). Alternatively clear HUD area with solid fill before drawing text. Do: fill(238,80,4, 1)?? That erases stars behind HUD... The corners are mostly empty; a subtle solid panel improves readability. I'll draw a very low alpha dark panel? If I draw semi-transparent dark rect it accumulates over frames? No — everything is redrawn each frame; accumulation only via the fade rect alpha. A panel at alpha 0.5 each frame over faded content: content behind shows at 50% — consistent per frame, no accumulation issue because the panel is redrawn after fade each frame. Wait — but panel drawn in frame N dims frame N content; the faded history of panel also accumulates in the canvas from previous frames... Actually everything on canvas is subject to the same fade. Panel pixels: each frame we draw dark panel with alpha .5 over current canvas → result = 0.5*canvas + 0.5*panelColor. Next frame fade rect applies over that... equilibrium reached: panel area ≈ mostly panel color mix. Fine, subtle. Use panel alpha 0.35 dark navy rounded rect behind gauge area. OK.\n\nSimplify: draw panel: fill(235, 60, 8, 0.45); rect(16, height-58, 330, 44, 8)? width depends on content incl OVERDRIVE text. Make panel 300 wide; overdrive text inside panel at right side. Readout inside too. Layout:\n\npanel: x=16, y=height-62, w=316, h=48, r=10.\nlabel 'V E L O C I T Y' at (30, height-50) size 8.\nbar at (30, height-36) w=190 h=5.\nreadout at (30, height-22)?? Getting cramped; let me do:\n- label top-left of panel: (30, panelY+16)\n- bar below label: (30, panelY+24, 190, 6)\n- readout right of bar: (228, panelY+31)\n- overdrive text: right side blinking at (228, panelY+16)?\n\nEh, fine-tune:\npanelY = height - 60, panelH = 46.\nlabel: textSize(8), at (30, panelY + 15).\nbar: rect(30, panelY + 24, 190, 6, 3).\nreadout: textSize(9) at (230, panelY + 31): nf value.\noverdrive: textSize(9) at (230, panelY + 15) blinking '◆ OVERDRIVE'.\n\nTitle top-left without panel, plus entities top-right.\n\nHint at bottom center above panel: y = height - 78.\n\nGood enough.\n\nAlso add slight scanline / grain? skip.\n\nLet me now also double check `arc()` in HSB ADD — fine.\n\nTotal flow: Also I should include mouseMoved setting hasMouse. p5 calls mouseMoved on move. Also touchMoved.\n\nWrite final HTML. Also add meta viewport for mobile.\n\nLet me also reconsider MAX_PARTICLES*quality shift loop: `while (burstParticles.length > MAX_PARTICLES * quality) burstParticles.shift();` — shift() is O(n); use splice(0, k) once. \n\n```javascript\nconst excess = burstParticles.length - floor(MAX_PARTICLES * quality);\nif (excess > 0) burstParticles.splice(0, excess);\n```\n\nConstellation id: add `id` in both spawn paths.\n\nAlright — also one more visual: at rest (low speed), the emitter drip `map(sn,0,1,1.5,15)` gives 1-2 particles/frame — gentle. Plus flow field. Good.\n\nI think the design is complete. Write it all out cleanly with comments. Ensure no syntax errors. Let me write final code mentally checking each function.\n\nAlso `nf(smoothSpeed, 2, 1)` — nf with left digits 2 → \"05.3\". fine.\n\nCheck p5 arc signature: arc(x, y, w, h, start, stop). yes.\n\ndrawingContext radial gradient each frame — allocating gradient per frame OK.\n\nOne more: overdrive screen shake translate inside push before stars drawn → stars shake too, fine; pop before vignette/HUD.\n\nflash drawn inside ADD before pop → good.\n\nEdge: `mousePressed` fires also when clicking... there's no UI. fine.\n\nFor the hint font: monospace everywhere.\n\nFinal check on hue mapping: sn 0 → hue 200 (azure/cyan). sn 1 → 200+150=350 (hot pink/red). Lerp path goes 200→350 increasing — through greens/yellows? 200→350 passes 250(blue), 280(purple), 320(magenta) — nice, avoids green/yellow since HSB hue 120=green is on the other side. Good.\n\nsin(time*0.25)*18 adds ±18 drift — at sn 0, hue wanders 182–218 (cyan-teal-blue). \n\nRibbon hue + t*45 similar family.\n\nNow write it. I'll add a brief comment header and organized sections. Also include fallback CDN? Just one CDN link (cdnjs 1.9.4). Could add jsdelivr fallback via onerror. Keep simple but robust: add small script that if p5 undefined, writes a fallback script tag? Skip — cdnjs is reliable.\n\nLet me write out everything now, carefully.\n\nAlso remember: user said response will be rendered in iframe in browser — full HTML in one code block, including script/link tags for external libs. Don't mention iframe. Provide short intro text maybe, then the code block. Keep prose minimal but can briefly describe interactions. I'll give a one-two line intro + controls summary after code? Better: brief intro, code, then 2-3 bullet lines about what to try. Keep concise.","reasoning_details":[{"type":"reasoning.text","text":"The user wants a p5.js animation that:\n1. Is interactive based on mouse cursor\n2. Has nice visualization\n3. Changes based on mouse speed (faster = more dramatic)\n4. Should be overboard and impressive\n\nLet me create something truly spectacular. Ideas:\n- Particle system with trails that respond to mouse velocity\n- Flow field that gets warped by mouse movement\n- Audio-reactive style visuals (without audio, but simulated)\n- Multiple layers of effects: particles, trails, ripples, glow\n- Speed-based color shifts, size changes, explosions\n\nLet me design a \"velocity-reactive particle universe\":\n1. Mouse position tracked with velocity calculation\n2. Particle emitters at mouse position - more particles when moving fast\n3. Speed affects:\n - Hue/color palette shifts\n - Particle count/size\n - Trail length\n - Ripple/shockwave effects\n - Background warp\n - Bloom intensity (simulated with blend modes)\n4. Additional flair:\n - Flow field particles that swirl around cursor\n - Shockwaves on fast movements\n - \"Gravity wells\" \n - Starfield background with parallax\n - Smooth lerped \"ghost\" cursors trailing behind\n - Color scheme that cycles through palettes\n - Screen shake on extreme speeds?\n - Connecting lines between nearby particles (constellation effect)\n\nLet me write a comprehensive p5.js sketch:\n\n```javascript\n// Features:\n// 1. Velocity-smoothed speed tracking\n// 2. Particle system with additive blending\n// 3. Shockwave rings when speed crosses thresholds\n// 4. Flow field background particles\n// 5. Ribbon/trail following cursor\n// 6. Color palette that shifts with speed\n// 7. Glow effects via layered drawing\n// 8. Speed meter HUD\n// 9. Screen warp/vignette\n// 10. Constellation connections\n```\n\nLet me code this carefully:\n\n```javascript\nlet particles = [];\nlet shockwaves = [];\nlet ribbons = [];\nlet flowParticles = [];\nlet stars = [];\n\nlet mouseTrail = [];\nlet smoothSpeed = 0;\nlet prevMouse;\n\nlet hueBase = 180;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n prevMouse = createVector(mouseX, mouseY);\n \n // starfield\n for (let i = 0; i < 200; i++) {\n stars.push({\n x: random(width),\n y: random(height),\n z: random(0.2, 1),\n size: random(1, 3)\n });\n }\n \n // ambient flow field particles\n for (let i = 0; i < 300; i++) {\n flowParticles.push(new FlowParticle());\n }\n}\n\nfunction draw() {\n // trail effect with alpha\n background(230, 60, 8, 0.25); // hmm, for trails use semi-transparent bg\n \n // calculate mouse velocity\n let m = createVector(mouseX, mouseY);\n let vel = p5.Vector.sub(m, prevMouse);\n let speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.15);\n let speedNorm = constrain(smoothSpeed / 50, 0, 1);\n \n // hue shifts with speed\n let targetHue = map(speedNorm, 0, 1, 190, 330); // cool blue -> hot magenta\n hueBase = lerp(hueBase, targetHue, 0.1);\n \n ...\n}\n```\n\nKey effects to make it \"overboard\":\n\n1. **Particle burst emitter** - emits particles from cursor, count proportional to speed. Particles have physics: drag, turbulence, glow.\n\n2. **Shockwaves** - when speed exceeds threshold, spawn expanding rings.\n\n3. **Velocity ribbons** - a ribbon mesh that follows cursor, width based on speed, gradient color.\n\n4. **Flow field** - Perlin noise field, ambient particles drift through it, and mouse creates a vortex force that bends them.\n\n5. **Vortex/gravity** - mouse acts as attractor or repulsor, stronger when moving fast. Actually, fast movement = repulsor (like stirring), slow = gentle attractor? Or swirl force perpendicular to velocity - creates nice stirring effect.\n\n6. **Constellation lines** - connect nearby particles with faint lines.\n\n7. **Starfield parallax** - background stars that shift slightly based on mouse movement (motion parallax / warp streaks when moving fast).\n\n8. **HUD** - speed gauge, particle count, maybe a circular speedometer.\n\n9. **Bloom** - use drawingContext shadowBlur sparingly, or use blendMode(ADD) with layered strokes. ADD blending with low alpha works great for glow.\n\n10. **Ghost cursors** - echo circles that follow with delay.\n\n11. **Screen shake** at extreme speeds - subtle translate.\n\n12. **Chromatic vignette** - radial gradient overlay.\n\nLet me also add a \"pulse\" ring that emanates from cursor continuously, size based on speed.\n\nFor performance: keep particle counts reasonable (cap ~1500), use simple shapes (points/lines/ellipses), avoid shadowBlur per particle (too slow) — instead use ADD blending with 2-3 layered ellipses or strokes.\n\nActually for glow: draw each particle twice — once large with low alpha, once small bright core. With blendMode(ADD) it looks like bloom.\n\nLet me structure:\n\n```javascript\nclass Particle {\n constructor(x, y, vel, hue, size, life) {...}\n update() {\n // drag, turbulence, vortex from mouse\n }\n show() {\n // glow layer + core\n }\n}\n```\n\nVortex force: given mouse position and velocity, particles near the cursor get pushed along the velocity direction plus perpendicular swirl. This makes \"stirring\" the particle field feel amazing.\n\nFlow field: `noise(x * s, y * s, t)` angle, ambient particles follow it, wrap around edges. Their hue slightly offset from base. They leave trails due to semi-transparent background.\n\nWait — conflict: semi-transparent background for trails means everything trails including bursts. That's actually fine and looks great. Use blendMode(BLEND) for background fade rect, then blendMode(ADD) for drawing.\n\nOrder in draw():\n1. blendMode(BLEND); noStroke(); fill(bgHue, 80, 10, 0.22); rect full screen. (fade trails)\n2. translate for screen shake.\n3. draw starfield (with parallax offset).\n4. blendMode(ADD);\n5. update/draw flow particles (lines from prev to current position).\n6. update/draw burst particles.\n7. draw constellation links (only among burst particles, limit checks — maybe use spatial hash or just check a subset).\n8. draw shockwaves.\n9. draw cursor aura: radial glow rings, rotating arc segments, pulsing core.\n10. draw ribbon trail along mouse history.\n11. HUD: speedometer arc, text.\n12. vignette overlay (BLEND mode).\n\nConstellation check: O(n²) with n=400 is 160k checks per frame — too much. Limit to every other frame and sample particles, or only check first ~150 particles. Or skip constellation and do something cheaper: connect particles emitted at similar times? Simpler: connect particles to their \"siblings\" spawned in same burst — creates web-like structures. Actually simpler constellation: for each particle, check next few in array (like 6 neighbors) — creates decent line web cheaply. Hmm, array order isn't spatial though.\n\nAlternative: grid-based neighbor lookup. Let me just do a simple spatial hash for burst particles; it's not that hard:\n\n```javascript\nlet grid = {};\nlet cellSize = 80;\nfor (p of particles) {\n let key = floor(p.pos.x/cellSize) + ',' + floor(p.pos.y/cellSize);\n (grid[key] ||= []).push(p);\n}\n// then for each particle check its cell + neighbors, draw line if dist < 60\n```\n\nThat works and is fast enough.\n\nRibbon: store mouse history points with speed; draw as triangle strip with width mapped from speed, hue gradient. Drawing triangle strips in p5: use beginShape(TRIANGLE_STRIP).\n\nCursor aura design:\n- Central glowing core (ellipse with layered alpha)\n- Rotating dashed arc segments (2-3 rings rotating different directions), radius pulsing with speed\n- Crosshair ticks\n- When speedNorm high: extra spiky rays emanating\n\nHUD:\n- Bottom-left: \"VELOCITY\" label + arc gauge + numeric readout + bar\n- Maybe mode text: when speedNorm > 0.75, \"OVERDRIVE\" with flashing color\n\nAlso add: mouse pressed = attract all particles toward cursor (gravity well), releasing creates explosion. That's a nice extra interaction! Click & hold to charge, release to detonate — pushing all particles outward with force based on charge time. That'll impress.\n\nLet me also add:\n- Subtle grid or nebula background? The stars cover it.\n- Idle behavior: when mouse hasn't moved, gentle ambient animation continues (flow particles, slow emitter drip).\n\nHandle first frames where mouseX/mouseY are 0: initialize prevMouse to center.\n\nWindow resize: resizeCanvas, keep stuff.\n\nLet me now write the whole thing carefully.\n\n```javascript\n// ============================================\n// NEBULA DRIVE — velocity-reactive particle universe\n// Move slow: calm drift. Move fast: overdrive.\n// Hold click: gravity well. Release: detonate.\n// ============================================\n\nlet burstParticles = [];\nlet flowParticles = [];\nlet shockwaves = [];\nlet stars = [];\nlet trail = [];\n\nlet prevMouse;\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet time = 0;\n\nlet charging = false;\nlet chargeStart = 0;\n\nconst MAX_PARTICLES = 900;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n prevMouse = createVector(width / 2, height / 2);\n \n for (let i = 0; i < 220; i++) {\n stars.push({\n x: random(width), y: random(height),\n z: random(0.15, 1),\n tw: random(TWO_PI)\n });\n }\n for (let i = 0; i < 260; i++) flowParticles.push(new FlowParticle());\n}\n\nfunction draw() {\n time += 0.016;\n \n // ---- velocity tracking ----\n let m = createVector(mouseX, mouseY);\n let vel = p5.Vector.sub(m, prevMouse);\n let speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.12);\n let sn = constrain(smoothSpeed / 60, 0, 1); // speed normal\n let overdrive = sn > 0.72;\n \n let targetHue = (200 + sn * 160) % 360;\n hueBase = lerpHue(hueBase, targetHue, 0.06);\n \n // ---- trail fade ----\n blendMode(BLEND);\n noStroke();\n fill(235, 70, 6, map(sn, 0, 1, 0.28, 0.16)); // faster = longer trails? lower alpha = longer trails\n rect(0, 0, width, height);\n \n // screen shake at overdrive\n if (overdrive) {\n translate(random(-1,1) * sn * 3, random(-1,1) * sn * 3);\n }\n \n // ---- stars with parallax ----\n drawStars(vel, sn);\n \n blendMode(ADD);\n \n // ---- flow field particles with mouse vortex ----\n updateFlow(m, vel, sn);\n \n // ---- emitters ----\n let emitCount = floor(map(sn, 0, 1, 1, 14));\n for (let i = 0; i < emitCount; i++) {\n spawnBurst(m, vel, sn);\n }\n \n // cap particles\n while (burstParticles.length > MAX_PARTICLES) burstParticles.shift();\n \n // ---- update & draw burst particles ----\n ...\n \n // ---- constellation ----\n drawConstellation();\n \n // ---- shockwaves ----\n if (smoothSpeed > 55 && frameCount % 4 === 0) {\n shockwaves.push({ x: m.x, y: m.y, r: 10, max: 120 + sn * 220, hue: hueBase });\n }\n updateShockwaves();\n \n // ---- cursor aura ----\n drawAura(m, vel, sn, overdrive);\n \n // ---- ribbon ----\n updateTrail(m, sn);\n drawRibbon(sn);\n \n // ---- charge / detonate ----\n if (charging) drawCharge(m);\n \n // ---- HUD ----\n blendMode(BLEND);\n drawHUD(sn, overdrive);\n \n prevMouse = m.copy();\n}\n```\n\nWait — the trail points and ribbon: store history of mouse positions with ages. Draw as triangle strip with hue gradient and alpha fade. \n\nlerpHue helper: handle wraparound.\n\n```javascript\nfunction lerpHue(a, b, t) {\n let d = ((b - a + 540) % 360) - 180;\n return (a + d * t + 360) % 360;\n}\n```\n\nFlowParticle:\n\n```javascript\nclass FlowParticle {\n constructor() { this.reset(); }\n reset() {\n this.pos = createVector(random(width), random(height));\n this.prev = this.pos.copy();\n this.vel = createVector();\n this.hueOff = random(-30, 30);\n this.speed = random(0.5, 1.6);\n this.life = random(100, 400);\n }\n update(m, vel, sn) {\n this.prev = this.pos.copy();\n let a = noise(this.pos.x * 0.0022, this.pos.y * 0.0022, time * 0.15) * TWO_PI * 2;\n let f = p5.Vector.fromAngle(a).mult(this.speed);\n \n // mouse vortex\n let d = p5.Vector.sub(this.pos, m);\n let dist = d.mag();\n if (dist < 260 && dist > 1) {\n d.normalize();\n // swirl: perpendicular\n let swirl = createVector(-d.y, d.x).mult(map(sn,0,1, 0.6, 6) * (1 - dist/260));\n let push = d.copy().mult(sn * 2.5 * (1 - dist/260));\n f.add(swirl).add(push);\n }\n \n if (charging) {\n let dd = p5.Vector.sub(m, this.pos);\n let l = max(dd.mag(), 20);\n f.add(dd.normalize().mult(120 / l));\n }\n \n this.vel.lerp(f, 0.08);\n this.pos.add(this.vel);\n this.life--;\n \n if (this.life < 0 || this.pos.x < -20 || this.pos.x > width+20 || this.pos.y < -20 || this.pos.y > height+20) {\n this.reset();\n this.prev = this.pos.copy();\n }\n }\n show() {\n stroke((hueBase + this.hueOff + 360) % 360, 60, 90, 0.5);\n strokeWeight(1.2);\n line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);\n }\n}\n```\n\nBurst particle:\n\n```javascript\nfunction spawnBurst(m, vel, sn) {\n let baseAng = vel.heading();\n let spread = random(-1, 1) * map(sn, 0, 1, PI, 0.5);\n // spray backwards from movement direction + some randomness\n let ang = baseAng + PI + random(-0.6, 0.6);\n if (vel.mag() < 1) ang = random(TWO_PI);\n let sp = random(1, 3 + sn * 10);\n burstParticles.push({\n pos: m.copy().add(p5.Vector.random2D().mult(random(4))),\n vel: p5.Vector.fromAngle(ang).mult(sp).add(p5.Vector.mult(vel, 0.35)),\n size: random(2, 4 + sn * 8),\n hue: (hueBase + random(-25, 25) + 360) % 360,\n life: 1,\n decay: random(0.008, 0.02 + sn * 0.02),\n spin: random(-0.1, 0.1)\n });\n}\n```\n\nUpdate burst particles: drag, slight turbulence, vortex pull, fade. Draw: glow (big, low alpha) + core (small, bright). Also streak: line from pos-vel to pos for motion blur feel. Streaks look great. Maybe draw as line with glow: two lines — thick low alpha, thin bright.\n\nActually to save perf, draw each burst particle as a streak line (from pos - vel*2 to pos) with 2 passes. Good.\n\nConstellation: spatial hash on burstParticles, draw lines between close ones, alpha by distance. Do it every frame but only for particles with life > 0.3, and cap lines.\n\nShockwave: expanding ring, 2-3 concentric ellipses, alpha fading, strokeWeight decreasing. Also spawn a few debris particles on shockwave spawn? Fine as is.\n\nAura (cursor): \n- big soft glow circle (radial: draw concentric circles decreasing alpha) — cheaper: 4-5 ellipses.\n- rotating arcs: arc() with start/stop, dashed appearance via multiple small arcs.\n- inner crosshair ticks rotating opposite.\n- rays when overdrive: N lines emanating outward with random jitter.\n- text? no.\n\nAlso draw the smoothSpeed as pulsing aura radius: auraR = 30 + sn * 70 + sin(time*6)*4.\n\nCharge (mouse held): \n- charging = true on mousePressed, record chargeStart.\n- While charging: particles pulled toward cursor (both flow and burst), draw growing energy ball with flickering, converge rings.\n- On release: detonate — force = f(chargeTime), push everything radially, spawn big shockwave + burst of 100 particles, flash.\n\nDetonate:\n\n```javascript\nfunction detonate(m, power) {\n shockwaves.push({x:m.x, y:m.y, r: 5, max: 300 + power*400, hue: hueBase, thick: true});\n for (p of burstParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 10);\n p.vel.add(d.normalize().mult(power * 500 / l));\n }\n for (p of flowParticles) { similar }\n for (let i = 0; i < 60 + power*80; i++) spawn radial burst particle\n}\n```\n\nHUD design:\n- bottom left panel: \"VELOCITY\" text, bar with gradient, percentage.\n- circular gauge around... maybe arc in corner.\n- \"OVERDRIVE\" flashing text when overdrive.\n- instructions center-top fading in at start: \"move slow — drift · move fast — ignite · hold click — collapse · release — detonate\", fade out after first interaction or after 8 seconds.\n\nFont: use default sans, textFont('monospace') for techy feel? Use 'Courier New' monospace. Or just default. I'll style: small caps letter spacing (can't easily do letter-spacing in p5; just use text with spaces like \"V E L O C I T Y\").\n\nVignette: radial gradient via drawingContext at the end (BLEND mode):\n\n```javascript\nlet g = drawingContext.createRadialGradient(cx, cy, min(width,height)*0.3, cx, cy, max(width,height)*0.75);\ng.addColorStop(0, 'rgba(0,0,0,0)');\ng.addColorStop(1, 'rgba(0,0,0,0.45)');\ndrawingContext.fillStyle = g;\ndrawingContext.fillRect(0,0,width,height);\n```\n\nThat's fine perf-wise.\n\nAlso, full HTML page styling: black background, no margins, hide cursor (custom cursor drawn in canvas — yes, hide system cursor for immersion: `cursor: none` in CSS and draw our own aura). p5 has `noCursor()`. But on HUD interactions... no buttons, fine. Use noCursor() and draw everything.\n\nEdge: touch devices — mouseX/mouseY work with touch in p5. Fine.\n\nPerformance considerations:\n- flowParticles 260 lines + glow? Just single line each, alpha 0.5 — fine.\n- burst up to 900, two stroke passes = 1800 line draws — should be OK on desktop. Maybe reduce to glow pass only every other... Let's keep MAX 800 and two passes; modern machines handle it. Could also scale: if frameRate drops below 45, reduce emission. Add simple adaptive quality: track avg frameRate, scale emitCount multiplier. Nice touch, include it.\n\nConstellation with spatial hash over 800 particles: each particle checks 9 cells... total distance checks maybe ~5-10k. Fine. Cap total lines drawn at 300.\n\nLet me write the final code cleanly, then wrap in HTML with p5 CDN.\n\nAlso the intro hint text and a title \"N E B U L A // D R I V E\" top-left? Keep subtle.\n\nColor approach: hueBase cycles 200 (cyan/blue) → 360/0 (magenta/red) at top speed. Overdrive: white-hot cores.\n\nRibbon: store last ~40 mouse points with timestamps. Draw triangle strip:\nfor each point i, compute direction to next, perpendicular normal, width w_i = map based on age & speed stored. Left/right vertices. fill hue gradient. With ADD blending, ribbon glows. Also draw a bright center line through points (polyline) for the \"energy blade\" look.\n\nActually a really nice effect: the ribbon width proportional to speed at that point → fast movement = wide blade, slow = thin. Looks like light-saber trail.\n\nImplementation detail: to draw gradient triangle strip in p5, set fill per vertex — p5 supports fill() between vertex() calls with beginShape(TRIANGLE_STRIP)? In WebGL yes; in 2D canvas, per-vertex fill isn't supported — the shape uses single fill. Hmm. So for 2D renderer, draw ribbon as sequence of quads, each quad filled with interpolated hue/alpha. That works: for each segment, draw a quad (two tris or just quad()) with fill set per segment. ADD blending, low alpha — looks good.\n\nLet me write ribbon:\n\n```javascript\nfunction drawRibbon() {\n if (trail.length < 2) return;\n noStroke();\n for (let i = 0; i < trail.length - 1; i++) {\n let p0 = trail[i], p1 = trail[i+1];\n let t = i / trail.length; // 0 oldest -> 1 newest? depends on push order\n let dir = p5.Vector.sub(p1.p, p0.p);\n if (dir.mag() < 0.1) continue;\n dir.normalize();\n let n = createVector(-dir.y, dir.x);\n let w0 = p0.w, w1 = p1.w;\n let hue = (hueBase + t * 40) % 360;\n fill(hue, 80, 100, 0.05 + t * 0.1);\n quad(\n p0.p.x + n.x*w0, p0.p.y + n.y*w0,\n p0.p.x - n.x*w0, p0.p.y - n.y*w0,\n p1.p.x - n.x*w1, p1.p.y - n.y*w1,\n p1.p.x + n.x*w1, p1.p.y + n.y*w1\n );\n }\n}\n```\n\nStore trail as newest at end; age out points older than 500ms or fixed count 45. w = (2 + snAtPoint * 14) * fadeByIndex.\n\nHmm wait: p0.w where older points should taper to 0 at the oldest end — multiply by t (i/len) so oldest is thin.\n\nAlso add center bright polyline:\n\n```javascript\nstroke(hue, 60, 100, 0.6); strokeWeight(2); // segments\n```\n\nDraw segment lines with per-segment stroke. OK.\n\nMouse vortex applied to burst particles too (stirring). Yes — apply same swirl, scaled.\n\nAdaptive quality:\n\n```javascript\nlet quality = 1;\nif (frameCount % 60 === 0) {\n let fr = frameRate();\n if (fr < 45 && quality > 0.4) quality -= 0.1;\n else if (fr > 55 && quality < 1) quality += 0.05;\n}\nemitCount = floor(emitCount * quality);\n```\n\nAlso cap flowParticles count by quality — skip drawing some.\n\nIntro overlay: draw text with alpha that fades after 6 seconds or after speed first exceeds threshold. Track `interacted` flag.\n\nLet me also make hue drift slowly over time even at rest for ambient color life: hueBase target adds sin(time*0.1)*20.\n\nDetonation flash: white rect with alpha fading quickly (ADD mode, alpha ~0.5 → decays).\n\nShockwave class:\n\n```javascript\nfunction updateShockwaves() {\n for (let i = shockwaves.length-1; i >= 0; i--) {\n let s = shockwaves[i];\n s.r += (s.max - s.r) * 0.08 + 2;\n let t = s.r / s.max;\n let a = (1 - t);\n noFill();\n for (let k = 0; k < 3; k++) {\n stroke(s.hue, 70, 100, a * (0.5 - k*0.12));\n strokeWeight((s.thick? 8:4) * (1-t) + 1);\n ellipse(s.x, s.y, s.r*2 - k*14);\n }\n if (t >= 1) shockwaves.splice(i,1);\n }\n}\n```\n\nAura drawing:\n\n```javascript\nfunction drawAura(m, vel, sn, overdrive) {\n push();\n translate(m.x, m.y);\n let pulse = 1 + sin(time * 5) * 0.06;\n let R = (34 + sn * 80) * pulse;\n \n // soft glow\n noStroke();\n for (let i = 5; i > 0; i--) {\n fill(hueBase, 80, 100, 0.03 + sn*0.015);\n ellipse(0, 0, R * 2.4 * i / 5 + 20);\n }\n \n // rotating arcs\n noFill();\n for (let ring = 0; ring < 3; ring++) {\n let rr = R * (0.7 + ring * 0.35);\n let dirRot = time * (ring % 2 === 0 ? 1 : -1) * (1 + sn * 3);\n let segs = 3 + ring;\n strokeWeight(1.5 + sn * 2.5);\n for (let sgt = 0; sgt < segs; sgt++) {\n let a0 = dirRot + sgt * TWO_PI / segs;\n stroke((hueBase + ring * 20) % 360, 70, 100, 0.55);\n arc(0, 0, rr*2, rr*2, a0, a0 + TWO_PI/segs * 0.55);\n }\n }\n \n // ticks\n ...\n \n // overdrive rays\n if (overdrive) {\n let n = 14;\n for (let i = 0; i < n; i++) {\n let a = i * TWO_PI/n + time*2;\n let len = R * 1.2 + random(20, 60) * sn;\n stroke((hueBase + 40)%360, 60, 100, random(0.2, 0.7));\n strokeWeight(random(1, 3));\n line(cos(a)*R*0.8, sin(a)*R*0.8, cos(a)*(R*0.8+len), sin(a)*(R*0.8+len));\n }\n }\n \n // core\n noStroke();\n fill((hueBase+180)%360, 40, 100, 0.9); // contrasting core? or white\n ellipse(0,0, 6 + sn*10);\n fill(0, 0, 100, 0.9);\n ellipse(0,0, 3 + sn*5);\n pop();\n}\n```\n\nCore white-hot looks good.\n\nCharge effect drawing:\n\n```javascript\nfunction drawCharge(m) {\n let ct = (millis() - chargeStart) / 1000;\n let power = constrain(ct / 2.5, 0, 1);\n push();\n translate(m.x, m.y);\n // converging rings\n for (let i = 0; i < 4; i++) {\n let rr = (200 * (1 - power)) * ((time*2 + i*0.25) % 1);\n stroke(0,0,100, 0.3*(1-((time*2+i*0.25)%1)));\n noFill();\n ellipse(0,0, rr*2);\n }\n // jittery energy ball\n noStroke();\n let br = 10 + power * 50 + random(-3,3);\n fill(hueBase, 60, 100, 0.35);\n ellipse(0,0, br*2.4);\n fill(0,0,100, 0.7 + power*0.3);\n ellipse(0,0, br);\n // sparks\n for (let i=0;i<6*power+2;i++){\n let a = random(TWO_PI);\n let rr = br + random(60*(1-power)+10);\n stroke(0,0,100,0.6);\n line(cos(a)*rr, sin(a)*rr, cos(a)*br*0.5, sin(a)*br*0.5);\n }\n pop();\n}\n```\n\nDetonate on release:\n\n```javascript\nfunction mouseReleased() {\n if (!charging) return;\n charging = false;\n let ct = (millis() - chargeStart)/1000;\n let power = constrain(ct/2.5, 0.15, 1);\n let m = createVector(mouseX, mouseY);\n shockwaves.push({x:m.x,y:m.y,r:8,max:250+power*500,hue:hueBase,thick:true});\n flash = 0.35 + power*0.4;\n for (let p of burstParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 12);\n p.vel.add(d.mult((6 + power*26) * 60/l));\n }\n for (let p of flowParticles) {\n let d = p5.Vector.sub(p.pos, m);\n let l = max(d.mag(), 12);\n p.vel.add(d.mult((3 + power*12) * 80/l));\n }\n let n = floor(80 + power*160);\n for (let i = 0; i < n; i++) {\n let a = random(TWO_PI);\n let sp = random(2, 6 + power*16);\n burstParticles.push({...});\n }\n}\n```\n\nNote d.mult mutates d after normalize — write carefully: `d.normalize().mult(...)`. Since l computed before. Wait I wrote `d.mult((...) * 60/l)` — d not normalized; |d|=l, so d.mult(k/l) gives magnitude k. Actually that normalizes implicitly: d * (K/l) has magnitude K. OK that works: `p.vel.add(d.mult(K / l))` where K = 6 + power*26... but mutating d fine.\n\nHmm, but better physical feel: closer particles get more push → magnitude should fall with distance: K2 = (6+power*26) * (100/l)? Might be extreme near center; clamp. I'll use magnitude = (4 + power * 20) * constrain(140 / l, 0.3, 3). Fine.\n\nFlash: after drawing everything, ADD rect white with flash alpha, decay flash *= 0.85. Draw before HUD.\n\nmousePressed: charging = true; chargeStart = millis(); Also while charging, spawn inward-streaming particles? The pull on flow + burst particles suffices, plus sparks drawn.\n\nAlso prevent context menu? Only left click matters; fine.\n\nHUD:\n\n```javascript\nfunction drawHUD(sn, overdrive) {\n // bottom-left velocity gauge\n let x = 28, y = height - 40;\n noStroke();\n textFont('monospace');\n textSize(10);\n fill(0, 0, 100, 0.5);\n text('V E L O C I T Y', x, y - 18);\n // bar bg\n fill(0, 0, 100, 0.12);\n rect(x, y - 12, 220, 6, 3);\n // bar fill\n let w = 220 * sn;\n for (let i = 0; i < w; i += 4) { gradient } \n```\n\nSimpler: draw fill rect with hueBase color plus bright tip. Also numeric: text(nf(sn*100,1,0) ...) maybe value in \"px/frame\": text(floor(smoothSpeed) + ' px/f').\n\nOverdrive text: center top? flashing near gauge: if overdrive, text('◆ OVERDRIVE', x + 230...) with alpha oscillating.\n\nTitle top-left: 'NEBULA//DRIVE' small, alpha 0.35. Hint bottom-center fading.\n\nParticle count display maybe top-right: 'ENTITIES: n'. Cute. Keep minimal: title + gauge + hint.\n\nInstructions hint: \"drift slowly · move fast to ignite · hold click to collapse · release to detonate\" at bottom center, fades out after user reaches overdrive once or after 12s.\n\nStars with parallax & warp:\n\n```javascript\nfunction drawStars(vel, sn) {\n noStroke();\n for (let s of stars) {\n s.x -= vel.x * 0.05 * s.z;\n s.y -= vel.y * 0.05 * s.z;\n // wrap\n ...\n let tw = 0.5 + 0.5 * sin(time*2 + s.tw);\n fill(220, 20, 90, 0.25 + 0.45 * tw * s.z);\n let sz = s.z * 2.2;\n ellipse(s.x, s.y, sz);\n // warp streaks at high speed\n if (sn > 0.5) {\n stroke(220, 15, 100, (sn-0.5)*0.5*s.z);\n strokeWeight(sz*0.5);\n line(s.x, s.y, s.x + vel.x*0.6*s.z*sn, s.y + vel.y*0.6*s.z*sn);\n noStroke();\n }\n }\n}\n```\n\nThis gives motion parallax: stars shift opposite mouse movement. \n\nNow the bg fade fill color: deep space blue-purple: fill(240, 75, 5, alpha). With ADD blending on top, blacks stay black. Note: fade rect uses BLEND with HSB color — dark blue fill with alpha. Good. Alpha higher = shorter trails. At high speed, want longer trails: alpha = lerp(0.30, 0.14, sn)? I said map(sn,0,1,0.28,0.16) — yes.\n\nAlso first frame: clear background to solid: background(240, 75, 5) in setup.\n\nTrail storing: \n\n```javascript\ntrail.push({ p: m.copy(), w: (2 + sn * 16), t: time });\nwhile (trail.length > 46) trail.shift();\n```\n\nEven when idle it keeps adding points at same spot — fine, ribbon collapses.\n\nIn drawRibbon, multiply width by taper: wi = p.w * (i / trail.length).\n\nAlso hue for ribbon segments: shift toward white core at newest: fill(hue, 80 - t*40, 100, alpha).\n\nConstellation detail:\n\n```javascript\nfunction drawConstellation() {\n let cell = 90;\n let grid = new Map();\n for (let p of burstParticles) {\n if (p.life < 0.35) continue;\n let k = floor(p.pos.x / cell) + '_' + floor(p.pos.y / cell);\n if (!grid.has(k)) grid.set(k, []);\n grid.get(k).push(p);\n }\n let drawn = 0;\n strokeWeight(1);\n for (let p of burstParticles) {\n if (p.life < 0.35) continue;\n let cx = floor(p.pos.x/cell), cy = floor(p.pos.y/cell);\n for (let ix = cx; ix <= cx+1; ix++) for (let iy = cy-1; iy <= cy+1; iy++) {\n // only forward neighbors to avoid duplicates... \n }\n }\n}\n```\n\nDuplicate lines are okay-ish in ADD mode but slightly brighter; avoid by only checking half the neighborhood (cells with greater index ordering) and within same cell only pairs where index j > i. Simpler: accept duplicates? Lines drawn twice = brighter = actually fine glow. But perf doubles. Let's do the proper half-neighborhood:\n\nStandard approach: for each particle at cell (cx,cy), check cells (cx,cy), (cx+1,cy), (cx-1,cy+1), (cx,cy+1), (cx+1,cy+1) — hmm that's for 2D avoiding duplicates: check east, and the three southern-ish cells. Plus within-cell j>i. Neighborhood offsets: (0,0) with j>i, (1,0), (-1,1), (0,1), (1,1). That covers all unique pairs within distance cell. Distance cutoff 70.\n\nCap lines: if drawn > 260 return.\n\nAlpha = (1 - d/70) * 0.35 * min(p.life, q.life).\n\nOK.\n\nNow — order of drawing matters with ADD. Also the fade rect must be drawn before shake translate? translate after fade rect, then everything moves including HUD? HUD shouldn't shake. So push/translate after fade, pop before HUD. But flash + vignette: flash inside shake (fine), vignette after pop (screen-space). Let me organize:\n\n```\ndraw():\n compute vel/speed/sn/hue\n blendMode(BLEND); fade rect\n push(); if overdrive translate shake\n drawStars\n blendMode(ADD)\n updateFlow+show\n emit\n update+show burst\n constellation\n shockwaves\n ribbon\n aura\n charge visuals (if charging)\n flash rect (ADD white, alpha=flash); flash *= 0.86\n pop()\n blendMode(BLEND)\n vignette\n HUD\n hint text\n prevMouse update\n```\n\nWait — flow particle update needs m and vel — fine.\n\nOne more wow: **idle comet** — if mouse idle for > 3s, spawn a slow orbiting drone around the last mouse pos emitting particles so screen never goes dead? The flow field already keeps alive. Skip extra complexity; ambient flow + star twinkle suffice.\n\nAlso hue drift: hueBase target = (200 + sn*150 + sin(time*0.2)*15 + 360)%360.\n\nText rendering with ADD? Draw HUD in BLEND after vignette — crisp white text. Good.\n\nCursor: noCursor() in setup. Also CSS cursor:none on canvas for safety.\n\nResize: resizeCanvas + regenerate stars spread; keep particles.\n\nLet me also add subtle **nebula blobs**: a few large, very low-alpha radial blobs drifting slowly (noise-based positions) in ADD mode behind everything, hue near hueBase. Draw 4 blobs: ellipse big with alpha 0.02 layered ×3. Cheap, adds depth. Position: center + sin/cos(time*speed + offset) * range.\n\nNow let me carefully write the final HTML file.\n\nAlso ensure `pixelDensity(1)` maybe for perf on retina? particle-heavy — set pixelDensity(min(1.5, displayDensity()))? Keep default; adaptive quality handles it. Actually retina Macs: pixelDensity 2 = 4x pixels; fade rects + many strokes might chug. I'll set pixelDensity(1) explicitly for perf, slight blur acceptable... Actually strokes look crisper at density 2 but glow aesthetic tolerates density 1 well. Go pixelDensity(1).\n\nHmm, but text HUD at density 1 on retina looks blurry. Compromise: pixelDensity(Math.min(2, displayDensity())) but rely on adaptive quality. I'll keep adaptive quality + full density; if user machine slow, quality drops. Fine. Actually let me just cap at 1.5? Eh — simplest: leave default (matches display). Adaptive quality kicks in. OK.\n\nWrite the code:\n\n```html\n\n\n\n\nNEBULA // DRIVE\n\n\n\n\n\n\n\n```\n\nNow full sketch. Let me be careful with all variables and functions.\n\n```javascript\n'use strict';\n\nlet burstParticles = [];\nlet flowParticles = [];\nlet shockwaves = [];\nlet stars = [];\nlet trail = [];\nlet nebulaBlobs = [];\n\nlet prevMouse;\nlet smoothSpeed = 0;\nlet hueBase = 200;\nlet time = 0;\nlet flash = 0;\nlet quality = 1;\nlet interacted = false;\nlet startTime;\n\nlet charging = false;\nlet chargeStart = 0;\n\nconst MAX_PARTICLES = 850;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n colorMode(HSB, 360, 100, 100, 1);\n noCursor();\n prevMouse = createVector(width/2, height/2);\n startTime = millis();\n background(240, 80, 4);\n\n for (let i = 0; i < 240; i++) {\n stars.push({ x: random(width), y: random(height), z: random(0.12, 1), tw: random(TWO_PI) });\n }\n for (let i = 0; i < 280; i++) flowParticles.push(new FlowParticle());\n for (let i = 0; i < 5; i++) {\n nebulaBlobs.push({ off: random(1000), sp: random(0.05, 0.14), r: random(180, 420), hueOff: random(-40, 40) });\n }\n}\n```\n\ndraw():\n\n```javascript\nfunction draw() {\n time += 1/60;\n\n const m = createVector(mouseX, mouseY);\n const vel = p5.Vector.sub(m, prevMouse);\n const speed = vel.mag();\n smoothSpeed = lerp(smoothSpeed, speed, 0.12);\n const sn = constrain(smoothSpeed / 55, 0, 1);\n const overdrive = sn > 0.7;\n if (sn > 0.25) interacted = true;\n\n const targetHue = (200 + sn * 150 + sin(time * 0.25) * 18 + 360) % 360;\n hueBase = lerpHue(hueBase, targetHue, 0.05);\n\n // adaptive quality\n if (frameCount % 45 === 0) {\n const fr = frameRate();\n if (fr < 42 && quality > 0.35) quality -= 0.12;\n else if (fr > 54 && quality < 1) quality += 0.06;\n }\n\n // fade\n blendMode(BLEND);\n noStroke();\n fill(238, 80, 4, lerp(0.3, 0.15, sn));\n rect(0, 0, width, height);\n\n push();\n if (overdrive) translate(random(-1,1)*sn*3.5, random(-1,1)*sn*3.5);\n\n drawStars(vel, sn);\n drawNebula();\n\n blendMode(ADD);\n\n updateFlow(m, vel, sn);\n\n // emit\n let emit = floor(map(sn, 0, 1, 1.5, 15) * quality);\n for (let i = 0; i < emit; i++) spawnBurst(m, vel, sn);\n while (burstParticles.length > MAX_PARTICLES * quality) burstParticles.shift();\n\n updateBurst(m, vel, sn);\n drawConstellation();\n\n if (smoothSpeed > 46 && frameCount % 5 === 0) {\n shockwaves.push({ x: m.x, y: m.y, r: 12, max: 130 + sn * 260, hue: hueBase, thick: false });\n }\n updateShockwaves();\n\n updateTrail(m, sn);\n drawRibbon();\n\n if (charging) drawCharge(m);\n drawAura(m, vel, sn, overdrive);\n\n if (flash > 0.01) {\n noStroke();\n fill(0, 0, 100, flash);\n rect(-20, -20, width + 40, height + 40);\n flash *= 0.85;\n }\n pop();\n\n blendMode(BLEND);\n drawVignette();\n drawHUD(sn, overdrive);\n drawHint();\n\n prevMouse = m.copy();\n}\n```\n\nNote: flash rect drawn in ADD mode — white add = flash. But it's inside push with shake translate; rect covers extra margin. OK. But flash uses fill(0,0,100,flash) HSB white. ADD white — good.\n\nHmm: `flash` in ADD mode with HSB: fill(0,0,100,flash) — white. good.\n\nFlowParticle with hueBase global — show uses global hueBase + hueOff. fine.\n\nupdateFlow:\n\n```javascript\nfunction updateFlow(m, vel, sn) {\n const n = floor(flowParticles.length * quality);\n for (let i = 0; i < n; i++) {\n const p = flowParticles[i];\n p.update(m, sn);\n p.show();\n }\n}\n```\n\nFlowParticle.update(m, sn) uses global time & charging.\n\n```javascript\nclass FlowParticle {\n constructor() { this.reset(true); }\n reset(init) {\n this.pos = createVector(random(width), random(height));\n this.prev = this.pos.copy();\n this.vel = p5.Vector.random2D().mult(0.5);\n this.hueOff = random(-35, 35);\n this.maxSp = random(0.6, 1.8);\n this.life = init ? random(60, 500) : 500;\n }\n update(m, sn) {\n this.prev.x = this.pos.x;\n this.prev.y = this.pos.y;\n const ang = noise(this.pos.x * 0.0021, this.pos.y * 0.0021, time * 0.12) * TWO_PI * 2.2;\n const f = p5.Vector.fromAngle(ang).mult(this.maxSp);\n\n const dx = this.pos.x - m.x, dy = this.pos.y - m.y;\n const d = Math.hypot(dx, dy);\n if (d < 300 && d > 0.5) {\n const fall = 1 - d / 300;\n const inv = 1 / d;\n // swirl (perpendicular) + slight push outward when fast\n const sw = lerp(0.5, 7, sn) * fall;\n f.x += (-dy * inv) * sw + dx * inv * sn * 3.2 * fall;\n f.y += ( dx * inv) * sw + dy * inv * sn * 3.2 * fall;\n }\n if (charging) {\n const gx = m.x - this.pos.x, gy = m.y - this.pos.y;\n const gd = Math.max(Math.hypot(gx, gy), 24);\n f.x += gx / gd * 2.6;\n f.y += gy / gd * 2.6;\n }\n this.vel.x = lerp(this.vel.x, f.x, 0.07);\n this.vel.y = lerp(this.vel.y, f.y, 0.07);\n this.pos.x += this.vel.x;\n this.pos.y += this.vel.y;\n if (--this.life < 0 || this.pos.x < -30 || this.pos.x > width + 30 || this.pos.y < -30 || this.pos.y > height + 30) {\n this.reset(false);\n this.prev = this.pos.copy();\n }\n }\n show() {\n stroke((hueBase + this.hueOff + 360) % 360, 55, 95, 0.45);\n strokeWeight(1.1);\n line(this.prev.x, this.prev.y, this.pos.x, this.pos.y);\n }\n}\n```\n\nspawnBurst:\n\n```javascript\nfunction spawnBurst(m, vel, sn) {\n let ang;\n if (vel.magSq() > 0.5) ang = vel.heading() + PI + random(-0.7, 0.7);\n else ang = random(TWO_PI);\n const sp = random(0.6, 2.5 + sn * 11);\n burstParticles.push({\n pos: createVector(m.x + random(-3, 3), m.y + random(-3, 3)),\n vel: p5.Vector.fromAngle(ang).mult(sp).add(p5.Vector.mult(vel, random(0.15, 0.4))),\n size: random(1.5, 3.5 + sn * 7),\n hue: (hueBase + random(-28, 28) + 360) % 360,\n life: 1,\n decay: random(0.006, 0.014 + sn * 0.02),\n });\n}\n```\n\nupdateBurst: apply drag, turbulence, swirl, charging pull, draw streaks.\n\n```javascript\nfunction updateBurst(m, vel, sn) {\n for (let i = burstParticles.length - 1; i >= 0; i--) {\n const p = burstParticles[i];\n // drag\n p.vel.mult(0.965);\n // turbulence\n const tA = noise(p.pos.x * 0.004, p.pos.y * 0.004, time * 0.3) * TWO_PI;\n p.vel.x += cos(tA) * 0.12;\n p.vel.y += sin(tA) * 0.12;\n // swirl around cursor\n const dx = p.pos.x - m.x, dy = p.pos.y - m.y;\n const d = Math.hypot(dx, dy);\n if (d < 240 && d > 0.5) {\n const fall = 1 - d / 240, inv = 1 / d;\n const sw = lerp(0.2, 4.5, sn) * fall;\n p.vel.x += (-dy * inv) * sw;\n p.vel.y += ( dx * inv) * sw;\n }\n if (charging) {\n const gx = m.x - p.pos.x, gy = m.y - p.pos.y;\n const gd = Math.max(Math.hypot(gx, gy), 20);\n p.vel.x += gx / gd * 1.4;\n p.vel.y += gy / gd * 1.4;\n }\n const px = p.pos.x, py = p.pos.y;\n p.pos.x += p.vel.x;\n p.pos.y += p.vel.y;\n p.life -= p.decay;\n if (p.life <= 0) { burstParticles.splice(i, 1); continue; }\n\n const a = p.life;\n // glow streak\n stroke(p.hue, 85, 100, 0.10 * a);\n strokeWeight(p.size * 3.2);\n line(px - p.vel.x * 1.5, py - p.vel.y * 1.5, p.pos.x, p.pos.y);\n // core streak\n stroke(p.hue, 40, 100, 0.85 * a);\n strokeWeight(max(0.8, p.size * 0.55));\n line(px - p.vel.x * 1.5, py - p.vel.y * 1.5, p.pos.x, p.pos.y);\n }\n}\n```\n\nNote splicing while iterating backwards — fine.\n\ndrawConstellation as planned.\n\n```javascript\nfunction drawConstellation() {\n const cell = 80, maxD = 70;\n const grid = new Map();\n for (const p of burstParticles) {\n if (p.life < 0.3) continue;\n const k = floor(p.pos.x / cell) + ',' + floor(p.pos.y / cell);\n let arr = grid.get(k);\n if (!arr) { arr = []; grid.set(k, arr); }\n arr.push(p);\n }\n strokeWeight(1);\n let drawn = 0;\n const offs = [[0,0],[1,0],[-1,1],[0,1],[1,1]];\n for (const p of burstParticles) {\n if (p.life < 0.3) continue;\n const cx = floor(p.pos.x / cell), cy = floor(p.pos.y / cell);\n for (const [ox, oy] of offs) {\n const arr = grid.get((cx + ox) + ',' + (cy + oy));\n if (!arr) continue;\n for (const q of arr) {\n if (q === p) continue;\n if (ox === 0 && oy === 0 && q.id <= p.id) continue; // hmm need ids\n ...\n }\n }\n }\n}\n```\n\nIDs: simpler to skip dedup and accept double-drawn lines (ADD → slightly brighter, looks like stronger links). Actually simplest correct dedup: within same cell only pair with index check using object reference index — I can store index in array iteration. Or: compare object references via `if (q === p) continue;` and accept duplicates from cross-cells? Cross-cell pairs appear once because we only check 4 directional offsets + same cell. Same-cell pairs appear twice (p sees q, q sees p). Fix with reference comparison trick: can't order objects easily... assign each particle an incrementing id at spawn. Add `id: nextId++`. Then same-cell: `if (q.id <= p.id) continue;`. Easy.\n\nBut wait, with only forward offsets, pair p in cell A, q in cell B where B is west of A: p checks east (sees q? no, q is west), q checks east → sees p. Covered. Good — the 5-offset scheme covers all pairs exactly once with the same-cell id rule.\n\nCap: `if (drawn > 280) return;`\n\ndrawRibbon and trail:\n\n```javascript\nfunction updateTrail(m, sn) {\n trail.push({ x: m.x, y: m.y, w: 2.5 + sn * 17 });\n if (trail.length > 44) trail.shift();\n}\n\nfunction drawRibbon() {\n const n = trail.length;\n if (n < 3) return;\n noStroke();\n for (let i = 0; i < n - 1; i++) {\n const p0 = trail[i], p1 = trail[i + 1];\n let dx = p1.x - p0.x, dy = p1.y - p0.y;\n const L = Math.hypot(dx, dy);\n if (L < 0.5) continue;\n dx /= L; dy /= L;\n const t0 = i / n, t1 = (i + 1) / n;\n const w0 = p0.w * t0, w1 = p1.w * t1;\n const hue = (hueBase + t0 * 45) % 360;\n fill(hue, 85 - t0 * 45, 100, 0.04 + t0 * 0.10);\n quad(\n p0.x - dy * w0, p0.y + dx * w0,\n p0.x + dy * w0, p0.y - dx * w0,\n p1.x + dy * w1, p1.y - dx * w1,\n p1.x - dy * w1, p1.y + dx * w1\n );\n }\n // bright spine\n for (let i = 0; i < n - 1; i++) {\n const p0 = trail[i], p1 = trail[i + 1];\n const t = i / n;\n stroke((hueBase + t * 45) % 360, 25, 100, t * 0.7);\n strokeWeight(1 + t * 2);\n line(p0.x, p0.y, p1.x, p1.y);\n }\n}\n```\n\nPerpendicular: normal to (dx,dy) is (-dy,dx). Points: p + n*w. I wrote (x - dy*w, y + dx*w) = p + n*w with n=(-dy,dx). Yes.\n\ndrawAura: as above plus tick marks.\n\n```javascript\nfunction drawAura(m, vel, sn, overdrive) {\n push();\n translate(m.x, m.y);\n const pulse = 1 + sin(time * 6) * 0.05;\n const R = (30 + sn * 85) * pulse;\n\n // layered glow\n noStroke();\n for (let i = 6; i >= 1; i--) {\n fill(hueBase, 75, 100, 0.022 + sn * 0.012);\n ellipse(0, 0, R * 2 * (i / 6) + 26);\n }\n\n // rotating segmented rings\n noFill();\n for (let ring = 0; ring < 3; ring++) {\n const rr = R * (0.62 + ring * 0.33);\n const rot = time * (ring % 2 === 0 ? 1.4 : -1.1) * (1 + sn * 4);\n const segs = 3 + ring * 2;\n strokeWeight(1.4 + sn * 2.2);\n stroke((hueBase + ring * 22) % 360, 65, 100, 0.5);\n for (let s = 0; s < segs; s++) {\n const a0 = rot + s * TWO_PI / segs;\n arc(0, 0, rr * 2, rr * 2, a0, a0 + (TWO_PI / segs) * 0.52);\n }\n }\n\n // orbiting satellite dots\n const sats = 3;\n noStroke();\n for (let i = 0; i < sats; i++) {\n const a = time * (1.5 + sn * 3) + i * TWO_PI / sats;\n const rr = R * 1.15;\n fill((hueBase + 60) % 360, 50, 100, 0.8);\n ellipse(cos(a) * rr, sin(a) * rr, 3 + sn * 4);\n }\n\n // overdrive rays\n if (overdrive) {\n const rays = 16;\n for (let i = 0; i < rays; i++) {\n const a = (i / rays) * TWO_PI + time * 2.5;\n const len = R * 0.9 + random(15, 70) * sn;\n stroke((hueBase + 40) % 360, 55, 100, random(0.15, 0.65));\n strokeWeight(random(1, 2.6));\n line(cos(a) * R * 0.75, sin(a) * R * 0.75, cos(a) * (R * 0.75 + len), sin(a) * (R * 0.75 + len));\n }\n }\n\n // white hot core\n noStroke();\n fill(hueBase, 30, 100, 0.55);\n ellipse(0, 0, 12 + sn * 16);\n fill(0, 0, 100, 0.95);\n ellipse(0, 0, 4 + sn * 7);\n pop();\n}\n```\n\nCharge visuals:\n\n```javascript\nfunction drawCharge(m) {\n const ct = (millis() - chargeStart) / 1000;\n const power = constrain(ct / 2.2, 0, 1);\n push();\n translate(m.x, m.y);\n // converging rings\n noFill();\n for (let i = 0; i < 4; i++) {\n const ph = (time * 1.6 + i / 4) % 1;\n const rr = (60 + 240 * ph) * (1 - power * 0.55);\n stroke(hueBase, 40, 100, 0.5 * (1 - ph));\n strokeWeight(1.5);\n ellipse(0, 0, rr * 2);\n }\n // energy ball\n noStroke();\n const br = 8 + power * 46 + random(-2, 2);\n fill(hueBase, 70, 100, 0.3);\n ellipse(0, 0, br * 2.6);\n fill(0, 0, 100, 0.55 + power * 0.4);\n ellipse(0, 0, br);\n // inward sparks\n const spN = floor(3 + power * 9);\n for (let i = 0; i < spN; i++) {\n const a = random(TWO_PI);\n const r0 = br + random(20, 90 * (1 - power) + 20);\n stroke(0, 0, 100, random(0.3, 0.8));\n strokeWeight(random(1, 2));\n line(cos(a) * r0, sin(a) * r0, cos(a) * br * 0.4, sin(a) * br * 0.4);\n }\n pop();\n}\n```\n\nmousePressed / Released:\n\n```javascript\nfunction mousePressed() {\n charging = true;\n chargeStart = millis();\n}\n\nfunction mouseReleased() {\n if (!charging) return;\n charging = false;\n const ct = (millis() - chargeStart) / 1000;\n const power = constrain(ct / 2.2, 0.18, 1);\n const m = createVector(mouseX, mouseY);\n shockwaves.push({ x: m.x, y: m.y, r: 10, max: 260 + power * 520, hue: hueBase, thick: true });\n flash = 0.3 + power * 0.45;\n\n const pushAll = (arr, base) => {\n for (const p of arr) {\n const dx = p.pos.x - m.x, dy = p.pos.y - m.y;\n const d = Math.max(Math.hypot(dx, dy), 14);\n const f = base * constrain(150 / d, 0.25, 3);\n p.vel.x += dx / d * f;\n p.vel.y += dy / d * f;\n }\n };\n pushAll(burstParticles, 5 + power * 22);\n pushAll(flowParticles, 3 + power * 9);\n\n const n = floor((70 + power * 170) * quality);\n for (let i = 0; i < n; i++) {\n const a = random(TWO_PI);\n const sp = random(2, 5 + power * 17);\n burstParticles.push({\n id: nextId++,\n pos: m.copy(),\n vel: p5.Vector.fromAngle(a).mult(sp),\n size: random(1.5, 4 + power * 8),\n hue: (hueBase + random(-35, 35) + 360) % 360,\n life: 1,\n decay: random(0.004, 0.012),\n });\n }\n}\n```\n\nAdd id to spawnBurst too. nextId global.\n\nShockwaves update:\n\n```javascript\nfunction updateShockwaves() {\n noFill();\n for (let i = shockwaves.length - 1; i >= 0; i--) {\n const s = shockwaves[i];\n s.r += (s.max - s.r) * 0.075 + 1.5;\n const t = s.r / s.max;\n const a = 1 - t;\n for (let k = 0; k < 3; k++) {\n stroke(s.hue, 60, 100, a * (0.55 - k * 0.15));\n strokeWeight((s.thick ? 7 : 3.5) * a + 0.8);\n const rr = s.r * 2 - k * 16;\n if (rr > 0) ellipse(s.x, s.y, rr);\n }\n if (t >= 0.995) shockwaves.splice(i, 1);\n }\n}\n```\n\nStars:\n\n```javascript\nfunction drawStars(vel, sn) {\n noStroke();\n for (const s of stars) {\n s.x -= vel.x * 0.06 * s.z;\n s.y -= vel.y * 0.06 * s.z;\n if (s.x < 0) s.x += width; if (s.x > width) s.x -= width;\n if (s.y < 0) s.y += height; if (s.y > height) s.y -= height;\n const tw = 0.5 + 0.5 * sin(time * 2.2 + s.tw);\n fill(225, 25, 95, (0.2 + 0.5 * tw) * s.z);\n const sz = 0.6 + s.z * 2;\n ellipse(s.x, s.y, sz);\n if (sn > 0.45) {\n stroke(225, 20, 100, (sn - 0.45) * 0.6 * s.z);\n strokeWeight(sz * 0.55);\n line(s.x, s.y, s.x + vel.x * 0.9 * s.z * sn, s.y + vel.y * 0.9 * s.z * sn);\n noStroke();\n }\n }\n}\n```\n\nHmm wrapping with += width when x<0 — if jump large, might stay out; use modulo: s.x = (s.x + width) % width. vel per frame is small though. Use modulo to be safe.\n\nNebula blobs:\n\n```javascript\nfunction drawNebula() {\n blendMode(ADD);\n noStroke();\n for (const b of nebulaBlobs) {\n const x = width * 0.5 + sin(time * b.sp + b.off) * width * 0.38;\n const y = height * 0.5 + cos(time * b.sp * 0.8 + b.off * 1.7) * height * 0.36;\n const hue = (hueBase + b.hueOff + 360) % 360;\n for (let i = 3; i >= 1; i--) {\n fill(hue, 70, 60, 0.012);\n ellipse(x, y, b.r * 2 * i / 3);\n }\n }\n}\n```\n\nVery faint (alpha 0.012 ×3 layers ×5 blobs) — subtle color wash. But wait — drawNebula called before blendMode(ADD) set? I call drawStars (BLEND) then drawNebula sets ADD itself. Order in draw(): drawStars; drawNebula(); blendMode(ADD) — redundant but fine. Let drawNebula set it.\n\nVignette:\n\n```javascript\nfunction drawVignette() {\n const g = drawingContext.createRadialGradient(\n width/2, height/2, Math.min(width, height) * 0.35,\n width/2, height/2, Math.max(width, height) * 0.72\n );\n g.addColorStop(0, 'rgba(0,0,0,0)');\n g.addColorStop(1, 'rgba(2,2,10,0.5)');\n drawingContext.fillStyle = g;\n drawingContext.fillRect(0, 0, width, height);\n}\n```\n\nHUD:\n\n```javascript\nfunction drawHUD(sn, overdrive) {\n const x = 26, y = height - 34;\n textFont('monospace');\n noStroke();\n\n // title\n textSize(11);\n fill(0, 0, 100, 0.4);\n textAlign(LEFT, TOP);\n text('N E B U L A // D R I V E', 26, 20);\n\n // gauge label\n textSize(9);\n fill(0, 0, 100, 0.45);\n text('V E L O C I T Y', x, y - 16);\n\n // bar\n fill(0, 0, 100, 0.1);\n rect(x, y - 6, 200, 5, 2.5);\n const w = 200 * sn;\n if (w > 1) {\n // gradient segments\n for (let i = 0; i < w; i += 3) {\n const t = i / 200;\n fill((200 + t * 150) % 360, 75, 100, 0.85);\n rect(x + i, y - 6, 2.6, 5);\n }\n }\n // readout\n fill(0, 0, 100, 0.6);\n text(nf(smoothSpeed, 2, 1) + ' px/f', x + 210, y - 16); // hmm align\n```\n\nLet me place readout right of bar: text at x+208, y-6-ish baseline. textAlign(LEFT, BASELINE) default. Fine-tune y coordinates: label at y-16, bar top at y-6 height 5 → bar bottom y-1. readout text at (x + 208, y) aligned LEFT. OK-ish.\n\nOverdrive indicator:\n\n```javascript\nif (overdrive) {\n const blink = 0.5 + 0.5 * sin(time * 14);\n fill(0, 90, 100, 0.5 + 0.5 * blink);\n textSize(11);\n text('◆ OVERDRIVE ◆', x + 230, y);\n}\n```\n\nHmm HSB hue 0 = red. Use (hueBase+... ) or just red-white: fill(0, 80, 100, ...). Red fits overdrive.\n\nAlso entity count top-right:\n\n```javascript\ntextAlign(RIGHT, TOP);\nfill(0, 0, 100, 0.35);\ntextSize(9);\ntext('ENTITIES ' + (burstParticles.length + flowParticles.length), width - 26, 22);\ntextAlign(LEFT, BASELINE);\n```\n\nHint:\n\n```javascript\nfunction drawHint() {\n const el = millis() - startTime;\n let a = 0;\n if (!interacted) a = constrain(map(el, 800, 1600, 0, 1), 0, 1) * 0.75;\n else {\n const t = millis() - interactedAt;\n a = constrain(1 - t / 1500, 0, 1) * 0.75;\n }\n if (a <= 0.01) return;\n textAlign(CENTER, CENTER);\n textSize(12);\n fill(0, 0, 100, a);\n text('drift slowly · move fast to ignite · hold click to collapse · release to detonate', width/2, height - 70);\n textAlign(LEFT, BASELINE);\n}\n```\n\nSet interactedAt when interacted first true: in draw, `if (sn > 0.25 && !interacted) { interacted = true; interactedAt = millis(); }`.\n\nwindowResized:\n\n```javascript\nfunction windowResized() {\n resizeCanvas(windowWidth, windowHeight);\n background(240, 80, 4);\n stars = [];\n for (let i = 0; i < 240; i++) stars.push({...});\n}\n```\n\nRefactor star creation into makeStars().\n\nlerpHue:\n\n```javascript\nfunction lerpHue(a, b, t) {\n const d = ((b - a + 540) % 360) - 180;\n return (a + d * t + 360) % 360;\n}\n```\n\nCheck: b-a range [-360,360]; +540 → [180, 900]; %360 → [180,360)∪... hmm (b-a+540) for b-a=-360 → 180; for +360 → 900 %360=180. So result in [180, 900) %360 ∈ [0,360). minus 180 → [-180, 180). Good.\n\nnextId init 1.\n\nOne concern: `text()` with HSB colorMode — fill uses HSB; fine.\n\nBlend modes: p5 blendMode(ADD) works in 2D context (uses globalCompositeOperation 'lighter'? p5 maps ADD to 'lighter'... In p5, blendMode(ADD) → 'lighter'? Yes approximately.)\n\nPerformance: per-frame allocations — p5.Vector creations in spawnBurst etc. Acceptable.\n\nFlowParticle prev copying: using this.prev.x = ... avoids alloc. Good.\n\nIn updateBurst, splice(i,1) while iterating backwards — OK.\n\nTrail uses plain objects {x,y,w} — good.\n\nOne more flourish: **double-tap**? skip. Keyboard? Press 'c' to clear? minor: add keyPressed to clear screen / randomize hue? Add: pressing any key randomizes hueBase jump. Eh, add subtle: press H to hide HUD? Skip — keep focused. Actually add 'space' to trigger detonate at cursor without charge? That duplicates click. Skip keyboard.\n\nAlso handle mouse leaving canvas — mouseX/Y clamp anyway.\n\nFirst-frame mouse at (0,0): prevMouse center; initial speed spike? vel from center to (0,0) if user hasn't moved — mouseX defaults 0. Guard: on first real mouseMoved set prevMouse to mouse pos. Add a flag: `let firstMove = true;` in mouseMoved: if firstMove { prevMouse.set(mouseX, mouseY); firstMove=false; }. Also in draw, before first move, m=(0,0)... aura drawn at 0,0 — acceptable, or default m to center until first move. Do: `let hasMouse = false;` m = hasMouse ? createVector(mouseX,mouseY) : center. Good.\n\nTouch: touchStarted → treat as mousePressed but return false to prevent scrolling? p5 mousePressed handles touch. Add `function touchStarted(){ mousePressed(); return false; }`? mousePressed already fires for touch in p5. To prevent default scroll, canvas is fullscreen fixed; add CSS `touch-action: none` on body/canvas. And in setup: `canvas.elt`? Simpler: CSS touch-action:none on html,body.\n\nEdge: charging while moving — pull uses current m each frame, good.\n\nNow, double check constellation offsets loop with destructuring `for (const [ox,oy] of offs)` fine.\n\nAlso cap: skip constellation if quality low? include drawn cap 260 * quality.\n\nLet me also think about the \"fade rect\" color: fill(238, 80, 4) HSB = very dark navy. Alpha 0.15–0.3. With ADD strokes, trails accumulate brightness nicely. \n\nOne issue: HUD drawn in BLEND each frame after full-opacity? HUD bar fill alpha 0.85 over dark bg fine. But vignette drawn every frame at alpha 0.5 solid over previous vignette — it's opaque-ish overlay each frame; since we re-fade bg each frame and redraw everything, vignette doesn't accumulate (it's drawn once per frame over the frame). But it dims the ADD glow near edges permanently — intended.\n\nBut text HUD each frame redrawn over faded previous frame text → slight ghost of previous text persists (alpha fade). SmoothSpeed number changes → ghosting digits. Acceptable (HUD over near-black corner, ghost barely visible). Alternatively clear HUD area with solid fill before drawing text. Do: fill(238,80,4, 1)?? That erases stars behind HUD... The corners are mostly empty; a subtle solid panel improves readability. I'll draw a very low alpha dark panel? If I draw semi-transparent dark rect it accumulates over frames? No — everything is redrawn each frame; accumulation only via the fade rect alpha. A panel at alpha 0.5 each frame over faded content: content behind shows at 50% — consistent per frame, no accumulation issue because the panel is redrawn after fade each frame. Wait — but panel drawn in frame N dims frame N content; the faded history of panel also accumulates in the canvas from previous frames... Actually everything on canvas is subject to the same fade. Panel pixels: each frame we draw dark panel with alpha .5 over current canvas → result = 0.5*canvas + 0.5*panelColor. Next frame fade rect applies over that... equilibrium reached: panel area ≈ mostly panel color mix. Fine, subtle. Use panel alpha 0.35 dark navy rounded rect behind gauge area. OK.\n\nSimplify: draw panel: fill(235, 60, 8, 0.45); rect(16, height-58, 330, 44, 8)? width depends on content incl OVERDRIVE text. Make panel 300 wide; overdrive text inside panel at right side. Readout inside too. Layout:\n\npanel: x=16, y=height-62, w=316, h=48, r=10.\nlabel 'V E L O C I T Y' at (30, height-50) size 8.\nbar at (30, height-36) w=190 h=5.\nreadout at (30, height-22)?? Getting cramped; let me do:\n- label top-left of panel: (30, panelY+16)\n- bar below label: (30, panelY+24, 190, 6)\n- readout right of bar: (228, panelY+31)\n- overdrive text: right side blinking at (228, panelY+16)?\n\nEh, fine-tune:\npanelY = height - 60, panelH = 46.\nlabel: textSize(8), at (30, panelY + 15).\nbar: rect(30, panelY + 24, 190, 6, 3).\nreadout: textSize(9) at (230, panelY + 31): nf value.\noverdrive: textSize(9) at (230, panelY + 15) blinking '◆ OVERDRIVE'.\n\nTitle top-left without panel, plus entities top-right.\n\nHint at bottom center above panel: y = height - 78.\n\nGood enough.\n\nAlso add slight scanline / grain? skip.\n\nLet me now also double check `arc()` in HSB ADD — fine.\n\nTotal flow: Also I should include mouseMoved setting hasMouse. p5 calls mouseMoved on move. Also touchMoved.\n\nWrite final HTML. Also add meta viewport for mobile.\n\nLet me also reconsider MAX_PARTICLES*quality shift loop: `while (burstParticles.length > MAX_PARTICLES * quality) burstParticles.shift();` — shift() is O(n); use splice(0, k) once. \n\n```javascript\nconst excess = burstParticles.length - floor(MAX_PARTICLES * quality);\nif (excess > 0) burstParticles.splice(0, excess);\n```\n\nConstellation id: add `id` in both spawn paths.\n\nAlright — also one more visual: at rest (low speed), the emitter drip `map(sn,0,1,1.5,15)` gives 1-2 particles/frame — gentle. Plus flow field. Good.\n\nI think the design is complete. Write it all out cleanly with comments. Ensure no syntax errors. Let me write final code mentally checking each function.\n\nAlso `nf(smoothSpeed, 2, 1)` — nf with left digits 2 → \"05.3\". fine.\n\nCheck p5 arc signature: arc(x, y, w, h, start, stop). yes.\n\ndrawingContext radial gradient each frame — allocating gradient per frame OK.\n\nOne more: overdrive screen shake translate inside push before stars drawn → stars shake too, fine; pop before vignette/HUD.\n\nflash drawn inside ADD before pop → good.\n\nEdge: `mousePressed` fires also when clicking... there's no UI. fine.\n\nFor the hint font: monospace everywhere.\n\nFinal check on hue mapping: sn 0 → hue 200 (azure/cyan). sn 1 → 200+150=350 (hot pink/red). Lerp path goes 200→350 increasing — through greens/yellows? 200→350 passes 250(blue), 280(purple), 320(magenta) — nice, avoids green/yellow since HSB hue 120=green is on the other side. Good.\n\nsin(time*0.25)*18 adds ±18 drift — at sn 0, hue wanders 182–218 (cyan-teal-blue). \n\nRibbon hue + t*45 similar family.\n\nNow write it. I'll add a brief comment header and organized sections. Also include fallback CDN? Just one CDN link (cdnjs 1.9.4). Could add jsdelivr fallback via onerror. Keep simple but robust: add small script that if p5 undefined, writes a fallback script tag? Skip — cdnjs is reliable.\n\nLet me write out everything now, carefully.\n\nAlso remember: user said response will be rendered in iframe in browser — full HTML in one code block, including script/link tags for external libs. Don't mention iframe. Provide short intro text maybe, then the code block. Keep prose minimal but can briefly describe interactions. I'll give a one-two line intro + controls summary after code? Better: brief intro, code, then 2-3 bullet lines about what to try. Keep concise.","format":"unknown","index":0}]},"native_finish_reason":"stop"}],"created":1785162899,"model":"moonshotai/kimi-k3","object":"chat.completion","service_tier":null,"system_fingerprint":"fpv0_ea28f3ff","usage":{"completion_tokens":25063,"prompt_tokens":208,"total_tokens":25271,"completion_tokens_details":{"accepted_prediction_tokens":null,"audio_tokens":0,"reasoning_tokens":18234,"rejected_prediction_tokens":null,"image_tokens":0},"prompt_tokens_details":{"audio_tokens":0,"cached_tokens":0,"cache_write_tokens":0,"video_tokens":0},"cost":0.376569,"is_byok":false,"cost_details":{"upstream_inference_cost":0.376569,"upstream_inference_prompt_cost":0.000624,"upstream_inference_completions_cost":0.375945}},"provider":"Moonshot AI"}

test