birth: Fractal Tendrils in Twilight

2026-05-05 13:47:15 +00:00 · 2026-05-05 13:47:15 +00:00 · 46dfde0b7b
commit 46dfde0b7b
parent 8e44eaae6f
1 changed files with 139 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>neurameba · motd.social</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            color: #444;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            font-size: 10px;
+            color: #333;
+            pointer-events: none;
+        }
+    </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 resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        const nodes = [];
+        const links = [];
+
+        // Initialize based on parameters
+        const nodeCount = Math.floor(150 + 50 * 1); // density 0.5 -> 200 nodes
+        const motionFactor = 0.5;
+        const complexityFactor = 0.5;
+        const connectednessFactor = 0.5;
+
+        // Create 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,
+                size: 2 + Math.random() * 2 * complexityFactor,
+                color: `hsl(${Math.random() * 60 + 180}, ${100 * (1 - complexityFactor)}%, 70%)`
+            });
+        }
+
+        // Create links based on connectedness
+        const maxLinks = nodeCount * (0.1 + 0.8 * connectednessFactor);
+        for (let i = 0; i < maxLinks; i++) {
+            const a = nodes[Math.floor(Math.random() * nodes.length)];
+            const b = nodes[Math.floor(Math.random() * nodes.length)];
+            if (a !== b) {
+                links.push({
+                    a, b,
+                    strength: 0.1 + 0.9 * connectednessFactor
+                });
+            }
+        }
+
+        // Drawing variables
+        let pulse = 1.12;
+
+        function draw() {
+            // Clear with slight fade
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Apply pulse effect
+            pulse = pulse * 0.95 + (1.12 + (Math.random() - 0.5) * 0.15) * 0.05;
+
+            // Update nodes
+            nodes.forEach(node => {
+                // Bounce off edges
+                if (node.x < 0 || node.x > canvas.width) node.vx *= -1;
+                if (node.y < 0 || node.y > canvas.height) node.vy *= -1;
+
+                // Slow down over time
+                node.vx *= 0.99;
+                node.vy *= 0.99;
+
+                node.x += node.vx * pulse;
+                node.y += node.vy * pulse;
+            });
+
+            // Update links
+            links.forEach(link => {
+                const dx = link.b.x - link.a.x;
+                const dy = link.b.y - link.a.y;
+                const dist = Math.sqrt(dx * dx + dy * dy);
+
+                // Apply force
+                const force = (dist > 100 ? 0.1 : 0.01) * link.strength * pulse;
+                link.a.vx += dx / dist * force;
+                link.a.vy += dy / dist * force;
+                link.b.vx -= dx / dist * force;
+                link.b.vy -= dy / dist * force;
+            });
+
+            // Draw links
+            ctx.lineWidth = 0.5 + 1.5 * connectednessFactor;
+            ctx.strokeStyle = 'rgba(100, 200, 255, 0.1)';
+            links.forEach(link => {
+                ctx.beginPath();
+                ctx.moveTo(link.a.x, link.a.y);
+                ctx.lineTo(link.b.x, link.b.y);
+                ctx.stroke();
+            });
+
+            // Draw nodes
+            nodes.forEach(node => {
+                ctx.beginPath();
+                ctx.arc(node.x, node.y, node.size * (0.8 + 0.2 * Math.sin(Date.now() * 0.001)), 0, Math.PI * 2);
+                ctx.fillStyle = node.color;
+                ctx.fill();
+            });
+
+            requestAnimationFrame(draw);
+        }
+
+        draw();
+    </script>
+</body>
+</html>