---
description: "HTML5 Canvas particle fountain with gravity, color palettes, and fade trails. Beginner-friendly visual demo."
---
# 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 `