Press "Enter" to skip to content

Beautiful Constellation Effect On Mouse Over with Vanilla Javascript

Constellation effect is a nice mouseover effect with vanilla Javascript that automatically creates connected particles when the mouse moves.

constellation javascript animation, html5 canvas particle animation and parallax demo, particles js with text, javascript background animation, canvas particle animation

How to make use of it:

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

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

2. Apply your individual styles to the canvas.

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

3. The foremost script to create the constellation impact.

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();

Interactive Constellation Effect With JavaScript And Canvas Plugin/Github, constellation js


See Demo And Download

Official Website(krithikagoyal): Click Here

This superior jQuery/javascript plugin is developed by krithikagoyal. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *