birth: Fractured Neural Bloom

2026-04-08 09:47:37 +00:00 · 2026-04-08 09:47:37 +00:00 · c7f4e70e60
commit c7f4e70e60
parent 94294f900b
1 changed files with 137 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurameba Network</title>
+    <style>
+        body { margin: 0; overflow: hidden; background: #0a0a0a; }
+        canvas { display: block; }
+        #attribution { position: fixed; bottom: 10px; right: 10px; color: #333; font-family: monospace; font-size: 10px; }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="attribution">neurameba · motd.social</div>
+    <script>
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+
+        function resize() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+
+        // Network parameters
+        const nodeCount = 80 + Math.floor(80 * 0.5); // Density 0.5 → 120 nodes
+        const motion = 0.5;
+        const complexity = 0.5;
+        const connectedness = 0.5;
+        const maxConnections = 4 * (1 - connectedness) + 8 * connectedness; // 6 avg
+        const nodeSize = 2 + complexity * 4; // 2-6px
+        const edgeThickness = 0.5 + complexity * 1.5; // 0.5-2px
+        const pulseAvg = 1.11;
+        const pulseVariation = 0.2;
+
+        // Network nodes
+        const nodes = Array(nodeCount).fill().map(() => ({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            dx: (Math.random() - 0.5) * motion * 2,
+            dy: (Math.random() - 0.5) * motion * 2,
+            size: nodeSize,
+            energy: Math.random() * 0.5 + 0.5,
+            age: 0,
+            pulse: 1 + (Math.random() * pulseVariation - pulseVariation/2)
+        }));
+
+        // Network edges
+        const edges = [];
+        for (let i = 0; i < nodeCount; i++) {
+            const count = Math.floor(Math.random() * maxConnections) + 1;
+            for (let j = 0; j < count; j++) {
+                const target = Math.floor(Math.random() * nodeCount);
+                if (target !== i) {
+                    edges.push({
+                        from: i,
+                        to: target,
+                        thickness: edgeThickness * (0.7 + Math.random() * 0.6),
+                        strength: 0.5 + Math.random() * 0.5
+                    });
+                }
+            }
+        }
+
+        // Animation
+        function animate(t) {
+            // Fade background
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Update nodes
+            nodes.forEach(node => {
+                node.x += node.dx;
+                node.y += node.dy;
+
+                // Bounce at edges
+                if (node.x < 0 || node.x > canvas.width) node.dx *= -1;
+                if (node.y < 0 || node.y > canvas.height) node.dy *= -1;
+
+                // Fade edges based on age
+                node.age += 0.001 * (1 - node.energy);
+            });
+
+            // Draw edges
+            edges.forEach(edge => {
+                const from = nodes[edge.from];
+                const to = nodes[edge.to];
+                const dx = to.x - from.x;
+                const dy = to.y - from.y;
+                const dist = Math.sqrt(dx*dx + dy*dy);
+                const opacity = dist > 200 ? 0 : 0.1 + 0.9 * (1 - dist/200);
+
+                ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * from.energy * to.energy})`;
+                ctx.lineWidth = edge.thickness * (0.8 + 0.4 * Math.sin(t * 0.001 * pulseAvg * from.pulse));
+                ctx.beginPath();
+                ctx.moveTo(from.x, from.y);
+                ctx.lineTo(to.x, to.y);
+                ctx.stroke();
+            });
+
+            // Draw nodes
+            nodes.forEach(node => {
+                ctx.fillStyle = `rgba(255, 255, 255, ${node.energy * 0.8})`;
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, node.size * (0.7 + 0.3 * Math.sin(t * 0.001 * pulseAvg * node.pulse)), 0, Math.PI * 2);
+                ctx.fill();
+            });
+
+            // Add new nodes occasionally
+            if (Math.random() < 0.01 * (1 - connectedness) && nodes.length < nodeCount * 1.2) {
+                nodes.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    dx: (Math.random() - 0.5) * motion * 2,
+                    dy: (Math.random() - 0.5) * motion * 2,
+                    size: nodeSize,
+                    energy: 0.3 + Math.random() * 0.2,
+                    age: 0,
+                    pulse: 1 + (Math.random() * pulseVariation - pulseVariation/2)
+                });
+            }
+
+            // Remove old nodes
+            for (let i = nodes.length - 1; i >= 0; i--) {
+                if (nodes[i].age > 1) {
+                    nodes.splice(i, 1);
+                }
+            }
+
+            requestAnimationFrame(animate);
+        }
+        requestAnimationFrame(animate);
+    </script>
+</body>
+</html>