An unbelievably small and lightweight particles animation engine.
Runs in both node and the browser!
The easiest way to use this package is with npm + your favorite javascript bundler:
npm i decentralized-particlesIf you prefer the old-school method, you can use the CDN (https://unpkg.com/decentralized-particles/dist/build.iife.js),
or you can directly download the latest iife build.
<script src="cdn/or/path/to/package/"></script>Both old-school methods expose a DParticles object to the window that is equivalent to this:
import * as DParticles from 'decentralized-particles';import { createParticlesOnCanvas } from 'decentralized-particles';
createParticlesOnCanvas(canvasElement, { nextFrameCaller: fn => requestAnimationFrame(fn) });The unique thing about this package is that the particles do not have to be drawn on canvas. They can be anything, anywhere! Particles are completly abstract, 100% decentralized. Check out the DecentralizedParticles example, or the official canvas implementation for more information.
(element: HTMLCanvasElement, configOptions:ConfigOptions, particleOptions:ParticleOptionssegmentOptions:SegmentOptions](#segment-options)) =>[DecentralizedParticles`
Implements the particle animation engine on canvas.
Both configOptions and particleOptions are passed directly into DecentralizedParticles
This has no link to the GUI. That is for you to do (note the createParticle function).
Example:
const parent = document.getElementById('particles');
// The last two arguments are optional
const particles = new DecentralizedParticles(configOptions, particlesOptions, segmentOptions);
particles.createParticle(particle => {
const element = document.createElement('particle');
parent.appendChild(element);
setPos();
particle.onUpdate(setPos);
function setPos() {
element.style.left = particle.positionX;
element.style.top = particle.positionY;
}
particle.onDestroy(() => element.remove());
});
particles.start();particleOptions should be of type ParticleOptions, as it is passed directly into Particle.
segmentOptions should be of type SegmentOptions, as it is passed directly into Segment.
configOptions must be of type ConfigOptions.
fn will be called every time a new particle is created. An instance of Particle will be passed in as the first and only argument.
If segments is true in the config options, fn will be called every time a new segment is created. An instance of Segment will be passed in as the first and only argument.
Calls fn before each update.
Calls fn after each update.
This starts the animation.
Pauses the animation.
Returns a function that will play the animation when called.
particlesCount(optional): An object containing theminandmaxvalues. Default ismax: 200, min: 150nextFrameCaller(optional): A function that calls a callback when ready to go to the next frame. Default:Note: When in the browser, you will want to set this to:fn => setTimeout(fn, 16);
fn => requestAnimationFrame(fn);
segments(optional): A boolean indicating wether or not to link the particles together with segments. Defaults totruesegmentStrength(optional): A large number here results in particles further apart being linked with a segment. Default is0.11
The options passed into Particle.
A randomly selected number between options.size.min and options.size.max.
A chosen background based off of options.background.
A randomly selected number between options.lifespan.min and options.lifespan.max.
A randomly selected number between options.speed.min and options.speed.max.
The actual speed of the particle will vary though, and this number is just used as a starting point.
A random 20 character string used behind the scenes.
The amount of updates this particle has had. It will automaticly self-destruct when age >= lifespan.
A number between 1 and 0. The current positionX of the particle.
A number between 1 and 0. The current positionY of the particle.
A number between 1 and 0. The positionX that the particle had when it was created.
A number between 1 and 0. The positionY that the particle had when it was created.
A number between 1 and 0. The planned positionX that the particle is to reach when age === lifespan.
A number between 1 and 0. The planned positionY that the particle is to reach when age === lifespan.
This will trigger a new update in the particle's lifecycle. Used behind the scenes.
fn is called each time a new update is triggered.
Destroys the particle. This method is called when age === lifespan or when positionX or positionY becomes less than 0 or greater than 1.
fn is called when the particle is destroyed.
See the source for details.
See the source for details.
size(optional): An object containing theminandmaxkeys. Default ismax: 7, min: 3.background(optional): A string that represents the background, or an array of strings. Default is#ddd.lifespan(optional): The amount of updates until the particle self-destructs: An object containing theminandmaxkeys. Default ismax: 400, min: 300.speed(optional): The amount to move each particle per update. Default ismax: 0.0005, min: 0.0009.keepAround(optional): If the particle should choose a new direction and setageback to0when it would otherwise self-destruct.
stroke(optional): A string that represents the segment stroke, or an array of strings. Default is#bbb.width(optional): An object containing theminandmaxkeys. Default ismax: 0.5, min: 0.5.
Sure!
# fork repo
git clone https://github.com/[your_username]/decentralized-particles
cd decentralized-particles
npm i
npm run devPull Requests are always welcome!
PS: Don't forget to npm run lint! 😉