particle-explosions-3.0.1 v3.0.2

Particle Explosions

Create particle explosions on a HTML5 canvas element.

Installation

npm install particle-explosions

Usage

Simple

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

Multiple explosions

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)

Particle properties

See table below for full details of particle properties.

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']
})

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:

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()

Particle properties

All particle properties are optional as they have default values: