Colors, Shapes & Style

Here's What You'll Build

A visual effects sandbox -- an interactive particle fountain that responds to mouse movement.

The Concept

Particles are small, simple shapes (usually circles) that are created in large numbers, move according to simple rules, and fade away after a short time. A single particle is boring. Hundreds of them together create fire, smoke, sparks, rain, and fountains.

Each particle has a position, velocity, lifetime, and color. Every frame, you update its position, reduce its lifetime, and remove it when it expires. This is the basis for every visual effect in games.

The Math Behind It

Random number generation is used everywhere in particle systems. Particle speed, direction, color, and lifetime all use randomness to create organic, natural-looking effects.

Color representation: RGBRed, Green, Blue (Red, Green, Blue) defines colors by mixing light. HSLHue, Saturation, Lightness (Hue, Saturation, Lightness) is more intuitive -- hue is the color on a 360-degree wheel, saturation is how vivid it is, and lightness is how bright. HSL makes it easy to create smooth color gradients.

Building with Claude

Step 1: Basic Particle Fountain

Create a single HTMLHyperText Markup Language file called particles.html. Dark background
(#0d0a1a), centered 800x600 canvas. Create a particle fountain at the
center bottom of the canvas. Each frame, spawn 3-5 new particles that
shoot upward with random horizontal spread. Each particle is a small
circle (2-4 pixel radius) with a random HSL color. Particles should be
affected by gravity (gradually fall back down) and fade out over 1-2
seconds. Use requestAnimationFrame.

Step 2: Mouse Interaction

Update particles.html so the particle fountain follows the mouse
position instead of being fixed at the bottom center. The particles
should spray away from the mouse cursor in all directions. When the
mouse is not moving, particles should drift slowly outward. When the
mouse moves quickly, particles should spread wider and faster. Also
add a subtle glow effect to each particle using multiple overlapping
circles with decreasing opacity.

Why this prompt works: We described the relationship between mouse speed and particle behavior. This creates a responsive, satisfying interaction where faster mouse movement creates more dramatic effects. The glow effect request uses a visual description ("overlapping circles with decreasing opacity") rather than a technical one.

Step 3: Polish

Improve particles.html: 1) Add a trail mode where particles leave fading
streaks instead of just dots. 2) Add gravity that pulls particles
downward. 3) Add a button that cycles through effect presets: fountain
(spray up), fireworks (burst outward), snow (drift down slowly), and
fire (rise upward with orange/red colors). 4) Display the current
particle count on screen.

Understanding What Claude Built

Particle Lifecycle: Each particle is an object with {x, y, vx, vy, life, maxLife, radius, hue}. Every frame: add velocity to position, add gravity to vy, subtract from life. When life reaches 0, remove it from the array.

Array Management: Particles are stored in an array. New particles are pushed onto the end. Dead particles are removed by iterating backward (to avoid index shifting issues). This pattern appears in nearly every game.

HSL for Color Effects: Using hsl(hue, 100%, lightness%) makes it trivial to create color variations. Incrementing hue creates a rainbow. Setting saturation to 0 creates grayscale. Reducing lightness over the particle's lifetime creates a fade-to-dark effect.

AIArtificial Intelligence Skill: Aesthetics in Prompts

This lesson demonstrated that visual quality matters in prompts. Telling Claude to add "glow effects," "fading trails," and "presets" produces more polished results than just asking for "particles." Game development is as much about how things look and feel as how they function.