56 lines
1.7 KiB
Markdown
56 lines
1.7 KiB
Markdown
# 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
|