Fast And Configurable Particle Library In JavaScript – spark-particles

Preview:

Description:

spark-particles is a fast and configurable particle JavaScript library for generating a cool particles system on an HTML5 canvas.

How to use it:

1. Install and import the spark-particles as an ES module.

# NPM
$ npm i spark-particles

import Particles from "spark-particles"

// OR
import Particles from './src/Particles.js'

2. Create an HTML canvas element on the page.

<canvas id="particles"></canvas>

3. Render a basic particles system on the canvas.

const node = document.getElementById('particles');
const particles = new Particles(node).init({
      // configs here
}).start()

4. Available options to customize the particles system.

const particles = new Particles(node).init({
      // enable debug mode
      debug: false,
      // auto resize to fit the screen
      resize: true,
      // config particles here
      particles: {
        amount: 250,
        moveDirection: 'random', // 'random' | 'top'  | 'right'  | 'bottom'  | 'left'
        distanceToLink: 150, 
        linkedParticles: true, 
        maxVelocity: 0.8, 
        maxRadius: 4,
      },
      // rendered configs
      renderer: {
        linearGradient: {
          x1: 0, 
          y1: 0, 
          x2: 1,
          y2: 1,
          color1: '#327fc2',
          color2: '#014987',
        },
        width: window.innerWidth, 
        height: window.innerHeight,
        dpiMultiplier: 1,
      }
      
})

Changelog:

v1.2.2 (04/16/2021)

• renderer fix