[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69cc6e35a3688191a2cfb22b6df7a95c","versionInt","title","Browser Cfd Playground","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\ntype SimState = {\n N: number;\n u: Float32Array;\n v: Float32Array;\n uPrev: Float32Array;\n vPrev: Float32Array;\n p: Float32Array;\n div: Float32Array;\n d: Float32Array;\n dPrev: Float32Array;\n curl: Float32Array;\n temp: Float32Array;\n tempPrev: Float32Array;\n height: Float32Array;\n heightPrev: Float32Array;\n mask: Uint8Array;\n time: number;\n};\n\ntype ScenarioKey =\n | \"smoke_advection\"\n | \"dye_transport\"\n | \"lid_driven_cavity\"\n | \"channel_cylinder\"\n | \"heat_diffusion\"\n | \"reaction_diffusion\"\n | \"shallow_water\";\n\ntype RenderMode = \"smoke\" | \"speed\" | \"vorticity\";\n\ntype ModelInfo = {\n title: string;\n paragraphs: [string, string];\n};\n\nconst CANVAS_SIZE = 560;\n\nfunction idx(x: number, y: number, N: number) {\n return x + y * N;\n}\n\nfunction clamp(v: number, lo: number, hi: number) {\n return Math.max(lo, Math.min(hi, v));\n}\n\nfunction createSim(N: number): SimState {\n return {\n N,\n u: new Float32Array(N * N),\n v: new Float32Array(N * N),\n uPrev: new Float32Array(N * N),\n vPrev: new Float32Array(N * N),\n p: new Float32Array(N * N),\n div: new Float32Array(N * N),\n d: new Float32Array(N * N),\n dPrev: new Float32Array(N * N),\n curl: new Float32Array(N * N),\n temp: new Float32Array(N * N),\n tempPrev: new Float32Array(N * N),\n height: new Float32Array(N * N),\n heightPrev: new Float32Array(N * N),\n mask: new Uint8Array(N * N),\n time: 0,\n };\n}\n\nfunction zeroState(sim: SimState) {\n sim.u.fill(0);\n sim.v.fill(0);\n sim.uPrev.fill(0);\n sim.vPrev.fill(0);\n sim.p.fill(0);\n sim.div.fill(0);\n sim.d.fill(0);\n sim.dPrev.fill(0);\n sim.curl.fill(0);\n sim.temp.fill(0);\n sim.tempPrev.fill(0);\n sim.height.fill(0);\n sim.heightPrev.fill(0);\n sim.mask.fill(0);\n sim.time = 0;\n}\n\nfunction addCircleObstacle(sim: SimState, cx: number, cy: number, radius: number) {\n const { N, mask } = sim;\n for (let j = 0; j < N; j++) {\n for (let i = 0; i < N; i++) {\n const dx = i - cx;\n const dy = j - cy;\n if (dx * dx + dy * dy <= radius * radius) {\n mask[idx(i, j, N)] = 1;\n }\n }\n }\n}\n\nfunction applyScenarioPreset(sim: SimState, name: ScenarioKey) {\n zeroState(sim);\n const { N, u, v, d, temp, height } = sim;\n\n if (name === \"lid_driven_cavity\") {\n for (let i = 1; i < N - 1; i++) {\n u[idx(i, 1, N)] = 1.5;\n }\n return;\n }\n\n if (name === \"channel_cylinder\") {\n addCircleObstacle(sim, Math.floor(N * 0.35), Math.floor(N * 0.5), Math.max(4, Math.floor(N * 0.09)));\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n if (!sim.mask[idx(i, j, N)]) {\n u[idx(i, j, N)] = 0.8;\n }\n }\n }\n return;\n }\n\n if (name === \"heat_diffusion\") {\n for (let j = Math.floor(N * 0.42); j < Math.floor(N * 0.58); j++) {\n for (let i = Math.floor(N * 0.42); i < Math.floor(N * 0.58); i++) {\n temp[idx(i, j, N)] = 1.8;\n }\n }\n return;\n }\n\n if (name === \"reaction_diffusion\") {\n for (let j = 0; j < N; j++) {\n for (let i = 0; i < N; i++) {\n d[idx(i, j, N)] = 0.5 + 0.5 * Math.sin(i * 0.22) * Math.cos(j * 0.18);\n temp[idx(i, j, N)] = 0;\n }\n }\n for (let j = Math.floor(N * 0.44); j < Math.floor(N * 0.56); j++) {\n for (let i = Math.floor(N * 0.44); i < Math.floor(N * 0.56); i++) {\n temp[idx(i, j, N)] = 0.95;\n }\n }\n return;\n }\n\n if (name === \"shallow_water\") {\n for (let j = 0; j < N; j++) {\n for (let i = 0; i < N; i++) {\n const dx = i - N * 0.5;\n const dy = j - N * 0.5;\n height[idx(i, j, N)] = Math.exp(-(dx * dx + dy * dy) / (0.015 * N * N));\n }\n }\n sim.temp.set(height);\n return;\n }\n\n if (name === \"dye_transport\") {\n for (let j = Math.floor(N * 0.32); j < Math.floor(N * 0.68); j++) {\n d[idx(Math.floor(N * 0.16), j, N)] = 1.2;\n }\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n u[idx(i, j, N)] = 0.6;\n v[idx(i, j, N)] = 0.18 * Math.sin((j / N) * Math.PI * 2);\n }\n }\n }\n}\n\nfunction addSource(x: Float32Array, s: Float32Array, dtLocal: number) {\n for (let i = 0; i < x.length; i++) {\n x[i] += dtLocal * s[i];\n }\n}\n\nfunction applyMask(field: Float32Array, sim: SimState, value = 0) {\n const { mask } = sim;\n for (let i = 0; i < mask.length; i++) {\n if (mask[i]) {\n field[i] = value;\n }\n }\n}\n\nfunction setBoundary(b: number, x: Float32Array, N: number, sim: SimState | null = null) {\n for (let i = 1; i < N - 1; i++) {\n x[idx(0, i, N)] = b === 1 ? -x[idx(1, i, N)] : x[idx(1, i, N)];\n x[idx(N - 1, i, N)] = b === 1 ? -x[idx(N - 2, i, N)] : x[idx(N - 2, i, N)];\n x[idx(i, 0, N)] = b === 2 ? -x[idx(i, 1, N)] : x[idx(i, 1, N)];\n x[idx(i, N - 1, N)] = b === 2 ? -x[idx(i, N - 2, N)] : x[idx(i, N - 2, N)];\n }\n\n x[idx(0, 0, N)] = 0.5 * (x[idx(1, 0, N)] + x[idx(0, 1, N)]);\n x[idx(0, N - 1, N)] = 0.5 * (x[idx(1, N - 1, N)] + x[idx(0, N - 2, N)]);\n x[idx(N - 1, 0, N)] = 0.5 * (x[idx(N - 2, 0, N)] + x[idx(N - 1, 1, N)]);\n x[idx(N - 1, N - 1, N)] = 0.5 * (x[idx(N - 2, N - 1, N)] + x[idx(N - 1, N - 2, N)]);\n\n if (sim) {\n applyMask(x, sim, 0);\n }\n}\n\nfunction linSolve(\n b: number,\n x: Float32Array,\n x0: Float32Array,\n a: number,\n c: number,\n N: number,\n iters = 16,\n sim: SimState | null = null,\n) {\n for (let k = 0; k < iters; k++) {\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n if (sim?.mask[id]) {\n x[id] = 0;\n continue;\n }\n x[id] = (\n x0[id] +\n a * (\n x[idx(i - 1, j, N)] +\n x[idx(i + 1, j, N)] +\n x[idx(i, j - 1, N)] +\n x[idx(i, j + 1, N)]\n )\n ) / c;\n }\n }\n setBoundary(b, x, N, sim);\n }\n}\n\nfunction diffuseField(\n b: number,\n x: Float32Array,\n x0: Float32Array,\n diff: number,\n dtLocal: number,\n N: number,\n sim: SimState | null = null,\n) {\n const a = dtLocal * diff * (N - 2) * (N - 2);\n linSolve(b, x, x0, a, 1 + 4 * a, N, 12, sim);\n}\n\nfunction advect(\n b: number,\n d: Float32Array,\n d0: Float32Array,\n u: Float32Array,\n v: Float32Array,\n dtLocal: number,\n N: number,\n sim: SimState | null = null,\n) {\n const dt0 = dtLocal * (N - 2);\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n if (sim?.mask[id]) {\n d[id] = 0;\n continue;\n }\n\n let x = i - dt0 * u[id];\n let y = j - dt0 * v[id];\n x = clamp(x, 0.5, N - 1.5);\n y = clamp(y, 0.5, N - 1.5);\n\n const i0 = Math.floor(x);\n const i1 = i0 + 1;\n const j0 = Math.floor(y);\n const j1 = j0 + 1;\n const s1 = x - i0;\n const s0 = 1 - s1;\n const t1 = y - j0;\n const t0 = 1 - t1;\n\n d[id] =\n s0 * (t0 * d0[idx(i0, j0, N)] + t1 * d0[idx(i0, j1, N)]) +\n s1 * (t0 * d0[idx(i1, j0, N)] + t1 * d0[idx(i1, j1, N)]);\n }\n }\n setBoundary(b, d, N, sim);\n}\n\nfunction project(\n u: Float32Array,\n v: Float32Array,\n p: Float32Array,\n div: Float32Array,\n N: number,\n iters: number,\n sim: SimState | null = null,\n) {\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n if (sim?.mask[id]) {\n div[id] = 0;\n p[id] = 0;\n continue;\n }\n\n div[id] = -0.5 * (\n u[idx(i + 1, j, N)] - u[idx(i - 1, j, N)] +\n v[idx(i, j + 1, N)] - v[idx(i, j - 1, N)]\n ) / N;\n p[id] = 0;\n }\n }\n\n setBoundary(0, div, N, sim);\n setBoundary(0, p, N, sim);\n linSolve(0, p, div, 1, 4, N, iters, sim);\n\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n if (sim?.mask[id]) {\n u[id] = 0;\n v[id] = 0;\n continue;\n }\n u[id] -= 0.5 * N * (p[idx(i + 1, j, N)] - p[idx(i - 1, j, N)]);\n v[id] -= 0.5 * N * (p[idx(i, j + 1, N)] - p[idx(i, j - 1, N)]);\n }\n }\n\n setBoundary(1, u, N, sim);\n setBoundary(2, v, N, sim);\n}\n\nfunction computeCurl(sim: SimState) {\n const { N, u, v, curl } = sim;\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n curl[idx(i, j, N)] = 0.5 * (\n v[idx(i + 1, j, N)] - v[idx(i - 1, j, N)] -\n u[idx(i, j + 1, N)] + u[idx(i, j - 1, N)]\n );\n }\n }\n}\n\nfunction velocityStep(sim: SimState, visc: number, dtLocal: number, iters: number) {\n const { p, div, N } = sim;\n\n addSource(sim.u, sim.uPrev, dtLocal);\n addSource(sim.v, sim.vPrev, dtLocal);\n\n [sim.uPrev, sim.u] = [sim.u, sim.uPrev];\n [sim.vPrev, sim.v] = [sim.v, sim.vPrev];\n\n diffuseField(1, sim.u, sim.uPrev, visc, dtLocal, N, sim);\n diffuseField(2, sim.v, sim.vPrev, visc, dtLocal, N, sim);\n project(sim.u, sim.v, p, div, N, iters, sim);\n\n [sim.uPrev, sim.u] = [sim.u, sim.uPrev];\n [sim.vPrev, sim.v] = [sim.v, sim.vPrev];\n\n advect(1, sim.u, sim.uPrev, sim.uPrev, sim.vPrev, dtLocal, N, sim);\n advect(2, sim.v, sim.vPrev, sim.uPrev, sim.vPrev, dtLocal, N, sim);\n project(sim.u, sim.v, p, div, N, iters, sim);\n\n sim.uPrev.fill(0);\n sim.vPrev.fill(0);\n}\n\nfunction swapScalarBuffers(sim: SimState, fieldKey: \"d\" | \"temp\", prevKey: \"dPrev\" | \"tempPrev\") {\n const field = sim[fieldKey];\n sim[fieldKey] = sim[prevKey];\n sim[prevKey] = field;\n}\n\nfunction scalarStep(fieldKey: \"d\" | \"temp\", prevKey: \"dPrev\" | \"tempPrev\", sim: SimState, diff: number, dtLocal: number) {\n addSource(sim[fieldKey], sim[prevKey], dtLocal);\n swapScalarBuffers(sim, fieldKey, prevKey);\n diffuseField(0, sim[fieldKey], sim[prevKey], diff, dtLocal, sim.N, sim);\n swapScalarBuffers(sim, fieldKey, prevKey);\n advect(0, sim[fieldKey], sim[prevKey], sim.u, sim.v, dtLocal, sim.N, sim);\n sim[prevKey].fill(0);\n}\n\nfunction getModelInfoMap(): Record {\n return {\n smoke_advection: {\n title: \"2D smoke advection\",\n paragraphs: [\n \"This model shows a passive scalar being carried by an incompressible 2D velocity field. The setup is intentionally minimal: there are no internal obstacles, and the main point is to watch how swirls, stretching, and mixing arise when momentum is injected into the fluid and the transported smoke field follows the motion.\",\n \"With the mouse, drag inside the square to inject both momentum and smoke. Fast strokes create jets and rotating structures, while repeated short drags build up denser cloudy regions. Switching the rendering mode lets you compare the smoke concentration with speed and vorticity patterns.\",\n ],\n },\n dye_transport: {\n title: \"Dye transport\",\n paragraphs: [\n \"This case starts with a background flow already present, plus a continuous dye source entering from the left side. It is meant to resemble a transport problem in which a tracer is carried by a nonuniform current, so you can see elongated filaments, lateral spreading, and diffusion acting together.\",\n \"With the mouse, drag anywhere in the domain to locally disturb the flow and inject extra dye. That lets you test how a pre-existing stream reacts to perturbations: you can bend the dye path, create local eddies, or increase mixing near the center of the channel.\",\n ],\n },\n lid_driven_cavity: {\n title: \"Lid-driven cavity flow\",\n paragraphs: [\n \"This is a classic CFD benchmark: fluid is confined in a square cavity while the top boundary acts like a moving lid, dragging the fluid and generating a large recirculating cell plus secondary vortices near the corners. It is useful for visualizing shear generation and recirculation in a closed box.\",\n \"With the mouse, drag inside the cavity to add extra momentum and temporarily disturb the established flow. That is helpful for seeing how the cavity returns toward its characteristic recirculating structure after a perturbation, especially if you view the vorticity field.\",\n ],\n },\n channel_cylinder: {\n title: \"Channel flow around a cylinder\",\n paragraphs: [\n \"This model approximates flow moving through a channel past a circular obstacle. The cylinder blocks the motion, forcing the flow to split and rejoin downstream, which produces a wake and regions of enhanced shear. It is a simplified introduction to bluff-body flow and wake formation.\",\n \"With the mouse, drag upstream, near the obstacle, or in the wake to perturb the flow and dye field. That makes it easier to explore how disturbances interact with the obstacle, how the wake reorganizes, and where mixing becomes strongest behind the cylinder.\",\n ],\n },\n heat_diffusion: {\n title: \"Simple heat diffusion\",\n paragraphs: [\n \"This view focuses on diffusion rather than fluid transport. A hot region is initialized near the center and repeatedly reinforced, then the temperature field spreads outward over time. It is a stripped-down way to visualize how gradients flatten and how a localized source smooths into the surrounding domain.\",\n \"With the mouse, drag or press inside the square to add more heat at the cursor location. You can use that to create multiple hot spots, reinforce the central source, or study how quickly narrow peaks diffuse into broader temperature patches.\",\n ],\n },\n reaction_diffusion: {\n title: \"Reaction-diffusion\",\n paragraphs: [\n \"This model uses two interacting scalar fields with local nonlinear reaction terms and spatial diffusion. Instead of representing literal fluid parcels, it produces self-organizing spots, stripes, and labyrinth-like structures, which are common in simplified models of chemical pattern formation and biological morphogenesis.\",\n \"The mouse does not act as a direct sculpting tool here in the same way as in the transport models, because the pattern evolution is mainly driven by the reaction and diffusion rules. You can still use the global controls to alter resolution and time behavior, then watch how the pattern reorganizes as it evolves.\",\n ],\n },\n shallow_water: {\n title: \"Shallow-water height field\",\n paragraphs: [\n \"This view approximates a thin layer of fluid by tracking only its surface height on a grid. A localized bump creates ripples that propagate outward and reflect from the boundaries. It is not a full free-surface Navier–Stokes simulation, but it captures the basic intuition of wave-like spreading over a shallow layer.\",\n \"With the mouse, drag or press inside the square to add height perturbations and launch new ripples. You can place disturbances at the center or near a wall to compare symmetric wave expansion with reflected, overlapping wave fronts.\",\n ],\n },\n };\n}\n\nfunction runSelfChecks() {\n const N = 16;\n\n if (clamp(2.5, 0, 1) !== 1) {\n throw new Error(\"Self-check failed: clamp upper bound is incorrect.\");\n }\n\n if (clamp(-2.5, 0, 1) !== 0) {\n throw new Error(\"Self-check failed: clamp lower bound is incorrect.\");\n }\n\n const channelSim = createSim(N);\n applyScenarioPreset(channelSim, \"channel_cylinder\");\n if (!channelSim.mask.some(Boolean)) {\n throw new Error(\"Self-check failed: cylinder obstacle mask was not created.\");\n }\n\n const probe = new Float32Array(N * N);\n probe[idx(3, 4, N)] = 7;\n setBoundary(0, probe, N, null);\n\n const smokeSim = createSim(N);\n applyScenarioPreset(smokeSim, \"smoke_advection\");\n smokeSim.dPrev[idx(8, 8, N)] = 1;\n scalarStep(\"d\", \"dPrev\", smokeSim, 0.0001, 0.1);\n if (Number.isNaN(smokeSim.d[idx(8, 8, N)])) {\n throw new Error(\"Self-check failed: scalar step produced NaN.\");\n }\n\n const heatSim = createSim(N);\n applyScenarioPreset(heatSim, \"heat_diffusion\");\n if (heatSim.temp.every((v) => v === 0)) {\n throw new Error(\"Self-check failed: heat preset did not seed temperature.\");\n }\n\n const info = getModelInfoMap();\n if (info.shallow_water.paragraphs.length !== 2 || info.smoke_advection.title.length === 0) {\n throw new Error(\"Self-check failed: model info map is incomplete.\");\n }\n}\n\nrunSelfChecks();\n\nexport default function BrowserCFDPlayground() {\n const canvasRef = useRef(null);\n const simRef = useRef(null);\n const animRef = useRef(0);\n const lastMouseRef = useRef({ x: 0, y: 0, dx: 0, dy: 0, down: false, inside: false });\n\n const [gridSize, setGridSize] = useState(96);\n const [viscosity, setViscosity] = useState(0.00008);\n const [diffusion, setDiffusion] = useState(0.0002);\n const [force, setForce] = useState(1100);\n const [source, setSource] = useState(1.2);\n const [dt, setDt] = useState(0.12);\n const [pressureIters, setPressureIters] = useState(18);\n const [renderMode, setRenderMode] = useState(\"smoke\");\n const [scenario, setScenario] = useState(\"smoke_advection\");\n const [paused, setPaused] = useState(false);\n const [showInfo, setShowInfo] = useState(false);\n const [showModelInfo, setShowModelInfo] = useState(false);\n\n const resetSim = () => {\n const sim = createSim(gridSize);\n applyScenarioPreset(sim, scenario);\n simRef.current = sim;\n };\n\n useEffect(() => {\n resetSim();\n }, [gridSize, scenario]);\n\n const injectFromMouse = (sim: SimState) => {\n const m = lastMouseRef.current;\n if (!m.down || !m.inside) return;\n\n const { N, uPrev, vPrev, dPrev, tempPrev, heightPrev, mask } = sim;\n const cx = clamp(Math.floor((m.x / CANVAS_SIZE) * N), 2, N - 3);\n const cy = clamp(Math.floor((m.y / CANVAS_SIZE) * N), 2, N - 3);\n const fx = m.dx || 0;\n const fy = m.dy || 0;\n\n for (let j = -2; j <= 2; j++) {\n for (let i = -2; i <= 2; i++) {\n const x = clamp(cx + i, 0, N - 1);\n const y = clamp(cy + j, 0, N - 1);\n const k = idx(x, y, N);\n if (mask[k]) continue;\n const w = Math.exp(-(i * i + j * j) / 5);\n\n if (scenario === \"smoke_advection\" || scenario === \"dye_transport\") {\n uPrev[k] += fx * force * w;\n vPrev[k] += fy * force * w;\n dPrev[k] += source * w;\n } else if (scenario === \"heat_diffusion\") {\n tempPrev[k] += 2.5 * w;\n } else if (scenario === \"shallow_water\") {\n heightPrev[k] += 1.8 * w;\n } else {\n uPrev[k] += fx * force * w;\n vPrev[k] += fy * force * w;\n }\n }\n }\n };\n\n const updateScenario = (sim: SimState) => {\n const { N, uPrev, dPrev, tempPrev, heightPrev, d, temp } = sim;\n sim.time += dt;\n\n if (scenario === \"lid_driven_cavity\") {\n for (let i = 1; i < N - 1; i++) {\n uPrev[idx(i, 1, N)] += 2.2;\n }\n velocityStep(sim, viscosity, dt, pressureIters);\n computeCurl(sim);\n return;\n }\n\n if (scenario === \"channel_cylinder\") {\n for (let j = 1; j < N - 1; j++) {\n uPrev[idx(1, j, N)] += 1.4;\n if (j > N * 0.42 && j < N * 0.58) {\n dPrev[idx(2, j, N)] += 0.7;\n }\n }\n velocityStep(sim, viscosity, dt, pressureIters);\n scalarStep(\"d\", \"dPrev\", sim, diffusion, dt);\n return;\n }\n\n if (scenario === \"smoke_advection\") {\n velocityStep(sim, viscosity, dt, pressureIters);\n scalarStep(\"d\", \"dPrev\", sim, diffusion, dt);\n for (let i = 0; i < d.length; i++) {\n d[i] *= 0.996;\n }\n return;\n }\n\n if (scenario === \"dye_transport\") {\n for (let j = Math.floor(N * 0.32); j < Math.floor(N * 0.68); j++) {\n dPrev[idx(Math.floor(N * 0.12), j, N)] += 0.32;\n }\n velocityStep(sim, viscosity * 0.6, dt, pressureIters);\n scalarStep(\"d\", \"dPrev\", sim, diffusion * 0.7, dt);\n return;\n }\n\n if (scenario === \"heat_diffusion\") {\n for (let j = Math.floor(N * 0.46); j < Math.floor(N * 0.54); j++) {\n for (let i = Math.floor(N * 0.46); i < Math.floor(N * 0.54); i++) {\n tempPrev[idx(i, j, N)] += 0.55;\n }\n }\n scalarStep(\"temp\", \"tempPrev\", sim, diffusion * 2.6, dt * 0.6);\n for (let i = 0; i < temp.length; i++) {\n temp[i] *= 0.999;\n }\n return;\n }\n\n if (scenario === \"reaction_diffusion\") {\n const nextA = sim.tempPrev;\n const nextB = sim.heightPrev;\n const currentA = sim.d;\n const currentB = sim.temp;\n\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n const a = currentA[id];\n const b = currentB[id];\n const lapA =\n currentA[idx(i - 1, j, N)] +\n currentA[idx(i + 1, j, N)] +\n currentA[idx(i, j - 1, N)] +\n currentA[idx(i, j + 1, N)] -\n 4 * a;\n const lapB =\n currentB[idx(i - 1, j, N)] +\n currentB[idx(i + 1, j, N)] +\n currentB[idx(i, j - 1, N)] +\n currentB[idx(i, j + 1, N)] -\n 4 * b;\n const feed = 0.032 + 0.006 * Math.sin(sim.time * 0.5);\n const kill = 0.060;\n nextA[id] = clamp(a + (0.16 * lapA - a * b * b + feed * (1 - a)) * 0.9, 0, 1.2);\n nextB[id] = clamp(b + (0.08 * lapB + a * b * b - (kill + feed) * b) * 0.9, 0, 1.2);\n }\n }\n\n for (let j = Math.floor(N * 0.44); j < Math.floor(N * 0.56); j++) {\n for (let i = Math.floor(N * 0.44); i < Math.floor(N * 0.56); i++) {\n nextB[idx(i, j, N)] = 0.95;\n }\n }\n\n sim.d.set(nextA);\n sim.temp.set(nextB);\n return;\n }\n\n if (scenario === \"shallow_water\") {\n const next = sim.heightPrev;\n const cur = sim.height;\n const old = sim.temp;\n\n for (let j = 1; j < N - 1; j++) {\n for (let i = 1; i < N - 1; i++) {\n const id = idx(i, j, N);\n const lap =\n cur[idx(i - 1, j, N)] +\n cur[idx(i + 1, j, N)] +\n cur[idx(i, j - 1, N)] +\n cur[idx(i, j + 1, N)] -\n 4 * cur[id];\n next[id] = (2 * cur[id] - old[id] + 0.18 * lap) * 0.996;\n if (Math.abs(next[id]) < 0.00005) {\n next[id] = 0;\n }\n }\n }\n\n sim.temp.set(cur);\n sim.height.set(next);\n addSource(sim.height, heightPrev, dt * 0.1);\n heightPrev.fill(0);\n }\n };\n\n const render = (sim: SimState, canvas: HTMLCanvasElement) => {\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n const { N, d, u, v, temp, height, mask } = sim;\n computeCurl(sim);\n const image = ctx.createImageData(CANVAS_SIZE, CANVAS_SIZE);\n const cell = CANVAS_SIZE / N;\n\n for (let py = 0; py < CANVAS_SIZE; py++) {\n for (let px = 0; px < CANVAS_SIZE; px++) {\n const i = clamp(Math.floor(px / cell), 0, N - 1);\n const j = clamp(Math.floor(py / cell), 0, N - 1);\n const k = idx(i, j, N);\n const off = 4 * (px + py * CANVAS_SIZE);\n\n let r = 245;\n let g = 247;\n let b = 250;\n\n if (scenario === \"heat_diffusion\") {\n const s = clamp(temp[k], 0, 1.8);\n r = 255;\n g = 250 - Math.floor(140 * s);\n b = 245 - Math.floor(220 * s);\n } else if (scenario === \"reaction_diffusion\") {\n const a = clamp(d[k], 0, 1);\n const bb = clamp(temp[k], 0, 1);\n r = 255 - Math.floor(170 * a);\n g = 240 - Math.floor(210 * bb);\n b = 255 - Math.floor(100 * a) + Math.floor(40 * bb);\n } else if (scenario === \"shallow_water\") {\n const h = clamp(height[k] * 2.5, -1, 1);\n if (h >= 0) {\n r = 225 - Math.floor(110 * h);\n g = 240 - Math.floor(50 * h);\n b = 255;\n } else {\n const a = -h;\n r = 245;\n g = 245 - Math.floor(65 * a);\n b = 255 - Math.floor(120 * a);\n }\n } else if (renderMode === \"smoke\") {\n const s = clamp(d[k], 0, 1.5);\n const shade = Math.floor(255 - 170 * s);\n r = shade;\n g = shade;\n b = Math.min(255, shade + 15);\n } else if (renderMode === \"speed\") {\n const sp = Math.sqrt(u[k] * u[k] + v[k] * v[k]) * 6;\n const t = clamp(sp, 0, 1);\n r = 255 - Math.floor(75 * t);\n g = 250 - Math.floor(175 * t);\n b = 255 - Math.floor(235 * t);\n } else {\n const c = clamp(sim.curl[k] * 18, -1, 1);\n if (c >= 0) {\n r = 255;\n g = 230 - Math.floor(180 * c);\n b = 230 - Math.floor(230 * c);\n } else {\n const a = -c;\n r = 230 - Math.floor(230 * a);\n g = 235 - Math.floor(120 * a);\n b = 255;\n }\n }\n\n if (mask[k]) {\n r = 30;\n g = 41;\n b = 59;\n }\n\n image.data[off] = clamp(r, 0, 255);\n image.data[off + 1] = clamp(g, 0, 255);\n image.data[off + 2] = clamp(b, 0, 255);\n image.data[off + 3] = 255;\n }\n }\n\n ctx.putImageData(image, 0, 0);\n ctx.strokeStyle = \"rgba(15, 23, 42, 0.16)\";\n ctx.lineWidth = 1;\n ctx.strokeRect(0.5, 0.5, CANVAS_SIZE - 1, CANVAS_SIZE - 1);\n };\n\n useEffect(() => {\n if (!simRef.current) {\n const sim = createSim(gridSize);\n applyScenarioPreset(sim, scenario);\n simRef.current = sim;\n }\n\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n const step = () => {\n const sim = simRef.current;\n if (sim && !paused) {\n injectFromMouse(sim);\n updateScenario(sim);\n }\n if (sim) {\n render(sim, canvas);\n }\n lastMouseRef.current.dx = 0;\n lastMouseRef.current.dy = 0;\n animRef.current = requestAnimationFrame(step);\n };\n\n animRef.current = requestAnimationFrame(step);\n return () => cancelAnimationFrame(animRef.current);\n }, [gridSize, viscosity, diffusion, force, source, dt, pressureIters, renderMode, scenario, paused]);\n\n const pointerPos = (e: React.PointerEvent) => {\n const rect = canvasRef.current?.getBoundingClientRect();\n if (!rect) {\n return { x: 0, y: 0 };\n }\n return {\n x: ((e.clientX - rect.left) / rect.width) * CANVAS_SIZE,\n y: ((e.clientY - rect.top) / rect.height) * CANVAS_SIZE,\n };\n };\n\n const badge = useMemo(() => {\n const labels: Record = {\n smoke_advection: \"2D smoke advection\",\n dye_transport: \"Dye transport\",\n lid_driven_cavity: \"Lid-driven cavity flow\",\n channel_cylinder: \"Channel flow around a cylinder\",\n heat_diffusion: \"Simple heat diffusion\",\n reaction_diffusion: \"Reaction-diffusion\",\n shallow_water: \"Shallow-water height field\",\n };\n return labels[scenario];\n }, [scenario]);\n\n const modelInfo = useMemo(() => getModelInfoMap()[scenario], [scenario]);\n\n const renderModeDisabled =\n scenario === \"heat_diffusion\" || scenario === \"reaction_diffusion\" || scenario === \"shallow_water\";\n\n return (\n

\n setShowInfo(true)}\n className=\"text-xs rounded-full px-3 py-1 bg-slate-900 text-white border border-slate-900 mt-1\"\n >\n Info\n \n

