Build Your First Particle System: A Step-by-Step Creative Coding Project

What We Will Build

In this tutorial, we will build an interactive particle system that creates colorful trails following your mouse cursor. When you click, particles will burst outward in an explosion effect. The particles will be affected by gravity, will fade over time, and will leave glowing trails as they move. By the end, you will have a beautiful, interactive visual experience and a solid understanding of the fundamental concepts behind particle systems.

This project is designed for beginners who have some familiarity with JavaScript but no prior experience with creative coding or Canvas. We will build everything from scratch, explaining each concept as we go. The final result will be something you can customize, expand, and share — and it will give you the foundation to create much more complex particle effects in the future.

The concepts we will cover — the animation loop, particle lifecycle management, physics simulation, color manipulation, and user input handling — are the building blocks of virtually every interactive visual experience. Master these fundamentals, and you will be equipped to understand and create a wide range of creative coding projects.

Setting Up the Canvas

Every Canvas-based creative coding project starts with the same basic setup: creating a canvas element, getting its 2D rendering context, and establishing an animation loop.

The canvas element is an HTML element that provides a drawing surface. Unlike other HTML elements that display content directly, the canvas is a blank slate that you draw on programmatically using JavaScript. The 2D rendering context provides methods for drawing shapes, text, images, and other visual elements onto the canvas.

For our particle system, we want the canvas to fill the entire browser window and resize automatically when the window size changes. We also want a dark background to make our colorful particles pop. Setting the canvas dimensions to match the window dimensions and clearing the canvas with a semi-transparent black fill each frame creates a trail effect — previous frames fade out gradually rather than disappearing instantly.

The animation loop is the heartbeat of any interactive visual experience. We use requestAnimationFrame, a browser API that calls our update function approximately 60 times per second, synchronized with the display's refresh rate. Each call to our update function represents one frame of animation — we update the state of all particles, clear the canvas, and draw everything in its new position.

Creating and Managing Particles

A particle is simply an object with properties that describe its current state: position (x, y), velocity (dx, dy), size, color, opacity, and remaining lifespan. Each frame, we update these properties according to our physics rules, then draw the particle at its current position.

Particle creation (emission) happens in response to user input. When the mouse moves, we create a few particles at the cursor position with velocities that spread them slightly from the cursor's path. When the user clicks, we create many particles with velocities that radiate outward from the click position, creating an explosion effect.

The key to a smooth, performant particle system is efficient particle management. Rather than creating new particle objects every frame (which would trigger frequent garbage collection pauses), we use an object pool — a pre-allocated array of particle objects that are recycled when they die. When we need a new particle, we find a dead particle in the pool and reinitialize its properties. This approach eliminates garbage collection overhead and keeps the frame rate smooth.

Each frame, we iterate through all active particles, update their positions based on their velocities, apply gravity by adding a small downward component to each particle's vertical velocity, reduce their remaining lifespan, and update their opacity based on remaining life. Particles whose lifespan reaches zero are marked as dead and become available for recycling.

Adding Visual Polish

The difference between a basic particle system and a beautiful one lies in the visual details. Several techniques can dramatically improve the visual quality of our particle system.

Glow effects can be achieved by drawing each particle multiple times at increasing sizes with decreasing opacity. This creates a soft, luminous appearance that makes particles look like they are emitting light rather than just being colored dots. For even better results, use the Canvas globalCompositeOperation property set to 'lighter', which causes overlapping particles to add their colors together, creating bright, saturated areas where many particles overlap.

Color variation makes the system more visually interesting. Rather than using a single color, assign each particle a hue based on its creation time, position, or velocity. Using the HSL color model makes this easy — you can sweep through the hue spectrum while keeping saturation and lightness constant to create rainbow effects, or vary saturation and lightness while keeping hue constant for more subtle variations.

Size variation adds depth and visual interest. Vary particle sizes randomly at creation, and optionally shrink particles as they age. Larger particles in the foreground and smaller particles in the background create a sense of depth, even in a 2D system.

Trail effects are created by not fully clearing the canvas each frame. Instead of filling the canvas with solid black, fill it with a semi-transparent black (for example, rgba 0, 0, 0, 0.05). This allows previous frames to show through, creating smooth trails behind moving particles. The transparency value controls the trail length — lower values create longer trails.