SketchWave Particle Demo

SWParticle is a SketchWaveJS class representing a single physics-driven particle for explosion, fire, sparks, confetti, and other burst or emitter effects. It was generalized from the Particle class that powered the explosion in Crosby's Bomb Saga.

How it works

Each particle stores a position, velocity, and acceleration as p5.js vectors. On every call to update(), the physics engine runs:

1. Drag — the velocity vector is multiplied by the drag coefficient (<1). This gradually slows the particle.
2. Gravity — a constant downward acceleration is added to the velocity each frame, pulling particles toward the bottom of the canvas.
3. Position — the velocity is added to the position, moving the particle.
4. Fade — the alpha decreases by the Fade Rate each frame until the particle is fully transparent and isDead() returns true.

Typical usage pattern

// Spawn a burst of 80 particles at the click position
for (let i = 0; i < 80; i++) {
    particles.push(new SWParticle(mouseX, mouseY, {
        hueMin: 0, hueMax: 30,   // orange/red
        gravity: 0.15,
        drag:    0.95,
    }));
}

// In draw():
for (let i = particles.length - 1; i >= 0; i--) {
    particles[i].update();
    particles[i].draw();
    if (particles[i].isDead()) particles.splice(i, 1);
}

Key parameters

• Particles per Burst — how many particles spawn on each click.
• Gravity — downward acceleration per frame. 0 = floats in all directions; 1.5 = heavy rain.
• Drag — velocity damping per frame. 1.0 = no drag (particles fly forever); 0.5 = thick air.
• Fade Rate — alpha lost per frame. Higher values make particles disappear faster, giving shorter bursts.
• Speed Min/Max — range of initial launch speeds in pixels/frame.
• Size Min/Max — range of particle diameters in pixels.
• Hue Min/Max — HSB hue range for random particle color.
• Background Opacity — at low values, old frames are only partially erased, creating glowing motion trails. When all particles are gone, the canvas clears itself automatically so trails never linger after the last particle fades.
• Background Color — the color picker in the Background accordion lets you choose any canvas background color. Switch from the default near-black charcoal to deep navy, forest green, or white for a completely different mood. The canvas flushes instantly when you change the color.
• Shape — click the Shape button (or press s) to cycle through four modes:
  • Circle — smooth, round particles.
  • Square — chunky rectangular blocks.
  • ★ Star — each particle is a filled star polygon. The point count is chosen randomly between Min Points and Max Points.
  • Mix — each individual particle randomly resolves to a circle, square, or star at the moment it spawns, giving a confetti-like variety.

★ Star Geometry

When the shape is Star or Mix, two extra sliders appear in the Speed & Size accordion:

• Min Points — the fewest points a star particle can have (3 = triangle, 9 = nine-point star).
• Max Points — the most points. Each particle randomly picks a whole number in [Min, Max] when it spawns.

Set both to the same value (e.g. 5) to lock all stars to exactly 5 points. Widen the range for a mixed geometry effect where triangles, pentagons, and octagons all appear in the same burst.

↻ Rotation (Square & Star)

Square and star particles automatically spin as they travel — each one picks a random angular velocity at spawn. Use the Max Spin slider (in the Speed & Size accordion) to control the spin rate — drag it to 0 to lock all rotation, or toward 0.50 for a fast tumble. Each particle picks a random speed anywhere from −Max Spin to +Max Spin, so some spin clockwise and some counter-clockwise. Circle particles are symmetric and do not rotate.

Auto-Emit mode

When Auto-Emit is on, particles continuously stream from the canvas center — like a fountain or fire effect. Combine with low Gravity + low Drag for a sparkle fountain, or high Gravity + high Fade Rate for a campfire effect.

↺ Reset to Factory Settings

The Reset to Factory Settings button at the bottom of the Spawn section (or press r) restores all sliders and toggles to their original defaults, stops Auto-Emit, and clears any live particles — a clean slate to start experimenting again.