2D Particle Systems

March 2026

Particle systems are everywhere: fire, smoke, rain, galaxies, flocking birds, splashing water. They all emerge from the same foundation — many simple elements following simple rules. This page contains multiple interactive demos. Touch or click to interact with the particles.

Example 1: Particle Fountain

The most basic particle system: an emitter spawns particles, gives them initial velocity, and applies gravity. Each particle has a limited lifetime, then fades and dies.

The fountain demonstrates the core particle system loop: emit, update, render. Each frame:

function update() {
    // Emit new particles
    for (let i = 0; i < emissionRate; i++) {
        particles.push(createParticle());
    }
    
    // Update existing particles
    for (let p of particles) {
        p.vy += gravity;       // Apply gravity
        p.x += p.vx;           // Apply velocity
        p.y += p.vy;
        p.life -= 0.01;        // Age particle
    }
    
    // Remove dead particles
    particles = particles.filter(p => p.life > 0);
}

The spread angle controls initial velocity direction. Narrow spread produces a focused jet, wide spread creates a fan shape. Gravity is the only force here — continuous acceleration downward.

Example 2: Attraction and Repulsion

Particles respond to your cursor. By switching modes, you can attract particles toward a point or push them away. This is the foundation of interactive particle art.

The physics here is classical: particles accelerate toward or away from a point. The force gets weaker with distance, creating a natural feeling of "pull" or "push":

function applyAttraction(particle, targetX, targetY, strength) {
    let dx = targetX - particle.x;
    let dy = targetY - particle.y;
    let dist = Math.sqrt(dx * dx + dy * dy);
    
    if (dist < 1) dist = 1; // Prevent division by zero
    
    // Force inverse to distance squared (realistic falloff)
    let force = strength / (dist * dist);
    
    // Normalize and apply
    particle.vx += (dx / dist) * force;
    particle.vy += (dy / dist) * force;
}

The inverse-square law (force = strength / dist²) mimics how real forces behave — gravity, electromagnetism, light intensity. As particles get closer, the force increases dramatically. Repulsion uses the same code but with negative strength.

Example 3: Particle Interactions

When particles interact with each other, not just with your cursor, you get emergent behavior. This demo shows particles that attract at medium distance and repel at close distance — creating clusters that neither collapse nor scatter.

This interaction model creates a kind of "liquid" behavior. At distance, particles want to come together. Close up, they push away. The balance:

function interact(p1, p2) {
    let dx = p2.x - p1.x;
    let dy = p2.y - p1.y;
    let dist = Math.sqrt(dx * dx + dy * dy);
    
    if (dist < 1) dist = 1;
    
    let force = 0;
    
    // Repel when too close
    if (dist < repulsionRange) {
        force = -strength * (repulsionRange - dist) / dist;
    }
    // Attract at medium distance
    else if (dist < attractionRange) {
        force = strength * 0.3;
    }
    
    // Apply equal and opposite forces
    let fx = (dx / dist) * force;
    let fy = (dy / dist) * force;
    
    p1.vx += fx;
    p1.vy += fy;
    p2.vx -= fx;
    p2.vy -= fy;
}

Notice the force is equal and opposite — Newton's third law. This conserves momentum and creates more realistic motion than one-way forces.

Example 4: Fireworks

All particle systems are variations on the same theme. Fireworks add trails, color fading, and explosive initial velocities. Click or touch to launch.

Click or touch to launch fireworks. Hold for rapid fire.

Fireworks combine everything: emitters (the launch), explosive forces (the burst), gravity (the fall), trails (history), and color gradients (lifetime mapped to hue). Each firework is a mini particle system:

function createFirework(x, y) {
    let particles = [];
    let count = 60 + Math.random() * 40;
    let hue = Math.random() * 360;
    
    for (let i = 0; i < count; i++) {
        // Random direction, varying speed
        let angle = Math.random() * Math.PI * 2;
        let speed = Math.random() * 6 + 2;
        
        particles.push({
            x: x,
            y: y,
            vx: Math.cos(angle) * speed,
            vy: Math.sin(angle) * speed,
            life: 1,
            hue: hue + Math.random() * 30 - 15, // Slight variation
            trail: []
        });
    }
    
    return particles;
}

Trails are the key visual technique. Each particle stores its recent positions and draws them as a fading line:

function drawTrail(particle) {
    for (let i = 0; i < particle.trail.length - 1; i++) {
        let alpha = (i / particle.trail.length) * particle.life;
        ctx.strokeStyle = `hsla(${particle.hue}, 80%, 60%, ${alpha})`;
        ctx.beginPath();
        ctx.moveTo(particle.trail[i].x, particle.trail[i].y);
        ctx.lineTo(particle.trail[i + 1].x, particle.trail[i + 1].y);
        ctx.stroke();
    }
}

Example 5: Galaxy Simulation

Many particles with gravitational attraction toward a central mass, plus slight initial rotation, creates a spiral galaxy. This demonstrates how simple orbital mechanics produces complex structures.

Each particle orbits the central mass. The orbital velocity depends on distance — closer particles move faster. This is Kepler's third law in action:

function attractToCenter(particle, centerX, centerY, mass) {
    let dx = centerX - particle.x;
    let dy = centerY - particle.y;
    let dist = Math.sqrt(dx * dx + dy * dy);
    
    if (dist < 10) dist = 10; // Prevent singularity
    
    // Gravitational force: F = G * m1 * m2 / r²
    // For particles: force = mass / r²
    let force = mass / (dist * dist);
    
    // Apply force
    particle.vx += (dx / dist) * force;
    particle.vy += (dy / dist) * force;
}

The spiral arms emerge from small perturbations in initial velocity. Over time, differential rotation (inner particles orbit faster than outer ones) stretches any irregularity into a spiral structure. Real galaxies form spiral arms the same way.

The Universal Pattern

All these systems share the same structure:

1. Data — what does a particle store? Position, velocity, color, lifetime, any other state.
2. Emission — how are particles created? From a point, from an area, on click, continuously?
3. Forces — what acts on particles? Gravity, attraction, repulsion, wind, turbulence?
4. Update — how do particles evolve? Apply forces, integrate velocity, age, decay.
5. Render — how do particles appear? Circles, sprites, trails, connections between neighbors?
6. Culling — when do particles die? Lifetime, boundaries, collision, user action?

Once you understand this pattern, you can create any particle system. Snowfall, explosions, magic spells, swarms, galaxy formation, fluid simulation — all variations on the same six elements.

Performance Notes

Particle systems are computationally simple but scale poorly. N particles with pairwise interactions is O(N²) — double the particles, quadruple the work. For interactive performance:

• Use object pooling — recycle particles instead of allocating new ones each frame.
• Spatial partitioning — a grid or quadtree reduces neighbor checks from O(N²) to O(N log N).
• WebGL — for thousands of particles, upload positions to the GPU and render as points.
• Chunk updates — if you have 1000 particles, update 100 per frame in rotation.

This page keeps particle counts low enough for Canvas 2D. Real-time games and visualizations often need WebGL for serious particle counts.

References

• Canvas API — MDN
• Craig Reynolds' Boids — similar principles applied to flocking
• Nature of Code: Particle Systems — Daniel Shiffman