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:

let hueOffset = 0; // Shifts the particle color palette

2. Click Event Handler

Add to the script (after the mousemove listener):

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:

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

1.7 KiB Raw Blame History