birth: Fractal Drift Through Silence

2026-07-22 17:47:21 +00:00 · 2026-07-22 17:47:21 +00:00 · bac2ea9383
commit bac2ea9383
parent bfac7b37ed
1 changed files with 164 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,164 @@
+<!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: #000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            font-family: monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #333;
+            font-size: 10px;
+            text-shadow: 0 0 5px rgba(0,0,0,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');
+
+        // Set canvas to full window size
+        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: 1.06,
+            tone: {
+                anger: 0.00,
+                sadness: 0.00,
+                curiosity: 0.10,
+                dryness: 0.90,
+                playfulness: 0.00,
+                tension: 0.00
+            }
+        };
+
+        // Colors based on tone
+        const colors = {
+            bg: '#000',
+            fg: params.tone.dryness > 0.7 ? '#111' : '#f0f0f0',
+            primary: params.tone.dryness > 0.7 ? '#f0f0f0' : '#00ffff',
+            secondary: params.tone.dryness > 0.7 ? '#333' : '#00aaff'
+        };
+
+        // Fractal system
+        class FractalNode {
+            constructor(x, y, depth, maxDepth) {
+                this.x = x;
+                this.y = y;
+                this.depth = depth;
+                this.maxDepth = maxDepth;
+                this.children = [];
+                this.angle = Math.random() * Math.PI * 2;
+                this.length = 50 / (depth + 1);
+                this.life = params.lifespan;
+                this.motion = params.motion;
+                this.complexity = params.complexity;
+            }
+
+            update() {
+                this.life += 0.01;
+
+                // Branch creation
+                if (this.depth < this.maxDepth * params.complexity) {
+                    const branches = Math.floor(2 + (Math.random() * 3 * params.connectedness));
+                    for (let i = 0; i < branches; i++) {
+                        const angleOffset = (i - branches/2) * 0.3 * params.connectedness;
+                        const newAngle = this.angle + angleOffset + (Math.random() - 0.5) * 0.2 * params.motion;
+                        const newX = this.x + Math.cos(newAngle) * this.length * 0.7;
+                        const newY = this.y + Math.sin(newAngle) * this.length * 0.7;
+                        this.children.push(new FractalNode(
+                            newX,
+                            newY,
+                            this.depth + 1,
+                            this.maxDepth
+                        ));
+                    }
+                }
+
+                // Update children
+                this.children.forEach(child => child.update());
+            }
+
+            draw() {
+                const alpha = params.lifespan > 0.5 ?
+                    1 - (this.depth / (this.maxDepth * 1.5)) :
+                    Math.min(1, this.life * 2);
+
+                ctx.strokeStyle = `rgba(${colors.primary}, ${alpha})`;
+                ctx.lineWidth = 1 + (this.depth * params.density * 2);
+                ctx.beginPath();
+                ctx.moveTo(this.x, this.y);
+
+                // Apply pulse motion
+                const pulseOffset = Math.sin(Date.now() * 0.001 * params.pulse) * 5 * this.motion;
+                const endX = this.x + Math.cos(this.angle) * (this.length + pulseOffset);
+                const endY = this.y + Math.sin(this.angle) * (this.length + pulseOffset);
+
+                ctx.lineTo(endX, endY);
+                ctx.stroke();
+
+                // Draw children
+                this.children.forEach(child => child.draw());
+            }
+        }
+
+        // Create initial nodes
+        const rootNodes = [];
+        const initialNodes = Math.floor(3 + (Math.random() * 5 * params.density));
+
+        for (let i = 0; i < initialNodes; i++) {
+            rootNodes.push(new FractalNode(
+                canvas.width/2 + (Math.random() - 0.5) * 100,
+                canvas.height/2 + (Math.random() - 0.5) * 100,
+                0,
+                4 + Math.floor(Math.random() * 4 * params.complexity)
+            ));
+        }
+
+        // Animation loop
+        function animate() {
+            ctx.fillStyle = colors.bg;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            rootNodes.forEach(node => {
+                node.update();
+                node.draw();
+            });
+
+            requestAnimationFrame(animate);
+        }
+
+        animate();
+    </script>
+</body>
+</html>