Lightweight JavaScript Particle Animation Library – spxparticles

Preview:

Description:

A tiny yet feature-rich JavaScript library to generate high-performance particle animations (like flames, fireworks, explosions, etc) on an HTML5 canvas element.

See Also:

• 5 Best Particles Animation JavaScript Libraries
• Best Particle System jQuery Plugins

Basic usage:

1. Insert the main JavaScript spxparticles into the document.

<script src="js/spxparticles.js"></script>

2. Create an HTML5 canvas element on which you want to render the particle animation.

<canvas id="SPX_ParticleCanvas" class="particleCanvas"></canvas>

3. Initialize the library, specify the particle image, and determine the amount of particles to generate as follows:

var spxParticleSettings = {
    p_texture: '/path/to/particle.png'
};

const GENERATE = '100';
const INFINITE = '';
// particles = 100
spawnSPXParticles('SPX_ParticleCanvas', GENERATE);
// particles = infinite
spawnSPXParticles('SPX_ParticleCanvas', INFINITE);

4. Full options to customize the particle animation.

// Path to particle
p_texture: '/path/to/particle.png',
// (empty), screen, overlay, multiply, color-dodge
p_blending: 'color-dodge',
// Delay in between each new particle
emit_delay: 30,
// Emitter zone left %
emit_left: 10,
// Emitter zone right %
emit_right: 90,
// Emitter zone bottom %
emit_bottom: 90,
// Preview emitter zone on canvas
zone_visible: false,
// Y move speed (negative: up)
gravity: -4,
// Random speed multiplier
rnd_grav_mult: 2,
// Dispersion value
spread_x: 0.5,
// Horizontal push force
wind: 2,
// Size of wavy motion
wave_size: 1,
// Speed of wavy motion
wave_freq: 80,
// Maximum particle lifespan duration
p_life: 250,
// Randomize lifespan
p_rnd_life: 20,
// Particle born size in pixels
p_size: 110,
// Randomize size
p_rnd_size: 80,
// Size multiplier, scale down/up gradually
p_size_mult: 0.98,
// Spawn rotation (deg)
p_rotation: 0,
// Randomize rotation (deg)
p_rnd_rot: 15,
// wobble back and forth?
p_rot_wobble: true,
// Rotation speed
p_rot_amount: 1.2,
// Wobble frequency
p_rot_wofreq: 40,
// both directions CW and CCW
p_rot_dual: false,
// Opacity of a particle when born (%)
p_opacity: 100,
// Randomize born opacity (%)
p_rnd_opa: 0,
// Opacity multiplier, fade gradually
p_opa_mult: 0.8,
// When do we start to fade out
p_fade_start: 150,
// Randomize fade start age
p_rnd_fstart: 20