birth: Pulsing Strange Abyss

2026-07-31 02:21:21 +00:00 · 2026-07-31 02:21:21 +00:00 · faa8b20c5d
commit faa8b20c5d
parent 576e14b2c8
1 changed files with 133 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,133 @@
+<!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;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: fixed;
+            bottom: 20px;
+            left: 20px;
+            color: #444;
+            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
+        let points = [];
+        let time = 0;
+        const pulse = { avg: 1.12, min: 0.90, max: 1.30 };
+
+        function initAttractor() {
+            points = [];
+            for (let i = 0; i < 100; i++) {
+                points.push({
+                    x: Math.random() * canvas.width,
+                    y: Math.random() * canvas.height,
+                    vx: 0,
+                    vy: 0
+                });
+            }
+        }
+
+        function updateAttractor() {
+            const attractor = {
+                a: 1.4 + 0.5 * (Math.sin(time * 0.05) * pulse.min + Math.cos(time * 0.03) * pulse.max),
+                b: 2.0 + 0.5 * (Math.sin(time * 0.07) * pulse.max + Math.cos(time * 0.04) * pulse.min),
+                c: 0.9 - 0.2 * (Math.sin(time * 0.06) * pulse.avg),
+                d: 2.0 + 0.5 * (Math.cos(time * 0.08) * pulse.max)
+            };
+
+            points.forEach(p => {
+                const x = p.x - canvas.width / 2;
+                const y = p.y - canvas.height / 2;
+
+                const newX = Math.sin(attractor.a * y) - Math.cos(attractor.b * x);
+                const newY = Math.sin(attractor.c * x) - Math.cos(attractor.d * y);
+
+                p.vx += newX * 0.1 * (0.5 + 0.5 * pulse.avg);
+                p.vy += newY * 0.1 * (0.5 + 0.5 * pulse.avg);
+                p.vx *= 0.95;
+                p.vy *= 0.95;
+
+                p.x += p.vx;
+                p.y += p.vy;
+
+                p.x = (p.x + canvas.width) % canvas.width;
+                p.y = (p.y + canvas.height) % canvas.height;
+            });
+
+            time += 0.01;
+        }
+
+        function drawAttractor() {
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Fade trails
+            ctx.globalCompositeOperation = 'destination-out';
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.15)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            ctx.globalCompositeOperation = 'source-over';
+
+            // Draw points
+            points.forEach(p => {
+                const hue = (180 + Math.sin(time * 0.1) * 30) % 360;
+                const saturation = 80 + Math.sin(time * 0.2) * 20;
+                const lightness = 60 + Math.cos(time * 0.15) * 10;
+                const alpha = 0.7 + Math.sin(time * 0.08) * 0.3;
+
+                ctx.fillStyle = `hsla(${hue}, ${saturation}%, ${lightness}%, ${alpha})`;
+                ctx.beginPath();
+                ctx.arc(p.x, p.y, 1.5 + 0.5 * Math.sin(time * 0.3), 0, Math.PI * 2);
+                ctx.fill();
+            });
+        }
+
+        function animate() {
+            updateAttractor();
+            drawAttractor();
+            requestAnimationFrame(animate);
+        }
+
+        initAttractor();
+        animate();
+
+        // Handle window focus/blur for performance
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                points.forEach(p => {
+                    p.vx *= 0.9;
+                    p.vy *= 0.9;
+                });
+            }
+        });
+    </script>
+</body>
+</html>