Net Particles

Yet another HTML5 Canvas particle network animation*, **

*CURRENTLY IN PRE-PRE-RELEASE
**AKA WORK TO BE DONE

CODEPEN DEMO
https://codepen.io/nnyath/pen/QqQMLW

Inspired by the likes of Canvas Particle Network and multitude of other point network animations out there. This one stands out (slightly) with the following

• Modern ES Module Implementation
• Multiple customizable, particle network animation layer support
• Optional automatic canvas resizing
• Included dev environment

Install

Use your favorite package manager

yarn add net-particles
-or-
npm install net-particles

Default Usage

NetParticles's default animation implementation works by simply providing the Canvas's DOM element.

Start by adding the default dependency to your JS file

// The ES6 Way
import NetParticles from 'net-particles'
 
-or-
 
// The CommonJS Way
var NetParticles = require('net-particles').NetParticle

Then create a new instance of NetParticle with the Canvas element as an argument.
Initialize the object via init() and begin the animation via play()

let NetP = new NetParticles(document.getElementById('CanvasID'))
NetP.init()
NetP.play()

Pausing the Animation (New Feature! 🔥)

Simply pause/unpause using a toggle for NetParticles object with.

Perfect for saving resources when the canvas is out of viewport (though you have to hook up your own way to detect it using something like emergence.js)

NetP.togglePause()

Customizing Quickstart

Start customizing by adding the additional object type

// The ES6 Way
import {NetParticles, ParticleNetwork} from 'net-particles'
 
-or-
 
// The CommonJS Way
var NetParticles = require('net-particles').NetParticles
var ParticleNetwork = require('net-particles').ParticleNetwork

Create an array of ParticleNetworks using the targetted Canvas element and customized options.
Add them to the NetParticle controller

 
let CanvasEl = document.getElementById('CanvasID')
 
let PN1 = new ParticleNetwork(CanvasEl, { color:red, velocity:{ x:3, y:3 } })
let PN2 = new ParticleNetwork(CanvasEL, { color:blue, opacity:.5 })
let PN3 = new ParticleNetwork(CanvasEL)
 
let PNArray = [PN1,PN2,PN3]
 
let NetP = new NetParticle(CanvasEL, PNArray)

Init and Play

NetP.init()
NetP.play()

Options

NetParticle can be customized in these ways (with more ways coming in the future) via the config object passed to ParticleNetwork's arguments

max_particles

Total number of particles in the ParticleNetwork

{max_particles : INT }

velocity

Point's X and Y velocity base modifier

{x: DOUBLE, y: DOUBLE}

color

Point's color (uses CSS values)

{color : STRING}

opacity

Point's opacity. Should be less than 1

{opacity : DOUBLE}

radius

Point's radius (affects size)

{radius : INT || DOUBLE}

offset

Offset used to calculate bouncing back from the edge of the canvas (in pixels)

{offset : INT}

License

The MIT License (MIT)
Copyright (c) 2017 Kenny Inthirath