Reaction-diffusion · deepseek-v4-flash
Run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth.
transcript · 8 messages
Run a Gray-Scott reaction-diffusion simulation on a canvas that grows organic Turing patterns in real time, with the mouse seeding new growth.
thinking
The user wants a single-page web app that runs a Gray-Scott reaction-diffusion simulation on a canvas, with organic Turing patterns, real-time simulation, and mouse interaction to seed new growth. Let me build this comprehensive simulation. The Gray-Scott model: - Two chemical species: U and V - Reactants: U + 2V → 3V (at rate `feed`) - V → P (at rate `kill`) - Diffusion rates: Du for U, Dv for V The equations: - ∂U/∂t = Du ∇²U - U*V² + feed*(1 - U) - ∂V/∂t = Dv ∇²V + U*V² - (feed + kill)*V I'll create a full implementation with: 1. Canvas-based rendering 2. Real-time simulation 3. Mouse interaction to seed new patterns 4. Color mapping for beautiful visualization 5. Controls for parameters Let me write the complete index.html.
/workspace/index.html (13314 bytes)Successfully wrote 13314 bytes to /workspace/index.html
thinking
Let me verify the file was written correctly and check its contents.
Let me verify the file looks good:
{"command":"wc -l /workspace/index.html && head -5 /workspace/index.html && echo \"---\" && tail -5 /workspace/index.html"}482 /workspace/index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> --- requestAnimationFrame(loop); })(); </script> </body> </html>
thinking
The file is written. Let me also verify it works by checking the HTML structure is valid and complete. Let me also improve the simulation a bit. Actually, I notice a few things I should improve: 1. The laplacian function uses a 5-point stencil but I defined two laplacian functions and only use `laplacianFull` - let me remove the unused one. 2. The simulation might benefit from a slightly larger grid or better initialization. 3. I should make sure the color mapping is beautiful. Actually, let me re-read the file and see if there are any issues... The code looks complete. Let me check if it runs properly. Wait, there's a potential issue - the `accumulator` approach might cause the simulation to run at variable speed depending on the frame rate. Let me reconsider this. Actually, the approach is fine - it uses a fixed timestep accumulator so simulation speed is independent of frame rate. The `speed` slider controls how many simulation steps per fixed timestep. Let me also check that the initial seeds will create nice patterns. The initial seeds are small 9x9 blocks. With the default feed=0.037, kill=0.060, this should produce coral-like patterns. One thing I want to improve: the presets are nice, but I should make sure the currently selected preset actually shows which one is active. Let me also add a visual indicator for the brush position when the mouse is down. Actually, let me look at the code more carefully. The simulation should work well. Let me also add a slight visual indicator of where the brush is when the mouse is over the canvas. Let me also double-check the Gray-Scott equations are correct: - ∂U/∂t = Du ∇²U - U*V² + feed*(1-U) - ∂V/∂t = Dv ∇²V + U*V² - (feed+kill)*V Yes, these are correct for the standard Gray-Scott model. The code looks complete. Let me test it by serving it.
{"path":"/workspace/index.html","offset":1,"limit":50}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gray-Scott Reaction-Diffusion</title> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } body { background: #0a0a0f; color: #ccc; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow: hidden; user-select: none; } .container { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; } canvas { display: block; border-radius: 12px; box-shadow: 0 0 60px rgba(0,180,255,0.08), 0 0 120px rgba(0,80,200,0.04); cursor: crosshair; image-rendering: pixelated; } .controls { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; align-items: center; padding: 10px 20px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; backdrop-filter: blur(4px); } .control-group { display: flex; align-items: center; gap: 8px; font-size: 13px; [433 more lines in file. Use offset=51 to continue.]
The file is complete at 482 lines. Here's what was built: **`/workspace/index.html`** — A single-file Gray-Scott reaction-diffusion simulation with: - **800×600 canvas** running a real-time Gray-Scott PDE solver with isotropic 9-point Laplacian stencil for smooth Turing patterns - **Mouse interaction**: click and drag to seed new growth (injects high `V`, zero `U` at brush position), with a subtle hint that fades on first click - **Touch support** for mobile/tablet - **Sliders** for: - **Feed rate** (0.010–0.080) — controls pattern formation - **Kill rate** (0.030–0.070) — controls pattern decay - **Speed** (1–20× sub-steps per frame) - **Brush radius** (3–40 px) for seeding - **8 preset buttons** (Coral, Spots, Worms, Maze, Cracks, Fingerprints, Bubbles, Stripes) for instant pattern tuning - **Pause/Play** and **Reset** buttons - **FPS counter** in the control bar - Dark themed UI with glow effects, pixelated rendering, and a blue-to-purple color palette mapped from V concentration
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.