Simple CFD in the browser

\n Switch between several lightweight browser-friendly flow and transport models. Drag inside the box to perturb the field or inject material, heat, or height depending on the selected model.\n

\n {badge}\n

\n setShowModelInfo(true)}\n className=\"text-xs rounded-full px-3 py-1 bg-white text-slate-900 border border-slate-300\"\n >\n Model info\n \n

\n\n

\n {\n const p = pointerPos(e);\n lastMouseRef.current = { x: p.x, y: p.y, dx: 0, dy: 0, down: true, inside: true };\n }}\n onPointerMove={(e) => {\n const p = pointerPos(e);\n const prev = lastMouseRef.current;\n lastMouseRef.current = {\n x: p.x,\n y: p.y,\n dx: (p.x - prev.x) / CANVAS_SIZE,\n dy: (p.y - prev.y) / CANVAS_SIZE,\n down: prev.down,\n inside: true,\n };\n }}\n onPointerUp={() => {\n lastMouseRef.current.down = false;\n }}\n onPointerLeave={() => {\n lastMouseRef.current.inside = false;\n lastMouseRef.current.down = false;\n }}\n onPointerEnter={() => {\n lastMouseRef.current.inside = true;\n }}\n />\n

\n\n

\n setPaused((p) => !p)}\n className=\"rounded-2xl px-4 py-3 bg-slate-900 text-white shadow\"\n >\n {paused ? \"Resume\" : \"Pause\"}\n \n \n Reset\n \n setRenderMode(\"smoke\")}\n disabled={renderModeDisabled}\n className={`rounded-2xl px-4 py-3 border ${\n renderMode === \"smoke\" ? \"bg-slate-900 text-white border-slate-900\" : \"bg-white border-slate-300\"\n } ${renderModeDisabled ? \"opacity-40 cursor-not-allowed\" : \"\"}`}\n >\n Scalar\n \n setRenderMode(\"speed\")}\n disabled={renderModeDisabled}\n className={`rounded-2xl px-4 py-3 border ${\n renderMode === \"speed\" ? \"bg-slate-900 text-white border-slate-900\" : \"bg-white border-slate-300\"\n } ${renderModeDisabled ? \"opacity-40 cursor-not-allowed\" : \"\"}`}\n >\n Speed\n \n

