birth: Fractal Echoes in Motion

2026-04-18 21:47:14 +00:00 · 2026-04-18 21:47:14 +00:00 · 3b0a1fe63d
commit 3b0a1fe63d
parent 2dbc788992
1 changed files with 135 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Strange Attraction</title>
+    <style>
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            overflow: hidden;
+            background: #000;
+            color: #fff;
+            font-family: monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.3);
+            text-shadow: 1px 1px 2px #000;
+        }
+    </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');
+
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+
+        // Parameters from prompt
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: {
+                avg: 1.1,
+                min: 1.0,
+                max: 1.2
+            },
+            tone: {
+                anger: 0.0,
+                sadness: 0.0,
+                curiosity: 0.3,
+                dryness: 0.8,
+                playfulness: 0.0,
+                tension: 0.0
+            }
+        };
+
+        // Strange attractor parameters (modified by input params)
+        const attractor = {
+            a: 1.4 + params.motion * 0.6,
+            b: 2.3 + params.connectedness * 0.7,
+            c: 0.8 - params.dryness * 0.3,
+            d: 2.0 + params.complexity * 0.5,
+            points: [],
+            maxPoints: 10000 * params.density,
+            color: `hsl(180, ${20 + params.tone.curiosity * 30}%, ${50 + params.tone.dryness * 20}%)`
+        };
+
+        // Initialize points
+        for (let i = 0; i < attractor.maxPoints; i++) {
+            attractor.points.push({
+                x: Math.random() * 2 - 1,
+                y: Math.random() * 2 - 1
+            });
+        }
+
+        // Animation parameters
+        let time = 0;
+        const maxTrailLength = 500 * params.lifespan;
+        const pulseRange = params.pulse.max - params.pulse.min;
+        const pulseFreq = 0.002 + params.pulse.avg * 0.005;
+
+        function animate() {
+            // Clear with slight fade
+            ctx.fillStyle = `rgba(0, 0, 0, 0.02)`;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Calculate pulse effect
+            const pulse = params.pulse.min + Math.sin(time * pulseFreq) * pulseRange;
+
+            // Update and draw points
+            attractor.points.forEach(point => {
+                // Strange attractor equations (modified)
+                const x1 = point.x;
+                const y1 = point.y;
+                point.x = Math.sin(params.a * y1) - Math.cos(params.b * x1);
+                point.y = Math.sin(params.c * x1) - Math.cos(params.d * y1);
+
+                // Scale and center
+                const scale = Math.min(canvas.width, canvas.height) * 0.4;
+                const x = point.x * scale + canvas.width / 2;
+                const y = point.y * scale + canvas.height / 2;
+
+                // Draw with trail
+                const trailLength = maxTrailLength * pulse;
+                const alpha = Math.min(1, 1 - (attractor.points.indexOf(point) / attractor.maxPoints));
+
+                // Create gradient for smoky effect
+                const gradient = ctx.createRadialGradient(x, y, 0, x, y, 5);
+                gradient.addColorStop(0, attractor.color + ', 0.8)');
+                gradient.addColorStop(1, attractor.color + ', 0');
+
+                ctx.fillStyle = gradient;
+                ctx.beginPath();
+                ctx.arc(x, y, alpha * trailLength * 0.01, 0, Math.PI * 2);
+                ctx.fill();
+            });
+
+            time += 0.005 * params.motion;
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>