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