Create particle explosions on a HTML5 canvas element
npm install particle-explosions-3.0.1
npm install particle-explosions
`
Usage
$3
`javascript
import { createEmitter } from 'particle-explosions'
const canvas = document.getElementById('canvas-id')
const ctx = canvas.getContext('2d')
const emitter = createEmitter(ctx)
emitter.explode(250) // 250 particles
`
$3
`javascript
import { createEmitter } from 'particle-explosions'
const canvas = document.getElementById('canvas-id')
const ctx = canvas.getContext('2d')
const emitter = createEmitter(ctx)
emitter.explode(250) // 250 particles
setTimeout(() => {
emitter.explode(150) // 150 particles
}, 250)
`
$3
See table below for full details of particle properties.
`javascript
import { createEmitter } from 'particle-explosions'
const canvas = document.getElementById('canvas-id')
const ctx = canvas.getContext('2d')
const emitter = createEmitter(ctx)
emitter.explode(250, {
xPos: 300,
yPos: 300,
minSize: 5,
maxSize: 30,
minSpeed: 50,
maxSpeed: 100,
resistance: 0.85,
gravity: 0.98,
decay: 0.9,
sizeToRemove: 0.1,
color: '#FF0000' // Also accepts array: ['#00FF00', '#0000FF']
})
`
$3
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:
`javascript
import { createEmitter } from 'particle-explosions'
const canvas = document.getElementById('canvas-id')
const ctx = canvas.getContext('2d')
const emitter = createEmitter(ctx, { pause: true }) // <-- Pause
emitter.explode(250) // <-- Does not automatically draw to canvas
// Draw to canvas in loop
const loop = () => {
if (emitter.isExploding) {
requestAnimationFrame(loop)
}
ctx.clearRect(0, 0, canvas.width, canvas.height)
emitter.draw()
}
loop()
``