88 lines
1.9 KiB
JavaScript
88 lines
1.9 KiB
JavaScript
const canvas = document.getElementById('netcanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
let w = canvas.width = window.innerWidth;
|
|
let h = canvas.height = window.innerHeight;
|
|
|
|
// Partikel-Definition
|
|
class Node {
|
|
constructor() {
|
|
this.x = Math.random() * w;
|
|
this.y = Math.random() * h;
|
|
this.vx = (Math.random() - 0.5) * 0.2;
|
|
this.vy = (Math.random() - 0.5) * 0.2;
|
|
}
|
|
move() {
|
|
this.x += this.vx;
|
|
this.y += this.vy;
|
|
if (this.x < 0 || this.x > w) this.vx *= -1;
|
|
if (this.y < 0 || this.y > h) this.vy *= -1;
|
|
}
|
|
draw() {
|
|
ctx.beginPath();
|
|
ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
// Konfiguration
|
|
const config = {
|
|
nodeCount: 30,
|
|
connectDist: 80,
|
|
lineAlpha: 0.08,
|
|
glowColor: 'rgba(152, 165, 177, 0.4)',
|
|
nodeColor: 'rgba(135, 162, 184, 0.6)'
|
|
};
|
|
|
|
// Erzeuge Nodes
|
|
const nodes = [];
|
|
for (let i = 0; i < config.nodeCount; i++) {
|
|
nodes.push(new Node());
|
|
}
|
|
|
|
// Animation
|
|
function animate() {
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
// Linien zeichnen
|
|
ctx.strokeStyle = config.glowColor;
|
|
ctx.lineWidth = 0.8;
|
|
ctx.shadowBlur = 3;
|
|
ctx.shadowColor = config.glowColor;
|
|
|
|
for (let i = 0; i < nodes.length; i++) {
|
|
const a = nodes[i];
|
|
for (let j = i + 1; j < nodes.length; j++) {
|
|
const b = nodes[j];
|
|
const dx = a.x - b.x, dy = a.y - b.y;
|
|
const dist = Math.hypot(dx, dy);
|
|
if (dist < config.connectDist) {
|
|
ctx.globalAlpha = config.lineAlpha * (1 - dist / config.connectDist);
|
|
ctx.beginPath();
|
|
ctx.moveTo(a.x, a.y);
|
|
ctx.lineTo(b.x, b.y);
|
|
ctx.stroke();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Nodes zeichnen
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillStyle = config.nodeColor;
|
|
ctx.shadowBlur = 4;
|
|
ctx.shadowColor = config.nodeColor;
|
|
nodes.forEach(n => {
|
|
n.move();
|
|
n.draw();
|
|
});
|
|
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
animate();
|
|
|
|
// Responsiv
|
|
window.addEventListener('resize', () => {
|
|
w = canvas.width = window.innerWidth;
|
|
h = canvas.height = window.innerHeight;
|
|
}); |