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 -or- // The CommonJS Wayvar NetParticles = 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 = documentNetPNetP
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
Customizing Quickstart
Start customizing by adding the additional object type
// The ES6 Way -or- // The CommonJS Wayvar NetParticles = NetParticlesvar ParticleNetwork = ParticleNetwork
Create an array of ParticleNetworks using the targetted Canvas element and customized options.
Add them to the NetParticle controller
let CanvasEl = document let PN1 = CanvasEl color:red velocity: x:3 y:3 let PN2 = CanvasEL color:blue opacity:5 let PN3 = CanvasEL let PNArray = PN1PN2PN3 let NetP = CanvasEL PNArray
Init and Play
NetPNetP
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