Canvas animation of network nodes and edges

This code generates an animation that gives the idea of an ever changing network of nodes (each with different impact and possibly more than one color) connecting each other to create something.

I wanted to give it depth perception, so I ended up using two canvases around the title: one in the foreground, even over the words, and the other in background, with slightly larger and blurred elements.

Demo here, full JavaScript code at the moment:

```
// min and max radius, radius threshold and percentage of filled circles
var radMin = 5,
radMax = 125,
filledCircle = 60, //percentage of filled circles
concentricCircle = 30, //percentage of concentric circles
radThreshold = 25; //IFF special, over this radius concentric, otherwise filled

//min and max speed to move
var speedMin = 0.3,
speedMax = 2.5;

//max reachable opacity for every circle and blur effect
var maxOpacity = 0.6;

//default palette choice
var colors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
bgColors = ['52,168,83', '117,95,147', '199,108,23', '194,62,55', '0,172,212', '120,120,120'],
circleBorder = 10,
backgroundLine = bgColors[0];
var backgroundMlt = 0.85;

//min distance for links
var linkDist = Math.min(canvas.width, canvas.height) / 2.4,
lineBorder = 2.5;

//most importantly: number of overall circles and arrays containing them
var maxCircles = 12,
points = [],
pointsBack = [];

//populating the screen
for (var i = 0; i filledCircle ? false : 'full') : (randint(0, 100) > concentricCircle ? false : 'concentric');
this.color = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
this.borderColor = background ? bgColors[randint(0, bgColors.length - 1)] : colors[randint(0, colors.length - 1)];
this.opacity = 0.05;
this.speed = (background ? randRange(speedMin, speedMax) / backgroundMlt : randRange(speedMin, speedMax)); // * (radMin / this.radius);
this.speedAngle = Math.random() 2

Readability of this code is good because indentation is consistent and it has a good amount of comments to provide context on the variables and functions.

I see this block:

//support functions
//generate random int a<=x<=b
function randint(a, b) {
    return Math.floor(Math.random() * (b - a + 1) + a);
  }
  //generate random float
function randRange(a, b) {
    return Math.random() * (b - a) + a;
  }

The comment above randRange explains that it creates a random float - which makes me wonder why the name isn't something like randFloat? And why are the closing brackets indented two characters? Maybe that was an issue with copying and pasting followed by formatting as code...

A common convention of c-based languages, as well as many JS style guides is to name constants in ALL_CAPS so things like maxOpacity would be converted to MAX_OPACTIY. This helps anyone reading the code distinguish constants from variables. One could also use const for any value that doesn't get re-assigned if ecmascript-6 features are supported by target browsers.

There doesn't appear to be any difference between colors and bgColors but maybe you intend for users to customize one or both of those...

StackExchange Code Review Q#104603, answer score: 2