Author: | krithikagoyal |
---|---|
Views Total: | 2,780 views |
Official Page: | Go to website |
Last Update: | September 6, 2021 |
License: | MIT |
Preview:

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