Firework Animation With JavaScript And Canvas – fireworks-js

Preview:

Description:

fireworks-js is a JavaScript library that adds a configurable firework animation with sound effects to your webpage.

See It In Action:

How to use it:

1. Install and import the fireworks-js as an ES module.

# Yarn
$ yarn add fireworks-js
# NPM
$ npm i fireworks-js
import { Fireworks } from 'fireworks-js'

2. Or load the fireworks.js JavaScript library from the dist folder.

<script src="dist/fireworks.js"></script>

3. Create a container on which you want to render the firework animation.

<div class="fireworks-example"></div>

4. Initialize the fireworks-js library on the container element and config the firework animation using the following props.

const container = document.querySelector('..fireworks-example')
const fireworks = new Fireworks(container, {
      rocketsPoint: 50,
      hue: { min: 0, max: 360 },
      delay: { min: 15, max: 30 },
      speed: 2,
      acceleration: 1.05,
      friction: 0.95,
      gravity: 1.5,
      particles: 50,
      trace: 3,
      explosion: 5,
      intensity: 30,
      autoresize: true,
      brightness: { 
        min: 50, 
        max: 80,
        decay: { min: 0.015, max: 0.03 }
      }
      mouse: { 
        click: false, 
        move: false, 
        max: 3 
      }
      boundaries: { 
        x: 50, 
        y: 50, 
        width: container.clientWidth, 
        height: container.clientHeight 
      }
      sound: {
        enable: true,
        files: [
          'explosion0.mp3',
          'explosion1.mp3',
          'explosion2.mp3'
        ],
        volume: { min: 1, max: 2 },
      }
});

5. Start the firework animation.

fireworks.start();

6. Pause the firework animation.

fireworks.pause()

7. Stop the firework animation.

fireworks.stop()

8. Clear the firework animation.

fireworks.clear()

9. More API methods.

// change canvas size
fireworks.setSize({ height: 500, width: 500 })
// update options
fireworks.setOptions('delay', { min: 10, max: 15 })
// show/hide boundaries
fireworks.visibleBoudaries()
// set the boundaries of fireworks
fireworks.setBoudaries()

Changelog:

05/01/2022

• v1.4.0: Various changes and improvements; Add intensity option

11/19/2021

• v1.3.5: add experimental explosion

11/17/2021

• v1.3.4: update

11/10/2021

• v1.3.3: refactor sounds

10/19/2021

• v1.2.3

10/16/2021

• v1.2.2

07/28/2021

• v1.2.1: Updated options and methods.

07/04/2021

• v1.2.0

06/28/2021

• v1.1.4