HTML Canvas Interactvie Circles

interactive-circles.css

body {
  margin: 0;
  overflow: hidden;
}

interactive-circles.html

<canvas></canvas>

interactive-circles.js

// * * * Set Canvas Config * * *
var canvas = document.querySelector("canvas");
var c = canvas.getContext("2d");
var circleArray = [];
var mouse = {
  x: undefined,
  y: undefined
}
var maxRadius = 50;
var colorArray = ["#940755", "#DFA0C4", "#E6D844", "#099EAD", "#0F8794"];

// * * * Set Listeners * * *
// * Desktop *
window.addEventListener("mousemove", e => {
  mouse.x = e.x;
  mouse.y = e.y;
});
// * Mobile *
window.addEventListener("touchmove", e => {
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
});
window.addEventListener("touchstart", e => {
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
})
window.addEventListener("touchend", e => {
  setTimeout(() => {
    mouse.x = undefined;
    mouse.y = undefined;
  })
})
// * General *
window.addEventListener("resize", () => {
  resizeCanvas();
});

// * * * Initiate Canvas * * *
setCircleArray();
resizeCanvas();
animate();

// * * * Functionality * * *
function animate() {
  clearAllCanvas();
  
  for (var i = 0; i < circleArray.length; i++) {
    var x = circleArray[i].x;
    var y = circleArray[i].y;
    drawCircle(
      x,
      y,
      circleArray[i].radius,
      circleArray[i].color
    );
    this.updateCircle(x, y, circleArray[i].radius, i);
  }
  requestAnimationFrame(animate);
}

function clearAllCanvas() {
  c.clearRect(0, 0, window.innerWidth, window.innerHeight);
}
  
function drawCircle(x, y, r, color) {
  c.beginPath();
  c.arc(x, y, r, 0, Math.PI * 2, false);
  c.fillStyle = color;
  c.fill();
}
  
function updateCircle(x, y, r, i) {
  if (x + r > window.innerWidth || x - r < 0) {
    circleArray[i].dx = -circleArray[i].dx;
  }

  if (y + r > window.innerHeight || y - r < 0) {
    circleArray[i].dy = -circleArray[i].dy;
  }

  circleArray[i].x += circleArray[i].dx;
  circleArray[i].y += circleArray[i].dy;

  // All Circles that are 50 px left, right, above, below the mouse cursor
  // Grow by 1 px, else Shrink by 1 px until Min radius. Grow to maxRadius
  if (
    mouse.x - x < 50 &&
    mouse.x - x > -50 &&
    mouse.y - y < 50 &&
    mouse.y - y > -50
  ) {
    if (circleArray[i].radius < maxRadius) {
      circleArray[i].radius += 1;
    }
  } else if (circleArray[i].radius > circleArray[i].minRadius) {
    circleArray[i].radius -= 1;
  }
}

function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
}

function init() {
  circleArray = [];
  setCircleArray();
}

function setCircleArray() {
  for (var i = 0; i < 800; i++) {
    var velocity = 1;
    var radius = Math.random() * 3 + 1; // random radius 1-4
    var circleDiameter = radius * 2;
    var circle = {
      radius: 0,
      x: Math.random() * (window.innerWidth - circleDiameter) + radius,
      y: Math.random() * (window.innerHeight - circleDiameter) + radius,
      dx: (Math.random() - 0.5) * velocity,
      dy: (Math.random() - 0.5) * velocity,
      color: colorArray[
        Math.floor(Math.random() * this.colorArray.length)
      ]
    };
    circle.radius = radius;
    circle.minRadius = radius;

    circleArray.push(circle);
  }
}