steveholgado / particle-explosions

Create particle explosions on a HTML5 canvas (npm-package)

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'

particle-explosions's Issues

A module cannot have multiple default exports.

Hi,

I'm trying to use this package with Angular, but when I build my app I get several errors :

Here is the code to reproduce :

import {createEmitter} from 'particle-explosions';

......


public toto(index, coord): void {
    const canvas: any = document.getElementById(`canvas-${index}`)
    const ctx = canvas.getContext('2d');

    const emitter = createEmitter(ctx);

    emitter.explode(50, {
      minSize: 20,
      maxSize: 40,
      minSpeed: 50,
      maxSpeed: 100,
      resistance: 0.85,
      gravity: 0.98,
      decay: 0.9,
      sizeToRemove: 0.1,
      color: '#FF0000' // Also accepts array: ['#00FF00', '#0000FF']
    });
  }

When I run ng build --prod or ng build I get these errors :

Error: node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22 - error TS2528: A module cannot have multiple default exports.

9 export default class CanvasRenderer implements ICanvasRenderer {
                       ~~~~~~~~~~~~~~

  node_modules/particle-explosions/dist/particle-explosions.d.ts:25:22
    25 export default class Emitter implements IEmitter {
                            ~~~~~~~
    Another export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:25:22 - error TS2528: A module cannot have multiple default exports.

25 export default class Emitter implements IEmitter {
                        ~~~~~~~

  node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22
    9 export default class CanvasRenderer implements ICanvasRenderer {
                           ~~~~~~~~~~~~~~
    The first export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22 - error TS2528: A module cannot have multiple default exports.

9 export default class CanvasRenderer implements ICanvasRenderer {
                       ~~~~~~~~~~~~~~

0m  node_modules/particle-explosions/dist/particle-explosions.d.ts:55:22
    55 export default class Particle implements IParticle {
                            ~~~~~~~~
    Another export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:55:22 - error TS2528: A module cannot have multiple default exports.

55 export default class Particle implements IParticle {
                        ~~~~~~~~

  node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22
    9 export default class CanvasRenderer implements ICanvasRenderer {
                           ~~~~~~~~~~~~~~
    The first export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22 - error TS2528: A module cannot have multiple default exports.

9 export default class CanvasRenderer implements ICanvasRenderer {
                       ~~~~~~~~~~~~~~

  node_modules/particle-explosions/dist/particle-explosions.d.ts:70:22
    70 export default class ParticleFactory implements IParticleFactory {
                            ~~~~~~~~~~~~~~~
    Another export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:70:22 - error TS2528: A module cannot have multiple default exports.

70 export default class ParticleFactory implements IParticleFactory {
                        ~~~~~~~~~~~~~~~

  node_modules/particle-explosions/dist/particle-explosions.d.ts:9:22
    9 export default class CanvasRenderer implements ICanvasRenderer {
                           ~~~~~~~~~~~~~~
    The first export default is here.
node_modules/particle-explosions/dist/particle-explosions.d.ts:71:27 - error TS2304: Cannot find name 'Particle'.

71     create(options?: {}): Particle;
                             ~~~~~~~~