birth: Pulsing Neural Web

2026-04-14 05:47:18 +00:00 · 2026-04-14 05:47:18 +00:00 · 84f3c1dc71
commit 84f3c1dc71
parent 68876a6165
1 changed files with 168 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,168 @@
+<!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>