Webleb - Code-Snippets - Ein Code von yuhhxn

HTML

CSS

JS

const canvas = document.getElementById('network-canvas');

const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

const nodes = [];

const maxNodes = 100;

const maxDistance = 100;

// Yeşil tonlar için renk ayarları

const nodeColor = '#00ff4c'; // Daha parlak yeşil

const lineColorBase = '0, 255, 76'; // RGB yeşil ton

class Node {

constructor(x, y) {

this.x = x;

this.y = y;

this.vx = (Math.random() - 0.5) * 2;

this.vy = (Math.random() - 0.5) * 2;

}

update() {

this.x += this.vx;

this.y += this.vy;

if (this.x < 0 || this.x > canvas.width) this.vx *= -1;

if (this.y < 0 || this.y > canvas.height) this.vy *= -1;

}

draw() {

ctx.beginPath();

ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);

ctx.fillStyle = nodeColor;

ctx.fill();

}

for (let i = 0; i < maxNodes; i++) {

nodes.push(new Node(Math.random() * canvas.width, Math.random() * canvas.height));

}

function drawConnections() {

for (let i = 0; i < nodes.length; i++) {

for (let j = i + 1; j < nodes.length; j++) {

const dx = nodes[i].x - nodes[j].x;

const dy = nodes[i].y - nodes[j].y;

const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < maxDistance) {

ctx.beginPath();

ctx.moveTo(nodes[i].x, nodes[i].y);

ctx.lineTo(nodes[j].x, nodes[j].y);

ctx.strokeStyle = `rgba(${lineColorBase}, ${1 - distance / maxDistance})`;

ctx.stroke();

}

function animate() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (const node of nodes) {

node.update();

node.draw();

}

drawConnections();

requestAnimationFrame(animate);

}

animate();

window.addEventListener('resize', () => {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

});

Ein Code von yuhhxn

Empfohlen

Ein Code von alejandrokundrah

Ein Code von Codex

EINFACHE ZÄHLUNG

HTML

CSS

JS

Empfohlen

Ein Code von alejandrokundrah

Ein Code von Codex

EINFACHE ZÄHLUNG

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS