Animating a 2D particle "web"

//Helper functions
//Extend an object's properties to a default object
Object.defineProperty(Object.prototype, "extend", {
  value: function(defaults) {
    for (var prop in defaults)
      if (this.hasOwnProperty(prop)) defaults[prop] = this[prop];
    return defaults;
  }
});

function ParticleRenderer(element, initSettings) {
  "use strict";

  //Globals
  var ctxArc, ctxLine, req,
    localSettings = {},
    particles = [];

  //Default settings that initSettings or newSettings will be merged into
  var defaultSettings = {
    particles: 100, //Number of particles to render
    connectDistance: element.width / element.height * 20, //Maximum distance for particles to be "connected" with a line
    frozen: false, //Will not animate if frozen is true
    fill: "rgba(170,230,200,1)", //Colour of circles
    stroke: "rgba(170,200,230,1)" //Colour of lines
  };

  //Particle object used as a structure
  var Particle = function(ops) {
    this.id = ops.id;
    this.x = ops.x;
    this.y = ops.y;
    this.size = ops.size || 3;
    this.vx = ops.vx || rand(-1, 1) / 10;
    this.vy = ops.vy || rand(-1, 1) / 10;
  };

  //Clear both canvasses entirely and redraw
  function animate() {
    ctxArc.clearRect(0, 0, element.width, element.height);
    ctxLine.clearRect(0, 0, element.width, element.height);
    drawFrame();
    req = requestAnimationFrame(animate);
  }

  //Draws all particles and lines between
  function drawFrame() {
    var j, dist, p, p2, opacity,
      maxDist = localSettings.connectDistance,
      i = particles.length;

    //Begin drawing circle paths
    ctxArc.beginPath();
    while (i--) {
      p = particles[i];

      //Move particle (except mouse-controller particle)
      if (i != 0) {
        p.x += p.vx;
        p.y += p.vy;
      }

      //Keep particle in-frame by wrapping it to 0
      p.y = p.y > element.height ? 0 : p.y;
      p.x = p.x > element.width ? 0 : p.x;

      //Look through all particles
      j = particles.length;
      while (j--) {
        p2 = particles[j];

        //Ignore self
        if (p.id == p2.id) break;

        //Get distance to other particle
        dist = distance(p, p2);
        if (dist <= maxDist) {
          //Draw faded line to other particle
          opacity = 1 - dist / maxDist;
          ctxLine.beginPath();
          ctxLine.moveTo(p.x, p.y);
          ctxLine.lineTo(p2.x, p2.y);
          ctxLine.closePath();
          ctxLine.globalAlpha = opacity;
          ctxLine.stroke();
        }
      }

      //Specify a circle to be drawn here
      ctxArc.moveTo(p.x, p.y);
      ctxArc.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
    }
    //Draw all circles
    ctxArc.closePath();
    ctxArc.fill();
  }

  //Random number between min and max
  function rand(min, max) {
    return Math.random() * (max - min + 1) + min;
  }

  //Distance (in units) between two points, where both objects have an x and y property
  function distance(p1, p2) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
  }

  //Applies new settings, or resets the canvas (for resize)
  function refresh(newSettings) {
    cancelAnimationFrame(req);

    var o = element.getBoundingClientRect();
    particles = [];

    //Create a "buddy" (for lack of a better term) to render circles on
    if (!element.buddy) {
      var elementClone = element.cloneNode();
      elementClone.removeAttribute("id");
      elementClone.style.position = "absolute";
      elementClone.style.pointerEvents = "none";
      elementClone.style.top = element.offsetTop + "px";
      elementClone.style.left = element.offsetLeft + "px";
      element.buddy = elementClone;
      element.parentNode.appendChild(elementClone);
    }

    //Resize both elements to the new size
    element.width = o.width;
    element.height = o.height;
    element.buddy.width = o.width;
    element.buddy.height = o.height;

    //Create two separate contexts
    //One draws lines, the other draws circles
    ctxLine = element.getContext("2d");
    ctxArc = element.buddy.getContext("2d");

    //Overwrite any existing settings with new settings
    localSettings = (newSettings || initSettings || {}).extend(defaultSettings);

    //Create particles
    for (var m = 0; m < localSettings.particles; ++m) {
      particles.push(
        new Particle({
          id: m,
          x: rand(0, element.width),
          y: rand(0, element.height),
          size: rand(1, 3)
        }));
    }

    //Apply setting colours
    ctxArc.fillStyle = localSettings.fill;
    ctxLine.strokeStyle = localSettings.stroke;

    //Do not animate if this particle web is destined to be frozen
    if (localSettings.frozen) {
      drawFrame();
    } else {
      //The first particle will always follow the mouse, and be slightly bigger
      window.addEventListener("mousemove", function(e) {
        particles[0].x = e.pageX - element.offsetLeft;
        particles[0].y = e.pageY - element.offsetTop;
      });
      particles[0].size = 4;
      animate();
    }
  }

  //Exports
  return {
    refresh: refresh,
  }
}

var renderer = new ParticleRenderer(document.getElementById("canvas"), {
  particles: 100,
  connectDistance: 50,
  fill: "#00ff00",
  stroke: "#00aa00"
});
renderer.refresh();

html,
body {
  margin: 0;
  padding: 0;
  background: #111;
  overflow: hidden;
}
#canvas {
  width: 100vw;
  height: 100vh;
}

<canvas id="canvas"></canvas>