Concevoir un algorithme

1,645 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

5 October 2025

Structure HTML du conteneur d'animation CSS

14 May 2025

Un code par toninrazafison

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

HTML

CSS

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;

});