Canvas Particle System

Difficulty: Beginner | Runtime: HTML5 Canvas | Output: Visual animation

Teach an AI agent to generate a colorful particle fountain with gravity, fade trails, and configurable color palettes using the HTML5 Canvas API.

What You'll Build

A self-contained HTML file that renders an animated particle system:

• Particles spray upward from the bottom center of the canvas
• Gravity pulls particles back down in natural arcs
• Each particle has a random color from a curated palette
• Particles fade out as they age, creating trailing effects
• The system runs at 60fps using requestAnimationFrame

Core Concepts

1. Particle Data Structure

Each particle tracks position, velocity, age, and color:

{
  x: number,       // horizontal position
  y: number,       // vertical position
  vx: number,      // horizontal velocity
  vy: number,      // vertical velocity
  life: number,    // remaining life (0-1)
  color: string,   // HSL color string
  size: number     // radius in pixels
}

2. Physics Update Loop

Every frame:

1. Emit new particles at the source point
2. Update each particle's position: x += vx, y += vy
3. Apply gravity: vy += GRAVITY
4. Age particles: life -= decay
5. Remove dead particles (life <= 0)
6. Render each particle as a filled circle with alpha = life

3. Color Palettes

Use HSL color space for vibrant, varied particles:

• Fire: hues 0-60 (red → yellow)
• Ocean: hues 180-240 (cyan → blue)
• Forest: hues 90-150 (green spectrum)
• Rainbow: random hue 0-360

Instructions

1. Create an HTML file with a full-viewport <canvas>
2. Set up the animation loop with requestAnimationFrame
3. Implement the particle emitter at bottom-center
4. Add gravity and fade effects
5. Use semi-transparent background fills for trail effects

Parameters