Interactive Constellation Effect With JavaScript And Canvas

An interactive constellation effect that automatically generated connected particles when the mouse moves.

How to use it:

1. Create an HTML5 canvas element on which the constellation effect renders.

<canvas id=”mycanvas”></canvas>

2. Apply your own styles to the canvas.

#mycanvas {
  position: absolute;
  background-color: black;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

3. The main script to create the constellation effect.

const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let particles = [];
window.addEventListener('resize', function (e) {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});
let hueCol = 0;
const mouse = {
  x: undefined,
  y: undefined,
}
canvas.addEventListener('click', function (e) {
  mouse.x = e.x;
  mouse.y = e.y;
  for (let i = 0; i < 5; i++) {
    particles.push(new Particle);
  }
})
canvas.addEventListener('mousemove', function (e) {
  mouse.x = e.x;
  mouse.y = e.y;
  for (let i = 0; i < 5; i++) {
    particles.push(new Particle);
  }
})
class Particle {
  constructor() {
    this.x = mouse.x;
    this.y = mouse.y;
    this.speedX = Math.random() * 3 - 1.5;
    this.speedY = Math.random() * 3 - 1.5;
    this.color = 'hsl(' + hueCol + ', 100%, 50%)';
    this.size = Math.random() * 5 + 1;
  }
  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    this.size -= 0.1;
  }
  draw() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, 5, 0, Math.PI * 2);
    ctx.fill();
  }
}
function handleParticles() {
  for (var i = 0; i < particles.length; i++) {
    particles[i].update();
    particles[i].draw();
    for (var j = i + 1; j < particles.length; j++) {
      const dx = particles[j].x - particles[i].x;
      const dy = particles[j].y - particles[i].y;
      const distance = dx * dx + dy * dy;
      if (distance < 10000) {
        ctx.beginPath();
        ctx.strokeStyle = particles[i].color;
        ctx.lineWidth = 0.3;
        ctx.moveTo(particles[i].x, particles[i].y);
        ctx.lineTo(particles[j].x, particles[j].y);
        ctx.stroke();
      }
    }
    if (particles.size < 0.3) {
      particles.splice(i, 1);
      i--;
    }
  }
}
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  // ctx.fillRect(0, 0, canvas.width, canvas.height);
  handleParticles();
  hueCol += 2;
  requestAnimationFrame(animate);
}
animate();