ES6 Classes & canvas

orbs.js

const canvas = document.getElementById("myCanvas");
canvas.width = width;
canvas.height = height;

class Scene {
  constructor() {
    this.orbs = [];
    this.context = canvas.getContext("2d");
  }

  addOrb(orb) {
    this.orbs.push(orb);
  }

  renderOrbs() {
    this.orbs.forEach(orb => {
      this.orbs.map(connectToObject => {
        const color = orb.options.color;
        const r = orb.options.r;
        const orbX = orb.options.x;
        const orbY = orb.options.y;
        const connectToObjectX = connectToObject.options.x;
        const connectToObjectY = connectToObject.options.y;
        const distanceBetweenOrbs = Math.sqrt( (orbX-connectToObjectX) * (orbX-connectToObjectX) + (orbY-connectToObjectY) * (orbY-connectToObjectY) );
        if (distanceBetweenOrbs < 500) {
            orb.connect(this.context, connectToObject);
            this.squares.map(square => {
                let squareX = square.options.x;
                let squareY = square.options.y;
                let squareWidth = square.options.width;
                const distanceBetweenSquares = Math.sqrt( (orbX-squareX) * (orbX-squareX) + (orbY-squareY) * (orbY-squareY) );
                if (distanceBetweenSquares < squareWidth) {
                    square.blink();
                }
            });
        }
      });
      orb.draw(this.context);
    });
  }

  render() {
    setInterval(() => {
      this.context.clearRect(0, 0, windowWidth, windowHeight);
      const gradient = this.context.createLinearGradient(0,0,0,this.context.canvas.height);
      gradient.addColorStop(0, '#00053f');
      gradient.addColorStop(1, "#012289");
      this.context.fillStyle = gradient;
      this.context.fillRect(0, 0, this.context.canvas.width, this.context.canvas.height);
      this.orbs.length > 1 && this.renderOrbs();
    }, 25);
  }
}

class Orb {
  constructor(options) {
    this.options = options;
  }

  connect(ctx, connectTo) {
    let x = this.options.x;
    let y = this.options.y;
    if (this.isXOutOfBounds(x)) return;
    if (this.isYOutOfBounds(y)) return;

    ctx.beginPath();
    ctx.moveTo(this.options.x, this.options.y);
    ctx.lineTo(connectTo.options.x, connectTo.options.y);
    ctx.lineWidth = 1;
    ctx.strokeStyle = connectTo.options.color;
    ctx.stroke();
    this.options.dy =- this.options.dy;
  }

  draw(ctx) {
    let x = this.options.x;
    let y = this.options.y;
    let r = this.options.radius;
    let dx = this.options.dx;
    let dy = this.options.dy;

    if (this.isXOutOfBounds(x)) this.options.dx =- dx;
    if (this.isYOutOfBounds(y)) this.options.dy =- dy;

    this.options.x += this.options.dx;
    this.options.y += this.options.dy;

    ctx.beginPath();
    ctx.arc(this.options.x, this.options.y, this.options.radius, 0, 2 * Math.PI, false);
    ctx.lineWidth = 1;
    ctx.fillStyle = this.options.color;
    ctx.shadowColor='white';
    ctx.shadowOffsetX=0;
    ctx.shadowOffsetY=0;
    ctx.shadowBlur=20;
    ctx.fill();
  }

  isXOutOfBounds(x) {
    const r = this.options.radius;
    if ( x - r < 0 || x + r > windowWidth  ) return true;
  }

  isYOutOfBounds(y) {
    const r = this.options.radius;
    if ( y - r < 0 || y + r > windowHeight ) return true;
  }
}

let orbs = [];
for (let i = 0; i < windowWidth / 100; i++) {
  let dx = Math.random() <= 0.5 ? -1 : 1;
  let dy = Math.random() <= 0.5 ? -1 : 1;
  let x = Math.floor(Math.random() * windowWidth) + 1;
  let y = Math.floor(Math.random() * windowHeight) + 1;
  let radius = Math.floor(Math.random() * 5) + 3;
  let color = "#fff";
  let orb = new Orb({ x, y, dx, dy, radius, color });
  orbs.push(orb);
}

let scene = new Scene();
orbs.forEach(orb => scene.addOrb(orb));

scene.render();