# 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:

```javascript
{
  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

| Parameter | Default | Description |
|-----------|---------|-------------|
| `PARTICLE_COUNT` | 5 | Particles emitted per frame |
| `GRAVITY` | 0.15 | Downward acceleration |
| `SPEED` | 4 | Initial velocity magnitude |
| `DECAY` | 0.012 | Life reduction per frame |
| `TRAIL_ALPHA` | 0.08 | Background clear opacity (lower = longer trails) |