birth: Fractal currents in twilight

2026-08-22 02:21:18 +00:00 · 2026-08-22 02:21:18 +00:00 · 80fb884504
commit 80fb884504
parent 65f90a7dbe
1 changed files with 119 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neurameba Strange Attractor</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: #0a0a0a;
+            font-family: 'Courier New', monospace;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            color: #555555;
+            font-size: 10px;
+            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();
+
+        // Strange attractor parameters (Thomas attractor variant)
+        let attractor = {
+            a: 0.19,
+            b: 0.2,
+            c: -0.5,
+            dt: 0.16,
+            x: 0.1,
+            y: 0.1,
+            z: 0.1,
+            hue: 0,
+            points: []
+        };
+
+        // Motion controls how chaotic the system is (0.5 range)
+        const chaosFactor = 0.5 + 0.5 * 0.5; // Map 0-1 motion to 0.5-1 chaos
+
+        // Density controls how many points we keep
+        const pointDensity = 50000 * (0.5 + 0.5 * 0.5);
+
+        // Complexity controls trail length
+        const trailLength = 50 + Math.floor(50 * 0.5);
+
+        function drawAttractor() {
+            // Fade previous frame
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Update attractor position with chaos factor
+            const theta = Math.random() * Math.PI * 2;
+
+            attractor.x += attractor.dt * (
+                Math.sin(attractor.a * attractor.y) -
+                attractor.c * attractor.x +
+                chaosFactor * Math.cos(theta)
+            );
+            attractor.y += attractor.dt * (
+                Math.sin(attractor.a * attractor.z) -
+                attractor.c * attractor.y +
+                chaosFactor * Math.sin(theta)
+            );
+            attractor.z += attractor.dt * (
+                Math.sin(attractor.a * attractor.x) -
+                attractor.c * attractor.z
+            );
+
+            // Add current point to buffer
+            attractor.points.push({
+                x: attractor.x * 20 + canvas.width/2,
+                y: attractor.y * 20 + canvas.height/2,
+                hue: attractor.hue
+            });
+
+            // Keep only recent points
+            if (attractor.points.length > pointDensity) {
+                attractor.points.shift();
+            }
+
+            // Draw points with decaying opacity
+            for (let i = 0; i < attractor.points.length; i++) {
+                const p = attractor.points[i];
+                const age = i / attractor.points.length;
+                const opacity = age * 0.8;
+                const size = age * 1.5 + 0.5;
+
+                // Curiosity teal with dryness monochrome variation
+                ctx.fillStyle = `hsl(180, ${30 + 20 * age}%, ${20 + 15 * age}%)`;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, size * (0.7 + 0.3 * Math.sin(attractor.hue/10)), 0, Math.PI * 2);
+                ctx.fill();
+            }
+
+            // Increment hue for color variation
+            attractor.hue += 0.5;
+
+            requestAnimationFrame(drawAttractor);
+        }
+
+        drawAttractor();
+    </script>
+</body>
+</html>