Canvas Animation: Particle Emitter #3

An interactive particle emitter animation rendered on an HTML5 canvas element. The visual experience is centred around particles that emanate from the middle of the canvas and disperse in random directions, creating a dynamic and engaging display.

Each particle moves with a randomly assigned velocity in both the horizontal (x) and vertical (y) directions, resulting in a scattered trajectory. Particles are small squares of size 1 by default, with a 5% chance of being size 2, adding slight variation to the visual texture. Particles are rendered in semi-transparent white, with opacity levels randomly set between 0.3 and 0.7. This creates a subtle glow effect against the dark background. Each particle has a randomly determined lifespan ranging from 10 to 510 frames. Once a particle exceeds its lifespan, it fades away, maintaining the fluidity of the animation. The canvas has a solid dark bluish-gray background colour (rgba(40, 42, 54, 1)), providing a stark contrast to the luminous particles.

A range input slider allows users to set the number of particles in the animation. Adjusting this slider dynamically updates the particle count and restarts the animation with the new settings after a brief delay.

Another range input slider enables users to control the duration of the animation in frames. Similar to the particle count, changing this value restarts the animation to reflect the new duration.

A third control allows the user to add an accent colour to the animation.