LocalAI/core/http/static/p2panimation.js
Ettore Di Giacinto 13cb7960bd
chore(ux): add animated header with anime.js in p2p sections (#3271)
feat(p2p): add animated header with anime.js

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
2024-08-19 18:05:02 +02:00

73 lines
2.0 KiB
JavaScript

const canvas = document.getElementById('networkCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const lines = [];
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 2 + Math.random() * 2;
this.color = `rgba(0, 255, 204, ${Math.random()})`;
this.speed = Math.random() * 2 + 1;
this.angle = Math.random() * Math.PI * 2;
}
update() {
this.x += Math.cos(this.angle) * this.speed;
this.y += Math.sin(this.angle) * this.speed;
if (this.x < 0 || this.x > canvas.width || this.y < 0 || this.y > canvas.height) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
}
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = this.color;
ctx.fill();
}
}
function connectParticles() {
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const distance = Math.hypot(particles[i].x - particles[j].x, particles[i].y - particles[j].y);
if (distance < 150) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.strokeStyle = `rgba(0, 255, 204, ${1 - distance / 150})`;
ctx.stroke();
}
}
}
}
function initParticles(num) {
for (let i = 0; i < num; i++) {
particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.update();
particle.draw();
});
connectParticles();
requestAnimationFrame(animate);
}
initParticles(100);
animate();