Reaction-diffusion · ring-2.6-1t
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 · 4 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 implements a Gray-Scott reaction-diffusion simulation. This creates beautiful organic Turing patterns. Let me build a self-contained HTML file with: 1. Canvas-based rendering 2. Gray-Scott reaction-diffusion equations (solved via Euler method on a grid) 3. Mouse interaction to seed new chemicals 4. Real-time animation The Gray-Scott model involves two chemicals (U and V) with parameters F (feed rate) and K (kill rate). The equations are: - ∂U/∂t = Du·∇²U - UV² + F(1-U) - ∂V/∂t = Dv·∇²V + UV² - (F+K)V I'll implement this with: - A grid of U and V values - Laplacian computation for diffusion - Euler time stepping - Canvas rendering (mapping V concentration to color) - Mouse interaction to add chemicals - Use Web Workers or just do it on the main thread with requestAnimationFrame Let me write a complete, self-contained HTML file. I'll use pixel manipulation via ImageData for performance. Key parameters: - Du = 0.16 (diffusion rate of U) - Dv = 0.08 (diffusion rate of V) - F = 0.035 (feed rate) - K = 0.065 (kill rate) These are typical values that produce interesting patterns. I'll make some parameters adjustable via keyboard or UI. Let me also add a nice UI overlay with controls for F and K, and info about the simulation. I'll implement the diffusion using a simple 5-point stencil for the Laplacian, and use Euler integration. For performance, I'll work with Float32Arrays for the grid and use ImageData for rendering. Let me think about the grid size. For real-time performance in a browser, something like 200x200 or 300x300 is reasonable. Let me use the canvas size and scale. I'll also add some nice color mapping to visualize the V concentration - maybe a dark purple/brown background with bright yellow/green patterns, or a classic blue/orange scheme. Let me write the complete file.
Building a Gray-Scott reaction-diffusion simulation with organic Turing patterns and mouse seeding.
/tmp/ws/index.html (14289 bytes)Successfully wrote 14289 bytes to /tmp/ws/index.html
thinking
The file has been written successfully. Let me verify it exists and looks good.
Done! The file `index.html` is ready at `/tmp/ws/index.html`. Here's what it includes: **Simulation Core** - **Gray-Scott equations** solved via explicit Euler on a 2D grid: diffusion of two chemicals U and V with reaction terms `-UV² + F(1-U)` and `+UV² - (F+K)V` - 5-point stencil Laplacian with wrap-around boundary conditions - 8 substeps per animation frame for stability and richer pattern evolution **Interactive Features** - **Click & drag** to seed new chemical growth (reduces U, increases V at the brush location) - **Scroll wheel** to resize the brush (3px–60px) - **Presets** — 7 curated (F, K) parameter pairs that produce distinct pattern types: Spots, Worms, Fingers, Coral, Maze, Pulsing, Chaos - **Color schemes** — UV, Fire, Ocean, Neon, Mono - **Space** to pause/resume, **R** to reset, **S** to save screenshot as PNG **Sliders** for live tuning of feed rate (F), kill rate (K), and diffusion rates (Du, Dv) Just open the file in any modern browser — it's fully self-contained with no dependencies or network requests.
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.
RUN
EVALUATION
Gray-Scott reaction-diffusion sim grows organic patterns; click/drag/wheel seed new growth, space pauses, arrows/wasd have no effect.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.