draft demo-02

demo-02/old-plan.md

@@ -0,0 +1,56 @@
+# Particle Burst Feature Plan
+
+## Overview
+Add a click interaction that creates a radial burst of particles and shifts the color palette.
+
+## Implementation Details
+
+### 1. Global State Addition
+Add a `hueOffset` variable to track the current color shift:
+```javascript
+let hueOffset = 0; // Shifts the particle color palette
+```
+
+### 2. Click Event Handler
+Add to the script (after the mousemove listener):
+```javascript
+canvas.addEventListener('click', (e) => {
+    const clickX = e.clientX;
+    const clickY = e.clientY;
+
+    // Shift hue for variety
+    hueOffset += 15 + Math.random() * 15; // Shift by 15-30 degrees
+
+    // Create burst of particles
+    const burstCount = 40;
+    for (let i = 0; i < burstCount; i++) {
+        particles.push(new BurstParticle(clickX, clickY, hueOffset));
+    }
+});
+```
+
+### 3. BurstParticle Class (or extend Particle)
+Create particles with radial velocity:
+- Position: click coordinates
+- Angle: random 0 to 2π
+- Speed: random range (e.g., 2-8) for varying distances
+- Size: slightly larger than normal particles (6-12px)
+- Decay: slightly faster for quick burst effect
+
+### 4. Particle Constructor Update
+Modify the `Particle` constructor to accept an optional hue offset:
+```javascript
+constructor(x, y, hueShift = 0) {
+    // ... existing code ...
+    const hue = Math.random() * 60 + 180 + hueShift; // Blue-cyan + shift
+    this.color = `hsla(${hue}, 100%, 70%,`;
+}
+```
+
+## File Changes
+- **index.html**: Add click listener, hueOffset variable, and optional hueShift parameter to Particle
+
+## Visual Effect
+- Each click creates an explosion of blue-cyan particles at the cursor
+- Subsequent clicks shift the color palette gradually (e.g., cyan → green → yellow)
+- Trail effect continues to work with the new particles