Lightweight JavaScript Particle Animation Library – spxparticles

Category: Animation | September 13, 2020
Author: TuomoKu
Views Total: 202 views
Official Page: Go to website
Last Update: September 13, 2020
License: MIT

Preview:

Lightweight JavaScript Particle Animation Library – spxparticles

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:

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

You Might Be Interested In:


Leave a Reply