Particle Explosions
Create particle explosions on a HTML5 canvas element.
Installation
npm install particle-explosions
Usage
Simple
const canvas = documentconst ctx = canvas const emitter = emitter // 250 particles
Multiple explosions
const canvas = documentconst ctx = canvas const emitter = emitter // 250 particles
Particle properties
See table below for full details of particle properties.
const canvas = documentconst ctx = canvas const emitter = emitter
Custom execution
For more control, you can draw the particles to the canvas in your own loop by setting the pause option to true when creating your emitter:
const canvas = documentconst ctx = canvas const emitter = // <-- Pause emitter // <-- Does not automatically draw to canvas // Draw to canvas in loopconst loop = { if emitterisExploding ctx emitter}
Particle properties
All particle properties are optional as they have default values:
Property | Description | Default | Min value |
---|---|---|---|
xPos | Start x position of particles (px) | Center of canvas | |
yPos | Start y position of particles (px) | Center of canvas | |
minSize | Minimum size of particles (px) | 25 | 0.1 |
maxSize | Maximum size of particles (px) | 25 | |
minSpeed | Minimum speed of particles | 50 | 0.1 |
maxSpeed | Maximum speed of particles | 100 | |
resistance | Rate at which particles slow down | 0.85 | 0 |
gravity | Rate at which particles fall | 0 | 0 |
decay | Rate at which particles shrink | 0.9 | 0.1 |
sizeToRemove | Size at which particles disappear | 0.1 | 0.1 |
color | Color of particles (also accepts array of colors) | '#000000' |