Fireworks Canvas Example

Take a look at the live example!

install

bower install --save fireworks-canvas
npm install --save fireworks-canvas

usage

import{Fireworks}from'fireworks-canvas'// mjsconst{ Fireworks }=require('fireworks-canvas')// cjsrequirejs(['Fireworks'],({ Fireworks })=>{})// amdconst{ Fireworks }=window.Fireworks// browser global// needs at least a container element, you can provide options// (options are optional, defaults defined below)constcontainer=document.getElementById('container')constoptions={maxRockets: 3,// max # of rockets to spawnrocketSpawnInterval: 150,// millisends to check if new rockets should spawnnumParticles: 100,// number of particles to spawn when rocket explodes (+0-10)explosionMinHeight: 0.2,// percentage. min height at which rockets can explodeexplosionMaxHeight: 0.9,// percentage. max height before a particle is explodedexplosionChance: 0.08,// chance in each tick the rocket will explodewidth: container.clientWidth,// override the width, defaults to container widthheight: container.clientHeight// override the height, defaults to container height// array of points, defaults to []// when x is null or not defined, uses random position between 0 -> container width// when y is null or not defined, uses container heightcannons: [{x: width*0.2},{x: width*0.8}],// defines a single cannon with null for height and provided value for X.// will be apended to provided cannonsrocketInitialPoint: width*0.5,}// instantiate the class and call start// this returns a disposable - calling it will stop fireworks.constfireworks=newFireworks(container,options)conststop=fireworks.start()stop()// stop rockets from spawningfireworks.stop()// also stops fireworks.fireworks.kill()// forcibly stop fireworksfireworks.fire()// fire a single rocket.fireworks.resetSize()// resets the size to the containers dimensionsfireworks.setSize(100,100)// sets the size to the specified dimensionsfireworks.onFinish(()=>container.remove())// callback when the last firework disappears

usage with typscript

import{Fireworks}from'fireworks-canvas'constfireworks=newFireworksCanvas(container)

support

Should work in most browsers.

Note that you'll need a polyfill for Set to support iexplore 11.

development

npm i
npm start
# open localhost:8001 in your favourite browser