Canvas Animation: Particle Emitter #2

An interactive particle emitter animation. At its core is a dynamic canvas where particles originate from the centre and radiate outward in random directions. These particles are rendered as white circles of varying sizes on a dark, semi-transparent background, creating a mesmerizing visual effect reminiscent of a glowing nebula or a field of stars.

Each particle is a white circle whose size is randomly determined within a range starting from 2 pixels up to a user-defined maximum. This variability adds depth and complexity to the visual presentation.

Particles move outward from the centre with velocities randomly assigned between -5 and 5 units on both the x and y axes. Additionally, there's a 10% chance during each update that a particle will change its direction randomly, resulting in a more unpredictable and organic movement pattern.

Particles have randomized lifespans ranging between 10 and 110 units. Once a particle's life exceeds its predetermined lifespan, it is removed from the canvas. The animation continuously generates new particles to maintain the total count specified by the user.

The semi-transparent background is refreshed with a slight opacity (rgba(40, 42, 54, 0.4)) during each rendering cycle. This technique creates a fading trail behind moving particles, enhancing the visual fluidity and giving the impression of motion blur.

Users can adjust the total number of particles displayed using a slider control. Modifying this value increases or decreases the density of particles, allowing users to customize the intensity of the animation.

A second slider enables users to set the maximum size for particles. This control affects the range of particle sizes, influencing how prominent individual particles appear within the animation.

Changes made using the sliders are reflected in real-time. As users adjust the controls, the animation restarts after a brief delay, updating to incorporate the new settings without requiring a page refresh.

The animation is powered by JavaScript and utilizes the requestAnimationFrame method.