birth: Echoes of Silent Rules

2026-06-07 05:47:19 +00:00 · 2026-06-07 05:47:19 +00:00 · 16b040f4b0
commit 16b040f4b0
parent cb3d6354ad
1 changed files with 163 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cellular Metabolism</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            color: #2a2a2a;
+            font-family: 'Courier New', monospace;
+        }
+        canvas {
+            display: block;
+        }
+        #info {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 10px;
+            color: #444;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="canvas"></canvas>
+    <div id="info">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, false);
+        resizeCanvas();
+
+        // Cellular automaton grid
+        const gridSize = 4;
+        const cols = Math.floor(canvas.width / gridSize);
+        const rows = Math.floor(canvas.height / gridSize);
+
+        // Initialize grid with random states
+        let currentGrid = new Array(cols).fill().map(() =>
+            new Array(rows).fill().map(() => Math.random() > 0.5 ? 1 : 0)
+        );
+
+        // State history for processing
+        const stateHistory = [];
+
+        // Parameters derived from input
+        const motion = 0.554;
+        const density = 0.486;
+        const complexity = 0.458;
+        const connectedness = 0.466;
+        const lifespan = 0.477;
+        const pulse = 0.38;
+
+        // Tone-specific adjustments
+        const dryness = 0.90;
+        const palette = dryness > 0.7 ? '#f0f0f0' : '#e0e0e0';
+
+        // Initial energy (scaled)
+        let energy = 450.2 * (1 + pulse * 0.5);
+
+        // Neighborhood types
+        const neighborhoods = [
+            [[0,1], [1,0], [0,-1], [-1,0]], // Moore
+            [[0,1], [1,0], [0,-1], [-1,0], [1,1], [-1,-1], [1,-1], [-1,1]], // Von Neumann
+            [[1,1], [-1,-1], [1,-1], [-1,1]] // Diagonal
+        ];
+
+        // Main animation loop
+        function animate() {
+            // Slowly degrade energy
+            energy -= 0.1;
+
+            // Background fade based on energy
+            ctx.fillStyle = `rgba(0, 0, 0, ${0.1 + energy/5000})`;
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Calculate states for next generation
+            const nextGrid = currentGrid.map(arr => [...arr]);
+
+            // Apply cellular automaton rules with variance
+            for (let x = 1; x < cols-1; x++) {
+                for (let y = 1; y < rows-1; y++) {
+                    const cell = currentGrid[x][y];
+
+                    // Calculate living neighbors
+                    let neighbors = 0;
+                    const neighborhood = neighborhoods[Math.floor(Math.random() * neighborhoods.length)];
+
+                    for (const [dx, dy] of neighborhood) {
+                        const nx = x + dx;
+                        const ny = y + dy;
+                        neighbors += currentGrid[nx][ny];
+                    }
+
+                    // Apply Conway's rules with variations
+                    if (cell === 1) {
+                        if (neighbors < 2 || neighbors > 5) {
+                            nextGrid[x][y] = 0;
+                        }
+                    } else {
+                        if (neighbors === 3 || (neighbors === 2 && Math.random() < 0.3)) {
+                            nextGrid[x][y] = 1;
+                        }
+                    }
+
+                    // Fade out dead cells more quickly
+                    if (cell === 0 && nextGrid[x][y] === 0) {
+                        nextGrid[x][y] = 0;
+                    }
+                }
+            }
+
+            // Apply changes and draw
+            for (let x = 0; x < cols; x++) {
+                for (let y = 0; y < rows; y++) {
+                    const cell = currentGrid[x][y];
+                    const nextCell = nextGrid[x][y];
+
+                    if (cell !== nextCell) {
+                        const hue = (x * 360 / cols + y * 360 / rows) % 360;
+                        const saturation = 10 + (energy/10) % 80;
+                        const lightness = 30 + (energy/20) % 50;
+
+                        ctx.fillStyle = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+                        ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
+                    }
+
+                    currentGrid[x][y] = nextCell;
+                }
+            }
+
+            // Occasionally introduce random seeds based on energy
+            if (Math.random() < energy/5000) {
+                const x = Math.floor(Math.random() * cols);
+                const y = Math.floor(Math.random() * rows);
+                currentGrid[x][y] = 1;
+            }
+
+            // Add to history for complex patterns
+            stateHistory.push([...currentGrid]);
+            if (stateHistory.length > 20) stateHistory.shift();
+
+            requestAnimationFrame(animate);
+        }
+
+        // Start animation
+        animate();
+    </script>
+</body>
+</html>