Press "Enter" to skip to content

[Animation] A Stream/Burst of Image Particles Onto An HTML Canvas | spxparticles

A simple JavaScript library to generate an infinite stream or string of particle-based images on an HTML canvas. Only visible particles remain in memory to manage memory usage and browser performance.

image to particles js, image into interactive particles, canvas particle animation, pixel effects with javascript and html canvas, convert image to particles

Please note: The GIF animation on this page works at a low frame rate and does not do justice to the actual animation.

How to make use of it:

1. Insert the primary JavaScript spxparticles into the doc.

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

2. Create an HTML5 canvas component on which you need to render the particle animation.

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

3. Initialize the library, specify the particle image, and determine the number 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

Lightweight JavaScript Particle Animation Library, particles js background, spxparticles Plugin/Github, html5 canvas particle animation and parallax demo


See Demo And Download

Official Website(TuomoKu): Click Here

This superior jQuery/javascript plugin is developed by TuomoKu. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *