Skip to content

Random floating dots that form a polygon, something I made for my portfolio site.

License

Notifications You must be signed in to change notification settings

StynH/floatygons.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

floatygons.js

npm bundle size npm npm

Random floating dots that form a polygon, something I made for my portfolio site. Every setting can be tweaked. Example Another Example Default Settings

Usage

//Make a new object, default settings.
const f = new Floatygons();

//Use the constructor to override any option.
const f = new Floatygons({
    canvasId: "#floatygonCanvas",
    clearColor: "#1b1b1b",
    dotColor: "#FFFFFF",
    lineColor: "#FFFFFF",
    maxDotsAlive: 128,
    dotSize: 3,
    maxDotSpeed: 20,
    maxConnections: 3,
    maxDistance: 200,
    fps: 144,
    rescaleToParent: true,
    enforceConnectionStrain: false
});

//Use start() only once to begin.
const f = new Floatygons();
f.start();

//Use stop() to pause.
f.stop();

//Use resume() to start again.
f.resume();

Use the enforceConnectionStrain to enable a hard constraint. Normally, dots can be connected to the amount of neighbours from maxConnections but outside connections are still allowed (So connections are 1 way, and not counted on the other side). Setting enforceConnectionStrain to true will prevent outside connections.