\n\n

\n setRenderMode(\"vorticity\")}\n disabled={renderModeDisabled}\n className={`rounded-2xl px-4 py-3 border ${\n renderMode === \"vorticity\"\n ? \"bg-slate-900 text-white border-slate-900\"\n : \"bg-white border-slate-300\"\n } ${renderModeDisabled ? \"opacity-40 cursor-not-allowed\" : \"\"}`}\n >\n Vorticity\n \n

\n\n

Models

\n \n \n \n \n \n \n \n

\n\n

Controls

\n \n \n \n \n \n \n \n

\n\n

What this demo is solving

\n For the fluid-style cases, it advances a 2D velocity field and one transported scalar using a stripped-down stable-fluids style approach:\n

\n ∂u/∂t + (u·∇)u = -∇p + ν∇²u + f\n
\n ∇·u = 0\n
\n ∂ρ/∂t + u·∇ρ = κ∇²ρ + s\n

\n Other tabs reuse the same lightweight grid ideas for diffusion, pattern formation, or surface-wave propagation so the whole playground stays fast enough for a browser preview.\n

\n\n

Limitations

\n These simulations are educational approximations, not engineering-grade CFD solvers. They run on a coarse 2D grid, use simplified boundary handling, and emphasize stability and responsiveness over numerical fidelity. That means viscosity, diffusion, wake structure, vortex persistence, and mixing rates are only qualitatively plausible. In several tabs, the same underlying machinery is reused to mimic different physical systems, so the labels should be read as toy models inspired by smoke flow, channel flow, heat transport, shallow water, or reaction-diffusion behavior rather than literal reproductions of those equations in their most complete form.\n

\n A real CFD workflow would usually require mesh refinement studies, better time integration, carefully chosen numerical schemes, validated boundary conditions, and often 3D geometry, turbulence models, or calibrated material parameters. None of that is present here. Browser limitations also force a low-resolution canvas and a very small computational budget per frame, so results can depend strongly on slider values and may produce artifacts such as excessive smoothing, numerical damping, or visually pleasing but nonphysical patterns. This is best used for intuition, comparison, and concept exploration, not for design decisions or quantitative prediction.\n

\n\n {showInfo && (\n setShowInfo(false)}>\n

\n Most of the flow-based simulations here are simplified versions of the incompressible Navier–Stokes equations in two dimensions. The velocity field evolves under advection, diffusion, and pressure forces that enforce incompressibility using a projection method. In the smoke, dye, cavity, and cylinder views, you are seeing different ways that the same core transport-and-pressure machinery can produce vortices, shear layers, recirculation zones, and mixing.\n

\n Scalars like smoke, dye, or temperature are represented as fields that live on the same grid and get transported or diffused over time. Reaction–diffusion adds nonlinear local chemistry-like interactions between two fields, which can create spots and stripes. The shallow-water model replaces transported dye with a surface-height field and uses a discrete wave-style update to mimic ripples and propagating disturbances.\n

\n All of this is done with Eulerian grid methods and finite-difference approximations, chosen to stay stable and interactive in a browser. The goal is qualitative intuition about fluid motion and related PDE-style behavior, not high-precision physical prediction.\n

\n \n )}\n\n {showModelInfo && (\n setShowModelInfo(false)}>\n

{modelInfo.paragraphs[0]}

{modelInfo.paragraphs[1]}

\n \n )}\n

\n );\n}\n\nfunction Modal({\n title,\n onClose,\n children,\n}: {\n title: string;\n onClose: () => void;\n children: React.ReactNode;\n}) {\n return (\n

{title}

\n \n

{children}

\n );\n}\n\nfunction Slider({\n label,\n min,\n max,\n step,\n value,\n setValue,\n}: {\n label: string;\n min: number;\n max: number;\n step: number;\n value: number;\n setValue: (value: number) => void;\n}) {\n return (\n \n

{label}

\n setValue(Number(e.target.value))}\n className=\"w-full\"\n />\n \n );\n}\n\nfunction ScenarioButton({\n current,\n value,\n setValue,\n label,\n}: {\n current: ScenarioKey;\n value: ScenarioKey;\n setValue: (value: ScenarioKey) => void;\n label: string;\n}) {\n const active = current === value;\n return (\n setValue(value)}\n className={`rounded-2xl px-4 py-3 border text-left ${\n active ? \"bg-slate-900 text-white border-slate-900\" : \"bg-white border-slate-300 text-slate-900\"\n }`}\n >\n {label}\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","18425940348704843756","traceTime",1789574017400]