birth: Monochrome Flicker Fields

2026-07-05 09:47:19 +00:00 · 2026-07-05 09:47:19 +00:00 · 66062268db
commit 66062268db
parent b7089e8b96
1 changed files with 157 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Diffusive Gestures</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #000;
+            color: #fff;
+            font-family: monospace;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+        canvas {
+            flex: 1;
+        }
+        #attribution {
+            text-align: center;
+            padding: 8px;
+            font-size: 10px;
+            opacity: 0.7;
+        }
+    </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 mapped from generative art builder inputs
+        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.1, dryness: 0.9, playfulness: 0.0, tension: 0.0 }
+        };
+
+        // Reaction-diffusion simulation
+        const size = 128;
+        const grid = Array.from({ length: size }, () =>
+            Array.from({ length: size }, () => ({
+                a: 1.0,
+                b: 0.0,
+                tempA: 0,
+                tempB: 0
+            }))
+        );
+
+        // Reaction parameters tuned to generative input
+        const Da = 0.16;
+        const Db = 0.08;
+        const feed = 0.055 + (params.motion * 0.02);
+        const kill = 0.062 - (params.connectedness * 0.02);
+        const iterations = 3 + Math.floor(params.complexity * 5);
+
+        // Color palette from tone analysis
+        const bgColor = '#0a0a0a';
+        const color1 = '#dddddd';
+        const color2 = '#aaaaaa';
+
+        function init() {
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    grid[y][x].a = 1.0;
+                    grid[y][x].b = 0.0;
+                }
+            }
+
+            // Add initial patterns based on density
+            const count = Math.floor(50 + params.density * 200);
+            for (let i = 0; i < count; i++) {
+                const x = Math.floor(Math.random() * size);
+                const y = Math.floor(Math.random() * size);
+                grid[y][x].b = 1.0;
+            }
+        }
+
+        function update() {
+            for (let iter = 0; iter < iterations; iter++) {
+                for (let y = 1; y < size - 1; y++) {
+                    for (let x = 1; x < size - 1; x++) {
+                        const cell = grid[y][x];
+                        const a = cell.a;
+                        const b = cell.b;
+
+                        // Laplacian diffusion
+                        cell.tempA = a +
+                            (Da * (grid[y-1][x].a + grid[y+1][x].a + grid[y][x-1].a + grid[y][x+1].a - 4*a));
+                        cell.tempB = b +
+                            (Db * (grid[y-1][x].b + grid[y+1][x].b + grid[y][x-1].b + grid[y][x+1].b - 4*b));
+
+                        // Reaction
+                        cell.tempA += cell.tempA * (1 - cell.tempA) * feed - cell.tempB * cell.tempA;
+                        cell.tempB += cell.tempA * cell.tempB * cell.tempB - (feed + kill) * cell.tempB;
+                    }
+                }
+
+                // Swap buffers
+                for (let y = 0; y < size; y++) {
+                    for (let x = 0; x < size; x++) {
+                        grid[y][x].a = grid[y][x].tempA;
+                        grid[y][x].b = grid[y][x].tempB;
+                    }
+                }
+            }
+        }
+
+        function draw() {
+            const imageData = ctx.createImageData(canvas.width, canvas.height);
+            const data = imageData.data;
+
+            const scaleX = canvas.width / size;
+            const scaleY = canvas.height / size;
+
+            for (let y = 0; y < size; y++) {
+                for (let x = 0; x < size; x++) {
+                    const cell = grid[y][x];
+                    const idx = (y * size + x) * 4;
+
+                    // Color mapping based on tone (dryness = monochrome)
+                    const intensity = Math.max(0, Math.min(1, cell.b * 0.8));
+                    data[idx] = data[idx+1] = data[idx+2] = Math.floor(255 * intensity);
+                    data[idx+3] = 255;
+                }
+            }
+
+            ctx.putImageData(imageData, 0, 0);
+        }
+
+        function animate() {
+            update();
+            draw();
+            requestAnimationFrame(animate);
+        }
+
+        init();
+        animate();
+    </script>
+</body>
+</html>