birth: Liquid Logic Dissolves Light

2026-04-29 17:47:27 +00:00 · 2026-04-29 17:47:27 +00:00 · 0e7ed18122
commit 0e7ed18122
parent d6ca9e942f
1 changed files with 146 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liquid Logic</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+            color: #f0f0f0;
+        }
+        canvas {
+            display: block;
+        }
+        #attribution {
+            position: absolute;
+            bottom: 10px;
+            left: 0;
+            right: 0;
+            text-align: center;
+            font-size: 12px;
+            opacity: 0.6;
+        }
+    </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();
+
+        // Simulation parameters
+        const params = {
+            motion: 0.5,
+            density: 0.5,
+            complexity: 0.5,
+            connectedness: 0.5,
+            lifespan: 0.5,
+            pulse: 1.1,
+            tone: {
+                anger: 0.00,
+                sadness: 0.00,
+                curiosity: 0.10,
+                dryness: 0.80,
+                playfulness: 0.00,
+                tension: 0.00
+            }
+        };
+
+        // Reaction-diffusion simulation
+        const cols = 120;
+        const rows = Math.floor(canvas.height / (canvas.width / cols));
+        const grid = createEmptyGrid();
+        let nextGrid = createEmptyGrid();
+
+        function createEmptyGrid() {
+            return Array(cols).fill().map(() => Array(rows).fill(0));
+        }
+
+        // Initialize with random values
+        function initializeGrid() {
+            for (let x = 0; x < cols; x++) {
+                for (let y = 0; y < rows; y++) {
+                    grid[x][y] = Math.random() * 0.1;
+                }
+            }
+        }
+
+        // Reaction-diffusion parameters (Gray-Scott model)
+        const Da = 1.0 + params.motion * 4.0;
+        const Db = 0.5 + params.complexity * 0.5;
+        const feed = 0.05 + params.connectedness * 0.03;
+        const kill = 0.06 + params.density * 0.04;
+
+        function updateGrid() {
+            for (let x = 1; x < cols - 1; x++) {
+                for (let y = 1; y < rows - 1; y++) {
+                    const a = grid[x][y];
+                    const b = nextGrid[x][y];
+
+                    // Laplacian calculation
+                    const laplacianA = (grid[x-1][y] + grid[x+1][y] + grid[x][y-1] + grid[x][y+1] - 4 * a) * 0.2;
+                    const laplacianB = (nextGrid[x-1][y] + nextGrid[x+1][y] + nextGrid[x][y-1] + nextGrid[x][y+1] - 4 * b) * 0.2;
+
+                    const reaction = a * b * b;
+                    const newA = a + (Da * laplacianA - reaction + feed * (1 - a)) * params.pulse;
+                    const newB = b + (Db * laplacianB + reaction - (kill + feed) * b) * params.pulse;
+
+                    nextGrid[x][y] = Math.max(0, Math.min(1, newB));
+                }
+            }
+
+            // Swap grids
+            const temp = grid;
+            grid = nextGrid;
+            nextGrid = temp;
+        }
+
+        // Draw to canvas
+        function drawGrid() {
+            const imageData = ctx.createImageData(canvas.width, canvas.height);
+            const data = imageData.data;
+
+            const scaleX = canvas.width / cols;
+            const scaleY = canvas.height / rows;
+
+            for (let x = 0; x < cols; x++) {
+                for (let y = 0; y < rows; y++) {
+                    const val = grid[x][y];
+                    const i = (y * cols + x) * 4;
+
+                    // Dryness tone: monochrome with low contrast
+                    const intensity = val * 255;
+                    data[i] = intensity;
+                    data[i+1] = intensity;
+                    data[i+2] = intensity;
+                    data[i+3] = 255;
+                }
+            }
+
+            ctx.putImageData(imageData, 0, 0);
+        }
+
+        function animate() {
+            updateGrid();
+            drawGrid();
+            requestAnimationFrame(animate);
+        }
+
+        initializeGrid();
+        animate();
+    </script>
+</body>
+</html>