mirror of
https://github.com/mudler/LocalAI.git
synced 2025-01-16 01:39:49 +00:00
13cb7960bd
feat(p2p): add animated header with anime.js Signed-off-by: Ettore Di Giacinto <mudler@localai.io>
73 lines
2.0 KiB
JavaScript
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(); |