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:

| 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' | |