Reaction-diffusion · gemma-4-26b-a4b-it

The objective is to build a Gray-Scott reaction-diffusion simulation in a single `index.html` file.

    *   $du/dt = D_u \nabla^2 u - uv^2 + F(1-u)$
    *   $dv/dt = D_v \nabla^2 v + uv^2 - (F+K)v$
    *   Parameters: $D_u = 0.16$, $D_v = 0.08$, $F = 0.035$, $K = 0.062$.
    *   Grid: Square, wrapping boundaries.
    *   Initial state: $U=1, V=0$, with a small central seed of $V$.
    *   Interaction: Click/drag adds $V$ and reduces $U$.
    *   Controls: Pause/Resume, Reset.
    *   Implementation: HTML5 Canvas (2D or WebGL). Since performance is key for reaction-diffusion, WebGL is much better for large grids, but for a simple single-file task, a 2D canvas might be easier if the grid is small, or I can use WebGL for high performance. Let's aim for WebGL if possible to ensure smoothness, or a highly optimized 2D approach. Actually, for reaction-diffusion, WebGL is the standard way to do it efficiently.

    *   `index.html`
    *   `<style>`: CSS for layout, buttons, canvas.
    *   `<script>`:
        *   WebGL setup: Shaders for diffusion and reaction (can be done in one pass or two).
        *   Buffers: Two textures (ping-ponging) for $U$ and $V$ concentrations.
        *   Input handling: Mouse/Touch.
        *   Simulation loop.
        *   UI: Pause/Resume, Reset.

    *   Use two textures to represent the current state of the simulation.
    *   In each frame, a fragment shader reads from the current texture and writes the next state to a frame buffer (FBO).
    *   Laplacian calculation: Using a 3x3 stencil in the shader.
    *   Integration: Forward Euler is fine for small time steps.

    *   $D_u \nabla^2 u - uv^2 + F(1-u)$
    *   $D_v \nabla^2 v + uv^2 - (F+K)v$
    *   Wait, the standard Gray-Scott formula often uses $F$ for feed and $K$ for kill.
    *   Formula:
        $\Delta u = D_u \nabla^2 u - u v^2 + F(1 - u)$
        $\Delta v = D_v \nabla^2 v + u v^2 - (F + k) v$
        Wait, some formulations use $k$ instead of $F+k$ for the removal rate. Let's stick to the prompt's parameters: $F=0.035$, $K=0.062$.
        The prompt says "feed = 0.035, and kill = 0.062". Usually, the term is $(F+k)v$ or just $kv$.
        Commonly:
        $du/dt = Du \nabla^2 u - uv^2 + F(1-u)$
        $dv/dt = Dv \nabla^2 v + uv^2 - (F+k)v$
        Looking at the prompt: "feed = 0.035, and kill = 0.062".
        If I use $F$ and $K$ as defined:
        $du = Du \cdot \text{Laplacian}(u) - u \cdot v^2 + F \cdot (1-u)$
        $dv = Dv \cdot \text{Laplacian}(v) + u \cdot v^2 - (F + K) \cdot v$
        Actually, let's re-read. Many sources use $k$ for the kill rate. If $k=0.062$ and $F=0.035$, the total removal rate is $F+k = 0.097$. Or is $K$ the total removal rate?
        "feed = 0.035, and kill = 0.062". I will assume:
        $du = ... + F(1-u)$
        $dv = ... - (F+K)v$ is a bit unusual if $K$ is already "kill".
        Usually: $dv = ... + uv^2 - kv$.
        Let's look at the prompt again: "feed = 0.035, and kill = 0.062".
        If I use $F=0.035$ and $K=0.062$ directly in the formulas:
        $du = Du \cdot \text{Laplacian}(u) - u \cdot v^2 + F(1-u)$
        $dv = Dv \cdot \text{Laplacian}(v) + u \cdot v^2 - K \cdot v$
        This is the most common way to express it when $F$ and $K$ are provided as parameters. Let's check the parameter values provided: $Du=0.16, Dv=0.08, F=0.035, K=0.062$. These look like standard Gray-Scott parameters for certain patterns (like spots or labyrinth).

    *   `u_texture`: Stores concentration of U (and V in the green channel?).
    *   Actually, it's better to store $U$ in $R$ and $V$ in $G$ of a single texture.
    *   Input: Mouse position (as a uniform).
    *   Shader:
        1.  Read current $U, V$ from texture.
        2.  Calculate Laplacian of $U$ and $V$ (using neighbor pixels).
        3.  Calculate new $U, V$.
        4.  Handle interaction: If distance(pixel, mouse) < radius, $V=1, U=0$.
    *   Ping-pong textures: `textureA` (current), `textureB` (next). Swap them each frame.

    *   Need a way to draw to the texture for interaction.
    *   Or just do it in the simulation shader by passing the mouse coordinate. This is easier.

    *   `index.html`
    *   CSS for a dark theme, centered canvas, controls at the bottom.
    *   JavaScript for WebGL boilerplate.

    *   Simulation: `sim_shader.glsl` (handles the update step).
    *   Display: `display_shader.glsl` (maps U, V to colors).
    *   Canvas: Use a large texture (e.g., 512x512 or 1024x1024) and scale it to fit the screen.

    *   $Du = 0.16$
    *   $Dv = 0.08$
    *   $F = 0.035$
    *   $K = 0.062$

    Let's refine the simulation step:
    `u_new = u + dt * (Du * laplacian_u - u * v * v + F * (1.0 - u))`
    `v_new = v + dt * (Dv * laplacian_v + u * v * v - K * v)`

    Wait, the prompt says: "maintain two chemical concentration fields, U and V, with diffusion and the Gray-Scott reaction, feed, and removal terms."
    And "Choose stable time and spatial steps".
    Since we are in a shader, we usually do one step per frame. $dt$ should be small. Or we can run multiple steps per frame for speed.

    *   Initialization:
        *   `U = 1, V = 0` everywhere.
        *   Small central seed: $U=0.5, V=0.5$ in a small circle.
    *   Interaction:
        *   Mouse down/drag: Set $U=0.5, V=0.5$ in a circle around mouse.

    *   `canvas` (for WebGL)
    *   `buttons` (Pause, Reset)
    *   `container`

    *   Vertex Shader: Simple passthrough.
    *   Fragment Shader (Simulation):
        *   Uniforms: `u_texture`, `u_mouse`, `u_mouse_pressed`, `u_dt`, `u_feed`, `u_kill`, `u_du`, `u_dv`, `u_resolution`.
        *   Implementation:
            1.  `texCoord = gl_FragCoord.xy / u_resolution`
            2.  Read neighbors for Laplacian.
            3.  Update $u, v$.
            4.  If `u_mouse_pressed` and `dist(uv, mouse) < radius`, $u = 0.5, v = 0.5$.
            5.  Output `vec4(u, v, 0, 1)`.
    *   Fragment Shader (Display):
        *   Uniforms: `u_texture`.
        *   Implementation:
            1.  Read $u, v$ from texture.
            2.  Color: maybe $u$ is one color, $v$ is another, or use a color map.
            3.  A common one: $v$ intensity determines brightness/color.
            4.  Let's try: `color = vec3(u, v, 0.5 * u)`? No, let's make it look "organic".
            5.  Mapping $v$ to a color scale: $v=0 \to \text{dark}$, $v=1 \to \text{bright}$. Or $u$ and $v$ combined.
            6.  Actually, many people map $v$ to color: `color = vec3(v * 1.5, v * 0.5, v * 2.0)`?
            7.  Let's go with something like: `color = vec3(0.1, 0.1, 0.2) + v * vec3(0.0, 1.0, 0.5)`. Wait, let's use a more pleasing palette.
            8.  How about: $U$ is the background, $V$ is the pattern.
            9.  `color = mix(vec3(0.1, 0.1, 0.1), vec3(0.0, 1.0, 0.8), v * 2.0);`

    *   Use two textures: `tex1` and `tex2`.
    *   `framebuffer1` attaches `tex1`.
    *   `framebuffer2` attaches `tex2`.
    *   Iteration:
        *   Step 1: `render(sim_shader, input: tex1, output: fb2)`
        *   Step 2: `render(sim_shader, input: tex2, output: fb1)`
        *   Display: `render(display_shader, input: tex1, output: screen)`

    *   $u = 1, v = 0$ everywhere initially.
    *   Seed: Central $30 \times 30$ block with $u=0.5, v=0.5$ (or similar).
    *   To do this properly in WebGL, we can either:
        a) Write a special "init" shader.
        b) Just use a single frame with a different shader.

    *   The user wants $Du=0.16, Dv=0.08, F=0.035, K=0.062$.
    *   These are typically used with a certain step size.

    Let's start coding.

The code is written. Now I need to run it in the browser to verify.
The implementation uses WebGL to handle the reaction-diffusion simulation on a 512x512 grid, which should be efficient.
I'll use `browser` to check the output.