(() => { const canvas = document.getElementById('neural-bg'); const ctx = canvas.getContext('2d'); let W, H, dpr; // Palette smeraldo const PALETTE = { nodeCoreBright: 'rgba(167, 243, 208, 1)', nodeCore: 'rgba(110, 231, 183, 1)', nodeGlow: 'rgba(16, 185, 129, 1)', linkBase: '16, 185, 129', linkHot: '167, 243, 208', pulse: 'rgba(220, 252, 231, 1)', accentDeep: 'rgba(5, 150, 105, 1)', }; const CONFIG = { density: 0.00014, minNodes: 70, maxNodes: 180, maxLinkDist: 180, speed: 0.28, pulseSpeed: 0.014, pulseChance: 0.0022, nodeRadius: [1.3, 2.6], mouseRadius: 260, mouseAttract: 0.06, repelRadius: 80, repelForce: 0.9, glowMultiplier: 7, }; const mouse = { x: -9999, y: -9999, active: false, }; let nodes = []; let pulses = []; const rand = (a, b) => a + Math.random() * (b - a); function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); W = window.innerWidth; H = window.innerHeight; canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + 'px'; canvas.style.height = H + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); initNodes(); } function initNodes() { const target = Math.max( CONFIG.minNodes, Math.min(CONFIG.maxNodes, Math.floor(W * H * CONFIG.density)) ); nodes = []; for (let i = 0; i < target; i++) { nodes.push({ x: Math.random() * W, y: Math.random() * H, vx: rand(-1, 1) * CONFIG.speed, vy: rand(-1, 1) * CONFIG.speed, r: rand(CONFIG.nodeRadius[0], CONFIG.nodeRadius[1]), baseR: 0, phase: Math.random() * Math.PI * 2, energy: 0, }); } for (const n of nodes) { n.baseR = n.r; } pulses = []; } function step() { ctx.fillStyle = 'rgba(0, 0, 0, 0.38)'; ctx.fillRect(0, 0, W, H); ctx.globalCompositeOperation = 'lighter'; // Aggiorna nodi for (const n of nodes) { n.x += n.vx; n.y += n.vy; if (n.x < 0) { n.x = 0; n.vx *= -1; } else if (n.x > W) { n.x = W; n.vx *= -1; } if (n.y < 0) { n.y = 0; n.vy *= -1; } else if (n.y > H) { n.y = H; n.vy *= -1; } if (mouse.active) { const dx = mouse.x - n.x; const dy = mouse.y - n.y; const d = Math.hypot(dx, dy); if (d < CONFIG.mouseRadius && d > 0.5) { if (d > CONFIG.repelRadius) { const f = (1 - d / CONFIG.mouseRadius) * CONFIG.mouseAttract; n.vx += (dx / d) * f * 0.05; n.vy += (dy / d) * f * 0.05; } else { const f = (1 - d / CONFIG.repelRadius) * CONFIG.repelForce; n.vx -= (dx / d) * f * 0.15; n.vy -= (dy / d) * f * 0.15; n.energy = Math.min(1, n.energy + 0.05); } n.energy = Math.min( 1, n.energy + (1 - d / CONFIG.mouseRadius) * 0.015 ); } } n.vx *= 0.985; n.vy *= 0.985; const v = Math.hypot(n.vx, n.vy); if (v < CONFIG.speed * 0.4) { const ang = Math.atan2(n.vy || 0.01, n.vx || 0.01); n.vx = Math.cos(ang) * CONFIG.speed * 0.6; n.vy = Math.sin(ang) * CONFIG.speed * 0.6; } n.energy *= 0.96; } // Connessioni 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; const dy = a.y - b.y; const d = Math.hypot(dx, dy); if (d < CONFIG.maxLinkDist) { const t = 1 - d / CONFIG.maxLinkDist; const energy = Math.max(a.energy, b.energy); const alpha = t * (0.35 + energy * 0.55); const rgb = energy > 0.3 ? PALETTE.linkHot : PALETTE.linkBase; const w = 0.6 + t * 0.8 + energy * 1.4; ctx.strokeStyle = `rgba(${rgb}, ${alpha.toFixed(3)})`; ctx.lineWidth = w; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); if ( Math.random() < CONFIG.pulseChance + energy * 0.01 && pulses.length < 80 ) { pulses.push({ from: a, to: b, t: 0, hot: energy > 0.3, }); } } } } // Pulses lungo le connessioni for (let i = pulses.length - 1; i >= 0; i--) { const p = pulses[i]; p.t += CONFIG.pulseSpeed; if (p.t >= 1) { pulses.splice(i, 1); continue; } const x = p.from.x + (p.to.x - p.from.x) * p.t; const y = p.from.y + (p.to.y - p.from.y) * p.t; const fade = Math.sin(p.t * Math.PI); const glowRad = p.hot ? 14 : 9; const grad = ctx.createRadialGradient(x, y, 0, x, y, glowRad); grad.addColorStop( 0, p.hot ? 'rgba(220,252,231,1)' : 'rgba(167,243,208,1)' ); grad.addColorStop(0.4, 'rgba(16,185,129,0.6)'); grad.addColorStop(1, 'rgba(16,185,129,0)'); ctx.fillStyle = grad; ctx.globalAlpha = fade; ctx.beginPath(); ctx.arc(x, y, glowRad, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = PALETTE.pulse; ctx.beginPath(); ctx.arc(x, y, 1.8, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; // Nodi const time = performance.now() * 0.001; for (const n of nodes) { const breathe = 0.85 + Math.sin(time * 1.4 + n.phase) * 0.15; const energyBoost = 1 + n.energy * 1.6; const r = n.baseR * breathe * energyBoost; const glowR = r * CONFIG.glowMultiplier * (1 + n.energy * 0.6); const grad = ctx.createRadialGradient( n.x, n.y, 0, n.x, n.y, glowR ); grad.addColorStop( 0, `rgba(110, 231, 183, ${(0.42 + n.energy * 0.3).toFixed(3)})` ); grad.addColorStop( 0.3, `rgba(16, 185, 129, ${(0.22 + n.energy * 0.25).toFixed(3)})` ); grad.addColorStop(1, 'rgba(16, 185, 129, 0)'); ctx.fillStyle = grad; ctx.beginPath(); ctx.arc(n.x, n.y, glowR, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = n.energy > 0.3 ? PALETTE.nodeCoreBright : PALETTE.nodeCore; ctx.beginPath(); ctx.arc(n.x, n.y, r, 0, Math.PI * 2); ctx.fill(); if (n.energy > 0.1) { ctx.fillStyle = `rgba(255, 255, 255, ${(n.energy * 0.8).toFixed(3)})`; ctx.beginPath(); ctx.arc(n.x, n.y, r * 0.5, 0, Math.PI * 2); ctx.fill(); } } ctx.globalCompositeOperation = 'source-over'; requestAnimationFrame(step); } function setMouse(x, y) { mouse.x = x; mouse.y = y; mouse.active = true; } window.addEventListener('resize', resize); window.addEventListener('mousemove', (e) => { setMouse(e.clientX, e.clientY); }); window.addEventListener('mouseleave', () => { mouse.active = false; }); window.addEventListener( 'touchmove', (e) => { if (e.touches[0]) { setMouse(e.touches[0].clientX, e.touches[0].clientY); } }, { passive: true } ); window.addEventListener('touchend', () => { mouse.active = false; }); if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { CONFIG.speed = 0.08; CONFIG.pulseChance = 0; } resize(); requestAnimationFrame(step); })();

Sfondo Neurale Interattivo