Interactive Particle Flow

The user wants a p5.js animation that is interactive based on mouse cursor movement, with a nice visualization that changes when the mouse moves faster. I'll create a cool particle system with trails that respond to mouse speed - when the mouse moves faster, things get more intense (bigger particles, brighter colors, etc.). I'll create a mesmerizing particle animation with the following features: - Particles emit from the mouse cursor - Mouse speed affects particle size, color, and spread - Beautiful color palette that shifts based on speed - Trails and glow effects - Maybe some connecting lines or flow field Let me make something really cool - a combination of: 1. Particles that spawn at mouse position 2. Mouse speed changes the particle behavior (faster = more particles, bigger, more colorful) 3. A flow field that guides particles 4. Glowing trails 5. Color shifts from cool blues/purples at slow speeds to warm oranges/reds at fast speeds I'll write the full HTML with embedded p5.js from CDN. Let me create something visually stunning: - Particles emit from mouse position - Speed determines: emission rate, particle size, color temperature, trail length - Particles have a life and fade out - Maybe some orbital particles around the mouse - Background with subtle trails Let me design a complete animation: 1. Background: dark with fading trails (semi-transparent background) 2. Particles spawn at mouse position continuously 3. Each particle has: position, velocity, life, size, color 4. Mouse speed affects: spawn rate, initial velocity magnitude, particle hue 5. Slow mouse = calm blues, small particles, gentle movement 6. Fast mouse = fiery oranges/reds, large particles, explosive movement 7. Add some connecting lines between nearby particles 8. Maybe a subtle glow around the mouse Let me also add some orbiting elements and a flow field to make it more interesting. I'll include the p5.js CDN and write everything in a single HTML file. Here's my plan: - Use `mouseX`, `mouseY` and calculate speed from `pmouseX`, `pmouseY` - Map speed to various visual parameters - Create an array of particles - Each frame, add particles based on mouse speed - Update and display particles - Add some extra visual flair like a glow circle around the mouse that pulses with speed - Use HSB color mode for nice color transitions - Maybe add some geometric shapes that appear when mouse moves fast Let me write the complete code: ```javascript let particles = []; let flowField = []; let cols, rows; let scl = 20; let zoff = 0; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 100); cols = floor(width / scl); rows = floor(height / scl); flowField = new Array(cols * rows); noStroke(); } function draw() { // Semi-transparent background for trail effect background(0, 0, 0, 15); // Calculate mouse speed let mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY); // Update flow field let xoff = 0; for (let x = 0; x < cols; x++) { let yoff = 0; for (let y = 0; y < rows; y++) { let index = x + y * cols; let angle = noise(xoff, yoff, zoff) * TWO_PI * 2; let v = p5.Vector.fromAngle(angle); v.setMag(0.5); flowField[index] = v; yoff += 0.1; } xoff += 0.1; } zoff += 0.005; // Spawn particles based on mouse speed let spawnRate = map(mouseSpeed, 0, 30, 2, 20); spawnRate = constrain(spawnRate, 1, 30); for (let i = 0; i < spawnRate; i++) { let speedFactor = map(mouseSpeed, 0, 30, 0.5, 3); let hue = map(mouseSpeed, 0, 30, 220, 30); // Blue to red-orange let size = map(mouseSpeed, 0, 30, 3, 12); let life = map(mouseSpeed, 0, 30, 60, 150); particles.push(new Particle(mouseX, mouseY, speedFactor, hue, size, life)); } // Update and display particles for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; // Apply flow field let x = floor(p.pos.x / scl); let y = floor(p.pos.y / scl); x = constrain(x, 0, cols - 1); y = constrain(y, 0, rows - 1); let index = x + y * cols; if (index >= 0 && index < flowField.length) { let force = flowField[index]; p.applyForce(force); } p.update(); p.display(); if (p.isDead()) { particles.splice(i, 1); } } // Draw mouse glow let glowSize = map(mouseSpeed, 0, 30, 30, 80); let glowHue = map(mouseSpeed, 0, 30, 220, 30); for (let i = 3; i > 0; i--) { fill(glowHue, 80, 100, 15 / i); ellipse(mouseX, mouseY, glowSize * i * 0.8, glowSize * i * 0.8); } // Draw connecting lines between nearby particles strokeWeight(0.5); for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { let d = dist(particles[i].pos.x, particles[i].pos.y, particles[j].pos.x, particles[j].pos.y); if (d < 50) { let alpha = map(d, 0, 50, 30, 0); let hue = (particles[i].hue + particles[j].hue) / 2; stroke(hue, 60, 100, alpha); line(particles[i].pos.x, particles[i].pos.y, particles[j].pos.x, particles[j].pos.y); } } } noStroke(); } class Particle { constructor(x, y, speedFactor, hue, size, life) { this.pos = createVector(x, y); this.vel = createVector(random(-1, 1), random(-1, 1)); this.vel.mult(speedFactor * 2); this.acc = createVector(0, 0); this.hue = hue + random(-20, 20); this.size = size; this.life = life; this.maxLife = life; this.saturation = random(60, 100); this.brightness = random(80, 100); } applyForce(force) { this.acc.add(force); } update() { this.vel.add(this.acc); this.pos.add(this.vel); this.acc.mult(0); this.life--; this.size *= 0.995; } display() { let alpha = map(this.life, 0, this.maxLife, 0, 80); fill(this.hue, this.saturation, this.brightness, alpha); ellipse(this.pos.x, this.pos.y, this.size, this.size); } isDead() { return this.life <= 0 || this.pos.x < -50 || this.pos.x > width + 50 || this.pos.y < -50 || this.pos.y > height + 50; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); cols = floor(width / scl); rows = floor(height / scl); flowField = new Array(cols * rows); } ``` Wait, let me refine this. I want to make it even cooler. Let me add: - Orbiting sparkles around the mouse - The particles should have a bit more interesting behavior - Maybe some rings that expand from the mouse when it moves fast - Better color transitions Also, I should handle the case when the mouse hasn't moved yet (pmouseX/Y might be the initial position). Let me use `movedX` and `movedY` or just calculate the distance properly. Let me also add some "shockwave" rings when the mouse speed crosses certain thresholds, and maybe some geometric burst patterns. Actually, let me keep it elegant and mesmerizing rather than overly complex. The flow field + particles + mouse glow + connecting lines is already quite nice. But let me enhance: 1. Add orbiting particles around the mouse that spin faster with speed 2. Add expanding rings on fast mouse movements 3. Better particle shapes (maybe use blendMode for glow) 4. Some particles that are "sparks" - smaller, faster, different color Let me also add an array for shockwaves/rings and orbiting sparkles. Actually, let me simplify and make it really polished. I'll focus on: - Beautiful particle system with trails - Mouse speed affects everything - Glow effects - Connecting lines - A few orbiting "moons" around the cursor - Occasional burst effects Let me rewrite to be cleaner and more impressive: Actually, I think the initial design is solid. Let me just polish it, add blend modes for glow effects, and make sure everything works smoothly. I'll also add a subtle radial gradient around the mouse for extra glow, and make the connecting lines more dynamic. Let me also consider that on first load, pmouseX and pmouseY equal mouseX and mouseY, so speed will be 0. That's fine. One thing I want to improve: when the mouse is still, there should still be some gentle activity - maybe a few particles slowly drifting. The flow field helps with this. Let me also make the particles leave a more colorful trail. I'll reduce the background alpha slightly for longer trails. Here's my final refined version. I'll use `blendMode(ADD)` or `blendMode(SCREEN)` for glow effects on some elements. Actually, for p5.js, I can use `blendMode(ADD)` which looks great for particle effects. Let me incorporate that. Also, I want to add some "orbiting sparkles" - small bright dots that circle the mouse, with their orbit speed and radius tied to mouse speed. Let me write the complete HTML: I need to be mindful of performance. If there are too many particles, it might slow down. I'll keep the particle count reasonable and limit the spawn rate. Let me also add mouse press interaction - maybe clicking creates a burst of particles. But the user didn't ask for clicks, so I'll focus on mouse movement. One more cool feature: when the mouse moves very fast, create "spark trails" - lines that follow the mouse path with bright colors. Actually, I could draw a line between pmouse and mouse positions with a bright color when speed is high. That would look like speed lines. Let me finalize the code now. I'll structure it as: 1. Particle class 2. Ring/shockwave class (for bursts on fast movement) 3. Orbiting sparkles 4. Main draw loop with flow field 5. Mouse speed calculation 6. Visual parameters mapped to speed Let me also add a subtle vignette or keep the background dark for contrast. Here's the complete code I'll use: ```html Interactive Particle Flow ``` Now let me write the full p5 code with all the features. I want to make sure: - Colors are beautiful (HSB mode, shifting from cool to warm based on speed) - Glow effects are prominent - Performance is good - The animation looks mesmerizing Let me also add some text or instruction? No, the user just wants a cool visualization. I'll make the color palette cycle slowly over time too, so even at constant speed the colors shift slightly. That adds depth. OK here's the plan for the final code: **Color scheme:** - Slow mouse: deep blues, purples, teals (hue 200-260) - Medium speed: pinks, magentas (hue 280-330) - Fast mouse: oranges, yellows, warm reds (hue 0-40) - The hue shifts continuously based on speed **Particles:** - Emit from mouse position - Affected by perlin noise flow field - Size, speed, and count proportional to mouse speed - Fade out over their lifetime - Blend mode ADD for glow effect **Mouse glow:** - Multiple layered ellipses with decreasing opacity - Size proportional to speed - Color matches current speed hue **Connecting lines:** - Between nearby particles - More visible at higher speeds - Color averaged between connected particles **Orbiting sparkles:** - 5-8 small bright dots orbiting the mouse - Orbit speed and radius increase with mouse speed - They leave subtle trails **Speed trails:** - When mouse moves fast, draw bright line segments along the path - This creates a "speed line" effect Let me code this up properly. I'll use `blendMode(ADD)` for the particle rendering to get nice glow effects, and switch back to `BLEND` for the background and other elements. Actually, I need to be careful with blendMode. If I use ADD, the background clear might not work as expected. I'll use a semi-transparent black rectangle in BLEND mode for the fade effect, then switch to ADD for particles. Wait, with blendMode, the typical approach is: 1. Set blendMode(BLEND) 2. Draw semi-transparent background to fade 3. Set blendMode(ADD) 4. Draw particles and glows 5. Set blendMode(BLEND) for UI elements This creates beautiful glowing effects. Let me refine. I'll keep the connecting lines in BLEND mode (or maybe ADD for subtle glow), particles in ADD mode. Alright, I'm going to write the complete code now. I want to be really detailed. Actually, for the flow field, I need to make sure the Perlin noise values are interesting. I'll use a 3D noise field that evolves over time (zoff incrementing). Also, I should handle window resize properly. One more thing: I want to add some "dust" particles that are always present even when the mouse is still, to give a sense of atmosphere. These could be very small, slow-moving particles scattered around the canvas. Actually, the particles from the mouse will drift via the flow field even when the mouse is still, creating a nice ambient effect. If the user stops moving, the existing particles continue to flow and fade, and a few new ones are still spawned (minimum spawn rate of 1-2 per frame). Let me also add a subtle ambient particle system that's independent of the mouse - like dust motes floating in the background. This adds depth. OK, I think I've planned enough. Let me write the code. Actually, I realize for the connecting lines, computing distances between all pairs of particles is O(n²) which could be slow with many particles. I'll limit it - maybe only check particles against a subset or use a simpler approach. For up to ~200 particles, O(n²) is about 20,000 checks per frame, which is manageable but could be optimized. I'll keep the max particles reasonable by capping the array size or limiting spawn rate. Let me set a hard cap on particles at around 150-200. I'll also limit the connecting line checks by only checking pairs where the first particle is within a certain distance of the mouse (since most visible particles are near the mouse). Actually, the simplest optimization is to just limit the total particle count. If particles.length > 200, I'll remove the oldest ones. Alright, here's the code. I'll write it cleanly with comments. Wait, I also need to think about what happens when the mouse leaves the canvas. I should handle that gracefully - maybe gradually stop spawning particles, or have the existing particles continue their motion. For simplicity, I'll just use the last known mouse position even if it's off canvas. p5.js tracks mouseX/mouseY even outside the canvas (they'll be negative or > width/height). I'll just clamp spawning to reasonable bounds or let particles spawn off-screen (they'll just not be visible). Actually, I'll check if mouse is within canvas bounds for spawning, but existing particles will continue to flow. OK here's the complete final code: Actually I realize there's an issue with the flow field approach. Calculating a full flow field every frame for the entire canvas can be expensive if the canvas is large (like full HD). I'll use a lower resolution flow field (scl = 30 or 40) to keep it performant. For a 1920x1080 canvas with scl=40, that's 48x27 = 1296 cells, which is very manageable. But actually, I don't even need to calculate the full flow field. I can just calculate the flow vector on-the-fly for each particle based on its position. That's more efficient if the number of particles is less than the number of grid cells. With ~150 particles and 1296 grid cells, the grid approach is fine but recalculating every frame is unnecessary. I could update the flow field less frequently (every 10 frames) or just compute per-particle. Actually, for the best visual effect, computing per-particle with noise is smoother and more efficient for moderate particle counts. Let me do that instead. Each particle queries the noise field at its current position to get a force vector. Here's the revised approach: - No pre-computed flow field grid - Each particle, when updating, samples Perlin noise at its position to get a steering force - The noise field evolves over time (using zoff) This is cleaner and more scalable. Let me restructure the code: ```javascript // In Particle.update(): let angle = noise(this.pos.x * 0.005, this.pos.y * 0.005, zoff) * TWO_PI * 4; let force = p5.Vector.fromAngle(angle); force.mult(0.1); // gentle steering this.acc.add(force); ``` Where zoff is a global variable that increments each frame. This way each particle gently follows the noise field. Combined with their initial velocity from the mouse, they create beautiful flowing patterns. OK NOW I'm truly ready to write the complete code. No more planning changes. Let me finalize: **Global variables:** - particles array - zoff for noise evolution - mouseSpeed (calculated each frame) - orbiteAngles for orbiting sparkles **Setup:** - Create canvas - Color mode HSB - No stroke default **Draw:** - Calculate mouse speed - Update zoff - Spawn particles (count based on speed) - Update all particles (with noise-based steering) - Display particles (with ADD blend mode) - Draw connecting lines - Draw mouse glow - Draw orbiting sparkles - Draw speed trail effect - Remove dead particles - Cap particle count if needed **Particle class:** - Position, velocity, acceleration - Hue, saturation, brightness - Size, life, maxLife - Update: apply noise steering, move, decay - Display: draw ellipse with alpha based on remaining life - IsDead: life <= 0 or off screen **Orbiting sparkles:** - I'll manage them as an array of angles - Each frame, increment angles based on speed - Draw small bright dots at offset positions around mouse **Speed trail:** - When mouseSpeed > threshold, draw a line from pmouse to mouse with bright color - Multiple passes with decreasing opacity and increasing stroke weight for glow Alright, here is the COMPLETE code. I'm going to write it all out now. Let me also make the background have a very subtle gradient or keep it pure black with the fade effect. The semi-transparent black rectangle creates nice trails. One thing: with blendMode(ADD), the semi-transparent black background won't work as expected because ADD mode adds colors. I need to: 1. Set blendMode(BLEND) 2. Draw background (semi-transparent black) 3. Set blendMode(ADD) for particles 4. Draw particles 5. Set blendMode(BLEND) for other elements Actually, even in BLEND mode, a semi-transparent black rectangle will gradually fade things out. Then switching to ADD for particles makes them glow nicely on top. The connecting lines could be in either mode - ADD would make them glow more, BLEND would make them more subtle. For performance, I'll keep the number of connecting line checks manageable. I'll use a spatial grid or just limit checks to particles near each other. The simplest: for each particle, check only against the next 20-30 particles in the array (since they're ordered by creation time, nearby ones might be spatially close due to similar origin, but not guaranteed). Actually, to keep it simple and fast, I'll just do the O(n²) check but limit it to max 150 particles and use a distance threshold of 40-50 pixels. 150²/2 ≈ 11,250 checks, which is fine for modern hardware. But I can also use a simple optimization: only check pairs where both particles are within a certain distance of the mouse, since particles far from the mouse are likely dim and fewer. Or, just accept the O(n²) for moderate n. OK, truly writing the code now. I'll target ~150 max particles. Also I want to add: when the user clicks, a burst of particles explodes outward. But the prompt only mentions mouse movement, so I'll keep it movement-based. Maybe a "shockwave" ring that expands when the mouse accelerates quickly (change in speed). That would be cool - detecting sudden speed changes and emitting an expanding ring. To detect speed changes, I can track the previous frame's speed and if the difference exceeds a threshold, trigger a ring. The ring would be a circle that expands and fades. This adds a nice reactive element. Let me include a Ring class. ```javascript class Ring { constructor(x, y, hue, maxSize) { this.x = x; this.y = y; this.radius = 5; this.maxSize = maxSize; this.hue = hue; this.life = 1.0; // 1 to 0 } update() { this.radius += (this.maxSize - this.radius) * 0.1; this.life -= 0.02; } display() { noFill(); stroke(this.hue, 80, 100, this.life * 80); strokeWeight(1.5 * this.life); ellipse(this.x, this.y, this.radius * 2, this.radius * 2); noStroke(); } isDead() { return this.life <= 0; } } ``` And in draw, check for acceleration and spawn rings. OK NOW FOR REAL. Let me write the entire thing. I'll keep it clean but feature-rich. Oh, I should also consider that pmouseX and pmouseY in the first frame equal mouseX and mouseY, so the first speed calculation gives 0. That's fine. Here's the complete script: Actually, I need to be careful about one thing: using `noise()` in p5.js. The noise function uses Perlin noise and is seeded automatically. I'll use it for the flow field steering. For the orbiting sparkles, I'll maintain an array of objects with angle and radius properties, and update them each frame. Let me also think about the visual hierarchy: 1. Background: dark with subtle ambient particles (maybe just a few tiny dots) 2. Mid-ground: the flowing particles from the mouse 3. Foreground: mouse glow, orbiting sparkles, connecting lines 4. Accent: rings/shockwaves on acceleration This creates depth. For ambient particles, I'll create a separate small array (like 30-50) of tiny particles that slowly drift around the entire canvas independent of the mouse. They'll be very subtle - small, low opacity, slow moving. Actually, that might be overcomplicating things. The main particles that drift away from the mouse via the flow field already provide ambient activity across the canvas. Let me focus on the core elements. OK WRITING THE CODE NOW. Final version: ```javascript let particles = []; let rings = []; let zoff = 0; let prevSpeed = 0; let sparkleAngles = []; const NUM_SPARKLES = 8; const MAX_PARTICLES = 180; function setup() { createCanvas(windowWidth, windowHeight); colorMode(HSB, 360, 100, 100, 100); // Initialize sparkle angles for (let i = 0; i < NUM_SPARKLES; i++) { sparkleAngles.push({ angle: random(TWO_PI), radius: random(20, 60), speed: random(0.02, 0.05), hue: random(200, 320), size: random(2, 4) }); } } function draw() { // Calculate mouse speed let mouseSpeed = dist(mouseX, mouseY, pmouseX, pmouseY); // Smooth speed for more stable readings mouseSpeed = lerp(prevSpeed, mouseSpeed, 0.3); // Detect acceleration for rings let acceleration = abs(mouseSpeed - prevSpeed); if (acceleration > 8 && mouseSpeed > 15) { let ringHue = map(mouseSpeed, 0, 40, 220, 30); rings.push(new Ring(mouseX, mouseY, ringHue, map(mouseSpeed, 15, 50, 80, 200))); } prevSpeed = mouseSpeed; // Background fade - use BLEND mode blendMode(BLEND); background(0, 0, 0, 18); // Update zoff for noise field evolution zoff += 0.008; // Spawn particles based on mouse speed let spawnRate = floor(map(mouseSpeed, 0, 35, 2, 16)); spawnRate = constrain(spawnRate, 1, 20); // Only spawn if mouse is on canvas let mouseOnCanvas = mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height; if (mouseOnCanvas || mouseSpeed > 0) { for (let i = 0; i < spawnRate; i++) { let speedFactor = map(mouseSpeed, 0, 35, 0.3, 4); let hue = map(mouseSpeed, 0, 35, 240, 20); // Blue -> Orange hue = (hue + random(-15, 15)) % 360; let size = map(mouseSpeed, 0, 35, 2, 10); let life = map(mouseSpeed, 0, 35, 50, 180); particles.push(new Particle(mouseX, mouseY, speedFactor, hue, size, life)); } } // Update and display particles blendMode(ADD); for (let i = particles.length - 1; i >= 0; i--) { particles[i].update(); particles[i].display(); if (particles[i].isDead()) { particles.splice(i, 1); } } // Draw connecting lines between nearby particles blendMode(BLEND); strokeWeight(0.4); for (let i = 0; i < particles.length; i++) { for (let j = i + 1; j < particles.length; j++) { let d = dist(particles[i].pos.x, particles[i].pos.y, particles[j].pos.x, particles[j].pos.y); if (d < 45) { let alpha = map(d, 0, 45, 25, 0); let avgHue = (particles[i].hue + particles[j].hue) / 2; stroke(avgHue, 70, 90, alpha); line(particles[i].pos.x, particles[i].pos.y, particles[j].pos.x, particles[j].pos.y); } } } noStroke(); // Update and display rings blendMode(ADD); for (let i = rings.length - 1; i >= 0; i--) { rings[i].update(); rings[i].display(); if (rings[i].isDead()) { rings.splice(i, 1); } } // Draw mouse glow blendMode(ADD); let glowSize = map(mouseSpeed, 0, 35, 25, 90); let glowHue = map(mouseSpeed, 0, 35, 240, 20); for (let i = 4; i > 0; i--) { let alpha = map(i, 1, 4, 30, 8); fill(glowHue, 80, 100, alpha); ellipse(mouseX, mouseY, glowSize * i * 0.7, glowSize * i * 0.7); } // Draw orbiting sparkles blendMode(ADD); for (let sparkle of sparkleAngles) { sparkle.angle += sparkle.speed * (1 + mouseSpeed * 0.05); sparkle.radius = lerp(sparkle.radius, map(mouseSpeed, 0, 35, 25, 100) + random(-10, 10), 0.05); let sx = mouseX + cos(sparkle.angle) * sparkle.radius; let sy = mouseY + sin(sparkle.angle) * sparkle.radius; // Draw sparkle with glow let sparkleHue = (glowHue + sparkle.hue) / 2; for (let g = 3; g > 0; g--) { fill(sparkleHue, 50, 100, 40 / g); ellipse(sx, sy, sparkle.size * g * 2, sparkle.size * g * 2); } } // Speed trail on fast movement if (mouseSpeed > 20) { blendMode(ADD); strokeWeight(2); for (let i = 0; i < 3; i++) { let trailHue = glowHue + i * 10; stroke(trailHue, 90, 100, 40 - i * 10); line(pmouseX, pmouseY, mouseX, mouseY); } noStroke(); } // Reset blend mode blendMode(BLEND); // Cap particle count while (particles.length > MAX_PARTICLES) { particles.shift(); } } class Particle { constructor(x, y, speedFactor, hue, size, life) { this.pos = createVector(x + random(-5, 5), y + random(-5, 5)); let angle = random(TWO_PI); let mag = random(0.5, 2) * speedFactor; this.vel = createVector(cos(angle) * mag, sin(angle) * mag); this.acc = createVector(0, 0); this.hue = hue; this.size = size; this.life = life; this.maxLife = life; this.saturation = random(60, 90); this.brightness = random(70, 100); } update() { // Noise-based steering let n = noise(this.pos.x * 0.004, this.pos.y * 0.004, zoff); let angle = n * TWO_PI * 3; let force = createVector(cos(angle), sin(angle)); force.mult(0.08); this.acc.add(force); // Add slight drag this.vel.mult(0.995); this.vel.add(this.acc); this.pos.add(this.vel); this.acc.mult(0); this.life--; this.size *= 0.997; } display() { let alpha = map(this.life, 0, this.maxLife, 0, 70); // Draw glow for (let g = 2; g > 0; g--) { fill(this.hue, this.saturation, this.brightness, alpha / (g * 2)); ellipse(this.pos.x, this.pos.y, this.size * g * 1.5, this.size * g * 1.5); } // Core fill(this.hue, this.saturation, 100, alpha * 1.2); ellipse(this.pos.x, this.pos.y, this.size * 0.7, this.size * 0.7); } isDead() { return this.life <= 0 || this.pos.x < -100 || this.pos.x > width + 100 || this.pos.y < -100 || this.pos.y > height + 100; } } class Ring { constructor(x, y, hue, maxSize) { this.x = x; this.y = y; this.radius = 3; this.maxSize = maxSize; this.hue = hue; this.life = 1.0; this.growthRate = random(0.05, 0.12); } update() { this.radius += (this.maxSize - this.radius) * this.growthRate; this.life -= 0.015; } display() { noFill(); let alpha = this.life * 60; strokeWeight(1.5 * this.life); stroke(this.hue, 70, 100, alpha); ellipse(this.x, this.y, this.radius * 2, this.radius * 2); // Second ring slightly offset stroke(this.hue, 50, 100, alpha * 0.5); strokeWeight(0.8 * this.life); ellipse(this.x, this.y, this.radius * 1.7, this.radius * 1.7); noStroke(); } isDead() { return this.life <= 0; } } function windowResized() { resizeCanvas(windowWidth, windowHeight); } ``` Hmm, I realize the speed smoothing with lerp might cause issues because prevSpeed starts at 0 and lerps toward the actual speed. That's actually fine - it creates a smooth ramp-up. But wait, I'm using lerp incorrectly for speed smoothing. `lerp(prevSpeed, mouseSpeed, 0.3)` gives a smoothed value, but I'm overwriting prevSpeed AFTER the acceleration check. Let me trace the logic: Frame 1: mouseSpeed = actual_dist, prevSpeed = 0. - smoothedSpeed = lerp(0, actual, 0.3) = 0.3 * actual - acceleration = |smoothedSpeed - 0| = 0.3 * actual - Then prevSpeed = smoothedSpeed Frame 2: mouseSpeed = new_actual, prevSpeed = previous_smoothed - smoothedSpeed = lerp(prevSpeed, new_actual, 0.3) - acceleration = |smoothedSpeed - prevSpeed| - prevSpeed = smoothedSpeed This works. The smoothing makes the speed changes less jittery. Good. But actually, I want acceleration to detect sudden changes in the RAW speed, not the smoothed one. Let me adjust: - Calculate raw mouse speed - Smooth it for visual parameters - Calculate acceleration from raw speed changes - Store previous raw speed Or simpler: just use the raw speed for everything and don't smooth. The visual difference isn't huge, and it simplifies the code. Let me remove the smoothing or keep it minimal. Actually, the smoothing prevents jittery particle spawn rates and size changes which can look flickery. I'll keep it. The acceleration detection can use the difference in smoothed speed - it'll still catch significant changes, just slightly delayed. Let me also reconsider the spawn rate. At speed 0 (mouse still), I want at least a few particles to spawn to keep things alive. With `spawnRate = constrain(spawnRate, 1, 20)`, we get at least 1 per frame. At 60fps, that's 60 particles per second even when still. That might be too many. Let me lower the minimum to 0 or 0.5 (but spawnRate is integer). Actually, 1 per frame with a life of 50-180 frames means we'll have 50-180 particles at steady state when mouse is still. That's fine with the cap of 180. But wait, if the mouse is still, speed is near 0, spawnRate = 1, particles have small size and low speed, life ~50 frames. So ~50 particles. That's OK. At high speed (35+), spawnRate = 16-20, life up to 180, so we'd quickly hit the 180 cap. That's fine - the cap ensures performance. I think the code is solid. Let me also add a subtle vignette or keep it minimal. The dark background with fade is nice. One more thing: I should handle the case where the mouse hasn't entered the canvas yet. On first load, mouseX and mouseY default to 0,0 (or the center? In p5.js, mouseX and mouseY start at 0). I'll just let particles spawn at (0,0) initially - they'll be off-screen for most users with centered canvases. Alternatively, I can check `mouseIsPressed` or just not spawn until the mouse moves. But actually, the simplest is to check if the mouse is within bounds, and if not, spawn at the center of the canvas or just don't spawn. For better initial experience, I'll spawn a few particles at the center if the mouse hasn't moved yet. Or just start with some particles scattered around. Actually, a nice touch: on startup, create a burst of particles at the center of the screen. This gives immediate visual feedback. I'll do this in setup or in the first few frames. In setup, I can pre-populate the particles array with some initial particles at the center: ```javascript for (let i = 0; i < 60; i++) { let p = new Particle(width/2, height/2, random(1, 2), random(200, 300), random(3, 8), random(30, 120)); particles.push(p); } ``` This creates an immediate beautiful display. Good idea. Also, I just realized I should make sure the connecting lines don't slow things down too much. With up to 180 particles, the nested loop does ~16,000 distance checks per frame. That's actually fine for modern hardware, but I can optimize by only checking lines for particles that are somewhat close to each other. A simple optimization: skip the inner loop if the outer particle is far from the mouse (since distant particles are dim and contribute less visually). Actually, the nested loop with 180 particles is 180*179/2 = 16,110 iterations. Each iteration does a dist() call and maybe a line draw. At 60fps, that's about 1 million operations per second. Very manageable. But to be extra safe on lower-end devices, I'll add a check: only compute distances if the first particle is within, say, 200 pixels of the mouse. This cuts down checks significantly. Actually, no, the distant particles can still create beautiful subtle connections. Let me leave it as is and rely on the particle cap. OK I'm going to finalize the code now. I've been overthinking this. Let me produce the complete HTML file. One more thing: the `blendMode(ADD)` in p5.js works for the entire drawing. I need to be careful to reset to BLEND when needed. In my code above, I set blendMode multiple times per frame which is fine. For the connecting lines, I set blendMode(BLEND) before drawing them. But then I set blendMode(ADD) again for rings and glow. The order matters. Let me trace through: 1. BLEND - draw background fade 2. ADD - draw particles 3. BLEND - draw connecting lines 4. ADD - draw rings 5. ADD - draw mouse glow 6. ADD - draw sparkles 7. ADD - draw speed trail 8. BLEND - reset This is fine. The background fade in BLEND mode works correctly to gradually erase the previous frame. Then particles in ADD mode glow nicely on top of the fading trails. Connecting lines in BLEND mode are subtle. Then the glow elements in ADD mode pop. Actually, I wonder if drawing the connecting lines in BLEND mode over ADD-drawn particles might look odd. Let me switch the connecting lines to ADD mode as well for consistency, or keep them in BLEND but make them more subtle. I'll use BLEND with low alpha for subtle connections - this actually creates a nice contrast with the glowing particles. Alright, I'm truly going to output the final code now. No more changes. Let me also make the sparkle orbit more interesting. Instead of simple circular orbits, I can make them follow Lissajous-like patterns or have varying radii. But circular orbits with the radius varying based on speed is already quite nice. For the sparkle hues, I initialized them with random hues but in draw I'm blending with glowHue. Let me make the sparkles shift their hue over time for more variety. OK here it is. I'll produce clean, well-commented code. Wait, I also want to handle touch devices. On mobile, there's no mouse cursor, but touch events map to mouseX/mouseY in p5.js. The experience should work but particles will only appear when touching. For a better mobile experience, I could add touch-specific behavior, but that's beyond the scope. The code will work with touch as-is. Now, for the HTML structure, I want it to be responsive, filling the entire viewport, with no scrollbars, and a black background behind the canvas. I'll also add a subtle CSS style for the body to ensure no margins or padding. FINAL CODE BELOW. I promise this time. Let me also consider adding a subtle title or instruction overlay, but the user just wants the visualization, so I'll keep it clean. Regarding the noise function - p5.js's `noise()` uses Perlin noise with a default seed. It's smooth and looks great. The parameters I'm using (position * 0.004 and zoff) will create slowly varying patterns that guide the particles in organic ways. For the speed trail effect, drawing a line from pmouse to mouse with ADD blend mode when speed is high will create bright streaks following the cursor. Multiple passes with different colors and weights create a glow effect. Alright, I need to also handle the case where the user's mouse is outside the canvas. In p5.js, mouseX and mouseY will be set to 0 when the mouse leaves the canvas (or the last known position? Actually, in p5.js, mouseX and mouseY continue to update even when the mouse is outside the canvas as long as the mouse is over the webpage. If the mouse leaves the webpage entirely, they hold their last value). I'll handle this by checking bounds for spawning but allowing display of existing particles. Let me finalize. I'll include a check: only spawn particles if mouseX is between -50 and width+50 (to allow some off-screen spawning for smooth transitions). Actually, I'll just use the mouse coordinates as-is. If the mouse is at the edge, particles spawn there and flow inward via the noise field. That looks cool. THE CODE: Actually wait, I want to add one more cool feature: when the mouse is still for a while, instead of just minimal particles, create a gentle "breathing" glow that pulses slowly. This adds life even when the user isn't moving. But that adds complexity. I'll just keep the minimum spawn rate and let the flow field provide ambient motion. OK HERE IS THE COMPLETE HTML FILE: I realize I've been going back and forth. Let me just write it out cleanly. One thing about the acceleration rings: I'm checking `if (acceleration > 8 && mouseSpeed > 15)`. The acceleration is the absolute difference between current and previous smoothed speed. If the user goes from 0 to 20 in one frame (which is common when starting to move), acceleration = 20, which triggers a ring. Good. But the smoothed speed might reduce this. Let me use the raw speed for acceleration detection. Simplify: track `prevRawSpeed` and compare with current raw speed. OK I need to stop planning and just write the code. Let me produce a polished version. Actually, I want to simplify the acceleration detection. Instead of a separate Ring class and acceleration tracking, I can just create expanding rings periodically when the mouse speed is high. Or better, create a ring every N frames when speed exceeds a threshold. But the acceleration-based approach is more dynamic - rings appear on sudden movements. Let me keep the ring system but simplify the acceleration calculation: ```javascript let rawSpeed = dist(mouseX, mouseY, pmouseX, pmouseY); let speedChange = rawSpeed - prevRawSpeed; // positive = speeding up if (speedChange > 10 && rawSpeed > 12) { // create ring } prevRawSpeed = rawSpeed; ``` This triggers rings when the user suddenly speeds up. Nice. For the smoothed speed (used for visual parameters), I'll use exponential smoothing: ```javascript smoothedSpeed = lerp(smoothedSpeed, rawSpeed, 0.25); ``` This creates a nice smooth transition for colors and sizes. Alright. FINAL. CODE. NOW. I'll structure it as: 1. Global variables 2. setup() 3. draw() 4. Particle class 5. Ring class 6. windowResized() Let me write it in a single script block within the HTML. Actually, let me also add a cool feature: the particles could have a slight "sparkle" effect where occasionally a particle brightens briefly before fading. This simulates light catching on particles. I can implement this by having a random chance each frame for a particle to "flash" - increasing its brightness temporarily. But this adds per-particle state and complexity. I'll skip it for cleanliness. Instead, the layered glow (multiple ellipses with decreasing opacity) already gives each particle a sparkling, luminous quality. I'm going to write the code now. For real this time. No more iterations. Let me think about the color transitions more carefully. I want: - Still/slow mouse: cool colors - deep blue (hue ~240), teal, purple - Medium speed: transition through magenta/pink (hue ~300-320) - Fast mouse: warm colors - orange, amber, gold (hue ~20-40) - Very fast: almost white-hot with tinge of warm color The hue mapping from speed: map(mouseSpeed, 0, 40, 240, 20) gives: - Speed 0: hue 240 (blue) - Speed 10: hue 185 (teal/cyan) -- wait, 240 to 20 crosses through 0. Let me handle this differently. In HSB, hue is 0-360. If I map 240 to 20 with increasing speed, I'll go from 240 down to 20. But 240 -> 20 going the short way passes through 180, 120, 60, 20. That's blue -> cyan -> green -> yellow -> orange. That's actually a nice progression! Blue for calm, through green/teal for moderate, to orange for fast. Alternatively, going the other way: 240 -> 300 -> 0 -> 20 gives blue -> purple -> magenta -> red -> orange. Also nice. With lerp/map, going from 240 to 20 numerically decreases the hue value. The path is: 240, 220, 200, ..., 20. That's blue through cyan to green to yellow-green to orange-ish. Hmm, 20 is orange-red. So it goes blue -> cyan -> green -> yellow -> orange. That's a full rainbow transition but skipping reds and purples. Let me make it go the other way for a more "intense" warm feeling at high speeds. I can map to go from 240 up toward 380 (which wraps to 20). Actually, if the target is 20, I can go via 240 -> 300 -> 360 (0) -> 20. That's blue -> purple -> magenta -> red -> orange. With simple numeric mapping, if I want to go via the longer route (through 360), I'd need to add 360 to the target: map(speed, 0, 40, 240, 380) % 360. At speed 0: 240. At speed 20: 310. At speed 40: 380 % 360 = 20. Perfect! This gives blue -> purple -> magenta -> pink -> red-orange. Let me use this: `hue = map(mouseSpeed, 0, 40, 240, 380) % 360;` This creates a beautiful transition from calming blues through exciting purples and magentas to intense warm oranges and reds as speed increases. This matches the emotional quality of movement - calm stillness vs. energetic action. Great. Now FINAL CODE. Actually, I realize I need to handle the hue mapping for spawn rate = 0 case. If mouseSpeed is 0, hue = 240 (blue). Good. For the sparkles, I'll have them use hues that contrast or complement the main glow. I initialized them with random hues between 200-320. As they orbit, their displayed hue blends with the current glow hue, creating nice harmony. NOW. THE CODE. I WILL WRITE IT. NO MORE PLANNING. Let me also consider: should I use `fullscreen()` or `createCanvas(windowWidth, windowHeight)`? I'll use the latter for flexibility and handle resize. For mobile, I should handle `devicePixelRatio` maybe? No, p5.js handles this with `pixelDensity()`. I'll leave it at default which is fine. One final consideration: the performance of `noise()` calls. Each particle calls `noise()` once per frame in its update. With up to 180 particles, that's 180 noise calls per frame. p5.js's noise implementation is reasonably fast. Should be fine. But wait, in my code, I'm calling `noise()` for the particle update, and that's it. The flow field is computed per-particle, not as a grid. So total noise calls = number of particles. Very manageable. ALRIGHT. HERE IS THE COMPLETE, FINAL, POLISHED CODE: I'll include everything in a single HTML document with embedded p5.js from CDN. ```html ... ``` Let me write it all out now in the response. This is a complete HTML document that creates an interactive p5.js particle visualization. As you move your mouse faster or slower, it changes colors, glow intensity, particle spawn rates, and generates expanding rings on sharp accelerations. ```html Interactive Particle Flow

move your cursor — speed shapes the flow

``` ### Interaction & Feedback Here's how the animation responds to your input and the visual logic: 1. **Cursor-Driven Effects:** The speed of your mouse is the primary controller. **Slow movements** produce calming **blue and purple** particles, while **fast movements** shift the color palette to fiery **oranges and reds**. 2. **Dynamic Systems:** The scene combines several reactive layers. **Particles** spawn from your cursor and drift through a procedural noise field. **Shockwave rings** burst outward when you suddenly accelerate. **Orbiting sparkles** around the cursor speed up and expand their orbits as you move faster. 3. **Visual Feedback:** A glowing aura follows your cursor, and a "speed trail" line appears during very fast motion. The particles themselves have a soft, glowing aesthetic thanks to additive blending, and they connect with faint lines when close to each other.

p5.js test