Fast And Configurable Particle Library In JavaScript – spark-particles

Category: Javascript | April 6, 2021
Author: GellTorn
Views Total: 47 views
Official Page: Go to website
Last Update: April 6, 2021
License: MIT

Preview:

Fast And Configurable Particle Library In JavaScript – spark-particles

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,
      }
      
})

You Might Be Interested In:


Leave a Reply