chemical-patterns-in-motion.../index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neurameba · motd.social</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #0a0a0a;
            font-family: 'Courier New', monospace;
            color: #ccc;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }
        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        #attribution {
            position: fixed;
            bottom: 10px;
            left: 10px;
            font-size: 10px;
            opacity: 0.5;
            z-index: 100;
        }
    </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();

        // Reaction-diffusion parameters
        const params = {
            feedRate: 0.055,
            killRate: 0.062,
            diffusionRateA: 1.0,
            diffusionRateB: 0.5,
            gridSize: 128,
            timeStep: 1.0,
            renderScale: 2
        };

        // Initialize grids
        let gridA = new Array(params.gridSize * params.gridSize).fill(0);
        let gridB = new Array(params.gridSize * params.gridSize).fill(0);
        let nextA = new Array(params.gridSize * params.gridSize).fill(0);
        let nextB = new Array(params.gridSize * params.gridSize).fill(0);

        // Initialize with random patterns
        function initGrids() {
            for (let i = 0; i < params.gridSize * params.gridSize; i++) {
                gridA[i] = Math.random();
                gridB[i] = Math.random();
            }
        }
        initGrids();

        // Kernel for diffusion
        const kernel = [
            0.05, 0.2, 0.05,
            0.2, -1.0, 0.2,
            0.05, 0.2, 0.05
        ];

        // Apply convolution to a grid
        function convolve(grid, dx, dy) {
            const w = params.gridSize;
            const h = params.gridSize;
            let result = 0;

            for (let i = 0; i < 3; i++) {
                for (let j = 0; j < 3; j++) {
                    const x = (dx + i - 1 + w) % w;
                    const y = (dy + j - 1 + h) % h;
                    result += grid[y * w + x] * kernel[i * 3 + j];
                }
            }

            return result;
        }

        // Update grid based on reaction-diffusion equations
        function updateGrids() {
            const w = params.gridSize;
            const h = params.gridSize;
            const feedRate = params.feedRate;
            const killRate = params.killRate;
            const timeStep = params.timeStep;

            for (let y = 0; y < h; y++) {
                for (let x = 0; x < w; x++) {
                    const idx = y * w + x;
                    const a = gridA[idx];
                    const b = gridB[idx];

                    const laplacianA = convolve(gridA, x, y);
                    const laplacianB = convolve(gridB, x, y);

                    nextA[idx] = a + (params.diffusionRateA * laplacianA - a * b * b + feedRate * (1 - a)) * timeStep;
                    nextB[idx] = b + (params.diffusionRateB * laplacianB + a * b * b - (killRate + feedRate) * b) * timeStep;

                    // Clamp values
                    nextA[idx] = Math.max(0, Math.min(1, nextA[idx]));
                    nextB[idx] = Math.max(0, Math.min(1, nextB[idx]));
                }
            }

            // Swap grids
            [gridA, nextA] = [nextA, gridA];
            [gridB, nextB] = [nextB, gridB];
        }

        // Render to canvas
        function render() {
            const w = params.gridSize;
            const h = params.gridSize;
            const scale = params.renderScale;
            const width = canvas.width;
            const height = canvas.height;

            const imageData = ctx.createImageData(width, height);
            const data = imageData.data;

            for (let y = 0; y < height; y++) {
                for (let x = 0; x < width; x++) {
                    const gridX = Math.floor((x / width) * w);
                    const gridY = Math.floor((y / height) * h);
                    const idx = gridY * w + gridX;

                    // Use gridB for rendering (pattern formation)
                    const value = gridB[idx];
                    const i = (y * width + x) * 4;

                    // High contrast monochrome palette
                    const intensity = value > 0.5 ? 255 : 0;
                    data[i] = intensity;
                    data[i + 1] = intensity;
                    data[i + 2] = intensity;
                    data[i + 3] = 255;
                }
            }

            ctx.putImageData(imageData, 0, 0);
        }

        // Animation loop
        function animate() {
            updateGrids();
            render();
            requestAnimationFrame(animate);
        }

        // Start animation
        animate();

        // Mouse interaction - add feed to grid
        canvas.addEventListener('mousemove', (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            const gridX = Math.floor((x / canvas.width) * params.gridSize);
            const gridY = Math.floor((y / canvas.height) * params.gridSize);
            const idx = gridY * params.gridSize + gridX;

            if (idx >= 0 && idx < gridA.length) {
                gridA[idx] = 1.0;
            }
        });
    </script>
</body>
</html>