script.js

"use strict";

const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let particleArray = [];

let mouse = {
  x: null,
  y: null,
  radius: (canvas.height / 160) * (canvas.width / 160),
};

window.addEventListener("mousemove", function (event) {
  mouse.x = event.x;
  mouse.y = event.y;
});

class Particle {
  constructor(x, y, directionX, directionY, size, color) {
    this.x = x;
    this.y = y;
    this.directionX = directionX;
    this.directionY = directionY;
    this.size = size;
    this.color = color;
  }

  Draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
    ctx.fillStyle = "#FFFFFF";
    ctx.fill();
  }

  Update() {
    if (this.x > canvas.width || this.x < 0) {
      this.directionX = -this.directionX;
    }
    if (this.y > canvas.height || this.y < 0) {
      this.directionY = -this.directionY;
    }

    //collision detection
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    if (distance < mouse.radius + this.size) {
      if (mouse.x < this.x && this.x < canvas.width - this.size * 10) {
        this.x += 10;
      }
      if (mouse.x > this.x && this.x > this.size * 10) {
        this.x -= 10;
      }
      if (mouse.y < this.y && this.y < canvas.height - this.size * 10) {
        this.y += 10;
      }
      if (mouse.y > this.y && this.y > this.size * 10) {
        this.y -= 10;
      }
    }
    this.x += this.directionX;
    this.y += this.directionY;
    this.Draw();
  }
}

function Init() {
  let numberOfParticles = (canvas.height * canvas.width) / 8000;
  for (let i = 0; i < numberOfParticles; ++i) {
    let size = Math.random() * 5 + 0.5;
    let x = Math.random() * (innerHeight - size * 2 - size * 2 + size * 2);
    let y = Math.random() * (innerHeight - size * 2 - size * 2 + size * 2);
    let directionX = Math.random() * 5 - 2.5;
    let directionY = Math.random() * 5 - 2.5;
    let color = "#FFFFFF";
    particleArray.push(new Particle(x, y, directionX, directionY, size, color));
  }
}

function Animate() {
  requestAnimationFrame(Animate);
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  for (let i = 0; i < particleArray.length; ++i) {
    particleArray[i].Update();
  }
  Connect();
}

function Connect() {
  let opacity = 1;
  for (let i = 0; i < particleArray.length; ++i) {
    for (let j = i; j < particleArray.length; ++j) {
      let distance =
        (particleArray[i].x - particleArray[j].x) *
          (particleArray[i].x - particleArray[j].x) +
        (particleArray[i].y - particleArray[j].y) *
          (particleArray[i].y - particleArray[j].y);
      if (distance < (canvas.width / 7) * (canvas.height / 7)) {
        opacity = 1 - distance / 20000;
        ctx.strokeStyle = "rgba(255,255,255, " + opacity + ")";
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(particleArray[i].x, particleArray[i].y);
        ctx.lineTo(particleArray[j].x, particleArray[j].y);
        ctx.stroke();
      }
    }
  }
}

window.addEventListener("resize", () => {
  canvas.width = innerWidth;
  canvas.height = innerHeight;
  mouse.radius = (canvas.height / 80) * (canvas.height / 80);
  Init();
});

window.addEventListener("mouseout", () => {
  mouse.x = undefined;
  mouse.y = undefined;
});

Init();
Animate();