birth: Fractal Spine of Drift

2026-07-20 05:47:19 +00:00 · 2026-07-20 05:47:19 +00:00 · 7cc3c3d7e4
commit 7cc3c3d7e4
parent 3b24349826
1 changed files with 123 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fractal Drift</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: #000;
+            color: #fff;
+            font-family: monospace;
+            display: flex;
+            justify-content: center;
+            align-items: flex-end;
+            height: 100vh;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: fixed;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            font-size: 10px;
+            opacity: 0.5;
+        }
+    </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();
+
+        // Parameters
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: { avg: 1.1, min: 0.9, max: 1.2 },
+            tone: { anger: 0.0, sadness: 0.0, curiosity: 0.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
+        };
+
+        // Fractal parameters
+        const maxDepth = Math.floor(3 + params.complexity * 5);
+        const branchAngle = Math.PI / 4;
+        const lengthDecay = 0.7 + params.complexity * 0.2;
+        const angleDecay = 0.8 + params.complexity * 0.1;
+        const branchDecay = 0.7 + params.connectedness * 0.2;
+        const color = `hsl(0, 0%, ${80 + Math.sin(Date.now() * 0.001) * 10}%)`;
+
+        function drawFractal(x, y, depth, length, angle, energy) {
+            if (depth >= maxDepth || energy < 0.01) return;
+
+            const newEnergy = energy * (0.9 + Math.random() * 0.2);
+            const newLength = length * lengthDecay;
+            const newAngle = angle * angleDecay;
+
+            // Calculate new position
+            const dx = Math.cos(angle) * newLength;
+            const dy = Math.sin(angle) * newLength;
+            const nx = x + dx;
+            const ny = y + dy;
+
+            // Draw branch
+            ctx.beginPath();
+            ctx.moveTo(x, y);
+            ctx.lineTo(nx, ny);
+            ctx.strokeStyle = color;
+            ctx.lineWidth = Math.max(0.5, 1 - params.dryness) * (params.motion * 0.5 + 0.5);
+            ctx.stroke();
+
+            // Recursively draw branches
+            drawFractal(nx, ny, depth + 1, newLength, angle + branchAngle + (Math.random() - 0.5) * branchAngle * params.connectedness, newEnergy);
+            drawFractal(nx, ny, depth + 1, newLength, angle - branchAngle + (Math.random() - 0.5) * branchAngle * params.connectedness, newEnergy);
+
+            // Add pulse effect
+            const pulseScale = 1 + (params.pulse.avg + (Math.random() * (params.pulse.max - params.pulse.min))) * 0.01;
+            if (depth < 2) {
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.arc(nx, ny, pulseScale * 2, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+
+        function animate() {
+            // Fade previous frames
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Calculate starting points based on density
+            const spacing = Math.max(50, 1000 / (params.density * 2 + 1));
+
+            // Draw fractals at various positions
+            for (let x = spacing; x < canvas.width; x += spacing) {
+                for (let y = spacing; y < canvas.height; y += spacing) {
+                    const energy = 1 - params.lifespan * 0.5 + Math.random() * 0.2;
+                    drawFractal(x, y, 0, 100 + Math.random() * 50, -Math.PI / 2, energy);
+                }
+            }
+
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>