floatygons.js

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

Usage

//Make a new object, default settings.
let f = require("floatygons");
const m = new f.Floatygons();

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

//Use start() only once to begin.
m.start();

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

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

Use the enforceConnectionStrain to hard enable a hard constraint. Normally, dots can be connected to the value from maxConnections but outside connections are still allowed. Setting enforceConnectionStrain to true will prevent outside connections.