Physics-Based Fireworks

A canvas-based fireworks simulation with launching shells, multi-color particle bursts, gravity trails, and radial glow. Click anywhere to launch a shell. Auto-launches when idle.

Helpful?

Was the prompts helpfull?

Case trace

2 creative leaps

Step 1 — Physics engine & particle systemClaudeSonnet 4.6

Build a physics-based fireworks system on HTML5 Canvas. Shells launch from the bottom with upward velocity, explode into 60–80 particles with randomized burst angles and speeds. Add gravity (0.08 per frame) pulling particles down. Each particle has a tail — store the last 8 positions and draw them as fading line segments. Fade opacity out as lifetime decreases. Loop with requestAnimationFrame. Click to launch at cursor X, auto-launch every 1.8s if idle. Use a dark semi-transparent clear (rgba 0,0,0,0.15) each frame for motion blur trails. 6 palette colors: gold, crimson, cyan, lime, violet, coral.

The semi-transparent fill trick (rgba 0,0,0,0.15 per frame) creates motion blur without storing frame buffers — particles naturally ghost as they move. Tail length of 8 at 60fps gives ~133ms of trail per particle.

tsx

const PALETTE = ['#FFD700','#FF4455','#00E5FF','#7CFF50','#BF7AFF','#FF6B35'];
const GRAVITY = 0.08;

class Particle {
  constructor(x, y, vx, vy, color) {
    this.x = x; this.y = y;
    this.vx = vx; this.vy = vy;
    this.color = color;
    this.life = 1;
    this.tail = [];
  }
  update() {
    this.tail.push({ x: this.x, y: this.y });
    if (this.tail.length > 8) this.tail.shift();
    this.vy += GRAVITY;
    this.vx *= 0.98;
    this.x += this.vx;
    this.y += this.vy;
    this.life -= 0.014;
  }
}

Step 2 — Shell launch arc, glow & burst ringClaudeSonnet 4.6

Enhance the fireworks with: (1) Shell object — a bright dot that travels upward from (x, canvasH) with vy = -(12 to 16), slightly wobbly vx drift. When shell.vy >= 0 it explodes: emit 60 particles in full 360° spread, burst speed 2–6. (2) Radial glow on explosion — draw a radialGradient circle at burst origin (radius 80px, color-matched, alpha 0.6→0) before particles. (3) Outer ring expansion — large circle stroke that starts at r=5, expands to 60px, fades out over 20 frames. (4) Shockwave: 3 concentric rings at different speeds. Cap concurrent shells at 6 for performance.