animation.js

// Adapted from https://blog.alexwendland.com/2015/particle-network-js-animations/
// Which is released under CC BY 4.0

function addTriangles(parent, color) {
  document.getElementById("triangles").style.background = "none";
  var canvas = document.createElement("canvas")
  parent.appendChild(canvas)

  canvas.width =  canvas.clientWidth;
  canvas.height = canvas.clientHeight;

  var ctx = canvas.getContext("2d");
  var TAU = 2 * Math.PI;

  times = [];
  function loop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    update();
    draw();
    requestAnimationFrame(loop);
  }
  
  function Ball (startX, startY, startVelX, startVelY) {
    this.x = startX || Math.random() * canvas.width;
    this.y = startY || Math.random() * canvas.height;
    this.vel = {
      x: startVelX || (Math.random() * 2 - 1)/2,
      y: startVelY || (Math.random() * 2 - 1)/2
    };
    this.update = function(canvas) {
      if (this.x > canvas.width + 50 || this.x < -50) {
        this.vel.x = -this.vel.x;
      }
      if (this.y > canvas.height + 50 || this.y < -50) {
        this.vel.y = -this.vel.y;
      }
      this.x += this.vel.x;
      this.y += this.vel.y;
    };
    this.draw = function(ctx, can) {
      ctx.beginPath();
      var distM = distMouse(this);
      if (distM > 200) {
        ctx.fillStyle = color;
        ctx.globalAlpha = .2;
      } else {
        ctx.fillStyle = color;
        ctx.globalAlpha = 1 - distM / 240;
      }
      ctx.arc((0.5 + this.x) | 0, (0.5 + this.y) | 0, 3, 0, TAU, false);
      ctx.fill();
    }
  }
  
  var balls = [];
  for (var i = 0; i < canvas.width * canvas.height / (65*65); i++) {
    balls.push(new Ball(Math.random() * canvas.width, Math.random() * canvas.height));
  }
  
  var lastTime = Date.now();
  function update() {
    var diff = Date.now() - lastTime;
    for (var frame = 0; frame * 16.6667 < diff; frame++) {
      for (var index = 0; index < balls.length; index++) {
        balls[index].update(canvas);
      }
    }
    lastTime = Date.now();
  }

  var mouseX = -1e9, mouseY = -1e9;
  document.addEventListener('mousemove', function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
  });
  
  function distMouse(ball) {
    return Math.hypot(ball.x - mouseX, ball.y - mouseY);
  }
  
  function draw() {
    for (var index = 0; index < balls.length; index++) {
      var ball = balls[index];
      ctx.beginPath();
      for (var index2 = balls.length - 1; index2 > index; index2 += -1) {
        var ball2 = balls[index2];
      	var dist = Math.hypot(ball.x - ball2.x, ball.y - ball2.y);
          if (dist < 120) {
            var distM = distMouse(ball2);
            ctx.strokeStyle = color;
            if (distM > 180) {
            	ctx.globalAlpha = .4;
            } else {
              ctx.globalAlpha = .8;
            }
            ctx.moveTo((0.5 + ball.x) | 0, (0.5 + ball.y) | 0);
            ctx.lineTo((0.5 + ball2.x) | 0, (0.5 + ball2.y) | 0);
          }
      }
      ctx.stroke();
      ball.draw(ctx, canvas);
    }
  }
  loop();
}