birth: Monochrome Chemical Cloud

2026-07-27 09:47:19 +00:00 · 2026-07-27 09:47:19 +00:00 · e7d547ca65
commit e7d547ca65
parent a2ad9c92fd
1 changed files with 134 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diffusive Sprawl</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #0a0a0a;
+            font-family: 'Courier New', monospace;
+        }
+        #canvas {
+            display: block;
+        }
+        #attribution {
+            position: fixed;
+            bottom: 10px;
+            right: 10px;
+            color: #333;
+            font-size: 10px;
+            text-shadow: 0 0 5px rgba(255,255,255,0.3);
+        }
+    </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();
+
+        // Reaction-diffusion parameters
+        const params = {
+            feedRate: 0.055,
+            killRate: 0.062,
+            diffusionRateA: 1.0,
+            diffusionRateB: 0.5,
+            gridSize: 64,
+            pixelSize: 8,
+            decay: 0.05,
+            colorA: [220, 220, 220],
+            colorB: [180, 180, 180]
+        };
+
+        // Initialize grids
+        const size = params.gridSize;
+        const width = Math.floor(canvas.width / params.pixelSize);
+        const height = Math.floor(canvas.height / params.pixelSize);
+
+        let grid = new Array(size);
+        for (let i = 0; i < size; i++) {
+            grid[i] = new Array(size);
+            for (let j = 0; j < size; j++) {
+                grid[i][j] = { a: 1.0, b: 0.0 };
+            }
+        }
+
+        // Add some initial patterns
+        for (let i = 0; i < 4; i++) {
+            const x = Math.floor(Math.random() * size);
+            const y = Math.floor(Math.random() * size);
+            grid[x][y].b = 1.0;
+        }
+
+        function update() {
+            // Create a new grid for the next step
+            const newGrid = new Array(size);
+            for (let i = 0; i < size; i++) {
+                newGrid[i] = new Array(size);
+                for (let j = 0; j < size; j++) {
+                    newGrid[i][j] = { a: 0, b: 0 };
+                }
+            }
+
+            // Apply reaction-diffusion rules
+            for (let i = 0; i < size; i++) {
+                for (let j = 0; j < size; j++) {
+                    const a = grid[i][j].a;
+                    const b = grid[i][j].b;
+                    const laplacianA = (grid[(i-1+size)%size][j].a +
+                                       grid[(i+1)%size][j].a +
+                                       grid[i][(j-1+size)%size].a +
+                                       grid[i][(j+1)%size].a) / 4 - a;
+                    const laplacianB = (grid[(i-1+size)%size][j].b +
+                                       grid[(i+1)%size][j].b +
+                                       grid[i][(j-1+size)%size].b +
+                                       grid[i][(j+1)%size].b) / 4 - b;
+
+                    newGrid[i][j].a = a + (params.diffusionRateA * laplacianA - a*b*b + params.feedRate * (1 - a)) * 0.1;
+                    newGrid[i][j].b = b + (params.diffusionRateB * laplacianB + a*b*b - (params.killRate + params.feedRate) * b) * 0.1;
+
+                    // Clamp values
+                    newGrid[i][j].a = Math.min(1, Math.max(0, newGrid[i][j].a));
+                    newGrid[i][j].b = Math.min(1, Math.max(0, newGrid[i][j].b));
+                }
+            }
+
+            grid = newGrid;
+
+            // Pixelated rendering
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            for (let x = 0; x < width; x++) {
+                for (let y = 0; y < height; y++) {
+                    const gridX = Math.floor((x / width) * size);
+                    const gridY = Math.floor((y / height) * size);
+                    const value = grid[gridX][gridY].b;
+
+                    if (value > 0.1) {
+                        const intensity = value * 255;
+                        ctx.fillStyle = `rgba(200, 200, 200, ${value})`;
+                        ctx.fillRect(x * params.pixelSize, y * params.pixelSize,
+                                    params.pixelSize, params.pixelSize);
+                    }
+                }
+            }
+
+            requestAnimationFrame(update);
+        }
+
+        update();
+    </script>
+</body>
+</html>