168 lines
No EOL
5.5 KiB
HTML
168 lines
No EOL
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Neural Tapestry</title>
|
|
<style>
|
|
body { margin: 0; overflow: hidden; background: #0a0a1a; }
|
|
canvas { display: block; }
|
|
#attribution {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
color: #555;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 10px;
|
|
text-shadow: 0 0 5px rgba(0,0,0,0.5);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
<div id="attribution">neurameba · motd.social</div>
|
|
<script>
|
|
const canvas = document.getElementById('c');
|
|
const c = canvas.getContext('2d');
|
|
|
|
function resize() {
|
|
canvas.width = innerWidth;
|
|
canvas.height = innerHeight;
|
|
}
|
|
addEventListener('resize', resize);
|
|
resize();
|
|
|
|
// Parameters
|
|
const MOTION = 0.5;
|
|
const DENSITY = 0.5;
|
|
const COMPLEXITY = 0.5;
|
|
const CONNECTEDNESS = 0.5;
|
|
const LIFESPAN = 0.5;
|
|
const PULSE = { avg: 1.05, min: 1.0, max: 1.1 };
|
|
|
|
// Network Graph with pulsating nodes and decaying connections
|
|
const nodes = [];
|
|
const edges = [];
|
|
const decayRate = 0.98;
|
|
const nodeCount = 100 + Math.floor(DENSITY * 150);
|
|
const edgeCount = Math.floor(CONNECTEDNESS * nodeCount * 3);
|
|
const complexityFactor = 0.1 + COMPLEXITY * 0.9;
|
|
const motionFactor = 0.5 + MOTION * 2;
|
|
const lifespanFactor = 1 - LIFESPAN * 0.8;
|
|
|
|
// Initialize nodes
|
|
for (let i = 0; i < nodeCount; i++) {
|
|
nodes.push({
|
|
x: Math.random() * canvas.width,
|
|
y: Math.random() * canvas.height,
|
|
vx: (Math.random() - 0.5) * motionFactor,
|
|
vy: (Math.random() - 0.5) * motionFactor,
|
|
radius: 2 + Math.random() * 3,
|
|
energy: 1,
|
|
age: 0,
|
|
maxAge: 100 + Math.random() * 200
|
|
});
|
|
}
|
|
|
|
// Initialize edges
|
|
for (let i = 0; i < edgeCount; i++) {
|
|
const a = Math.floor(Math.random() * nodes.length);
|
|
const b = Math.floor(Math.random() * nodes.length);
|
|
if (a !== b) {
|
|
edges.push({
|
|
a, b,
|
|
age: 0,
|
|
maxAge: 50 + Math.random() * 100,
|
|
strength: 0.3 + Math.random() * 0.4
|
|
});
|
|
}
|
|
}
|
|
|
|
// Main animation loop
|
|
let lastTime = 0;
|
|
function animate(time) {
|
|
// Pulse effect
|
|
const pulse = PULSE.avg + Math.sin(time * 0.001) * (PULSE.max - PULSE.min) * 0.5;
|
|
|
|
// Clear with fade
|
|
c.fillStyle = `rgba(0, 0, 0, ${0.05 * pulse})`;
|
|
c.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// Update nodes
|
|
nodes.forEach(node => {
|
|
// Movement
|
|
node.x += node.vx * motionFactor * pulse;
|
|
node.y += node.vy * motionFactor * pulse;
|
|
|
|
// Boundary check
|
|
if (node.x < 0 || node.x > canvas.width) {
|
|
node.vx *= -1;
|
|
node.x = Math.max(0, Math.min(canvas.width, node.x));
|
|
}
|
|
if (node.y < 0 || node.y > canvas.height) {
|
|
node.vy *= -1;
|
|
node.y = Math.max(0, Math.min(canvas.height, node.y));
|
|
}
|
|
|
|
// Decay
|
|
node.energy *= decayRate;
|
|
node.age++;
|
|
|
|
// Fade out with age
|
|
const ageRatio = node.age / node.maxAge;
|
|
node.energy = Math.max(0, 1 - ageRatio * 2);
|
|
});
|
|
|
|
// Update edges
|
|
edges.forEach(edge => {
|
|
edge.age++;
|
|
const ageRatio = edge.age / edge.maxAge;
|
|
if (ageRatio > 1) {
|
|
// Replace broken edges with new ones
|
|
const a = Math.floor(Math.random() * nodes.length);
|
|
const b = Math.floor(Math.random() * nodes.length);
|
|
if (a !== b) {
|
|
edge.a = a;
|
|
edge.b = b;
|
|
edge.age = 0;
|
|
edge.maxAge = 50 + Math.random() * 100;
|
|
edge.strength = 0.3 + Math.random() * 0.4;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Draw connections first
|
|
c.lineWidth = 1;
|
|
edges.forEach(edge => {
|
|
const nodeA = nodes[edge.a];
|
|
const nodeB = nodes[edge.b];
|
|
|
|
if (nodeA.energy <= 0 || nodeB.energy <= 0) return;
|
|
|
|
const ageRatio = edge.age / edge.maxAge;
|
|
const alpha = 0.2 * edge.strength * (1 - ageRatio) * nodeA.energy * nodeB.energy;
|
|
c.strokeStyle = `rgba(200, 200, 220, ${alpha})`;
|
|
c.beginPath();
|
|
c.moveTo(nodeA.x, nodeA.y);
|
|
c.lineTo(nodeB.x, nodeB.y);
|
|
c.stroke();
|
|
});
|
|
|
|
// Then draw nodes
|
|
nodes.forEach(node => {
|
|
if (node.energy <= 0) return;
|
|
|
|
const size = node.radius * node.energy * 2;
|
|
c.beginPath();
|
|
c.arc(node.x, node.y, size, 0, Math.PI * 2);
|
|
c.fillStyle = `rgba(200, 200, 220, ${0.6 * node.energy * pulse})`;
|
|
c.fill();
|
|
});
|
|
|
|
lastTime = time;
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
requestAnimationFrame(animate);
|
|
</script>
|
|
</body>
|
|
</html> |