one simulation · one readable timestep

laval

The lessons are now collapsed into the final model. Start with step.js, then follow each imported operation into the physics.

\n\n

\n Hybrid particle lava lamp\n temperature → pressure → forces → projection → motion\n

\n \n \n \n

0frames

0particles

0average heat

0%wax height

0maximum speed

0maximum density

\n\n \n

\n\n

reading order

Rebuild it in this order

step.js — the complete frame, readable top to bottom
state.js — authoritative particles and grid fields
temperature.js — heater and cooling
particles.js — buoyancy, cohesion, pressure and motion
projection.js — particle/grid velocity coupling
geometry.js — lamp shape and collisions
diagnostics.js — measurements only

stepLavaLamp(state, settings)\n  updateParticleTemperatures()\n  applyParticleVolumePressure()\n  applyParticleForces()\n  projectParticleMotion()\n  moveParticles()\n  rasterizeParticles()\n  measureSimulation()

\n\n\n`;\n",[59,60,62],"f1340c10-1007-45af-9382-df0fe0c3c541","c305d0ec-86fa-11f1-ace5-1607ee4eb77e",230,["D",1785251315458],0,"directory",[59,60],{"_35":99,"_13":59,"_38":70,"_40":-5,"_42":43,"_44":50,"_46":47,"_48":100,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":101,"_18":102},{"_35":90,"_13":91,"_38":92,"_40":-5,"_42":43,"_44":93,"_46":47,"_48":94,"_17":95,"_51":24,"_53":96,"_55":56,"_57":-5,"_87":97,"_18":98},{"_35":79,"_13":80,"_38":81,"_40":-5,"_42":43,"_44":82,"_46":47,"_48":83,"_17":84,"_51":85,"_53":86,"_55":56,"_57":14,"_87":88,"_18":89},"c81208e2-cbe0-40c9-9d9e-48d5d170c77d","main.ts","b0d26520-86fa-11f1-9ca8-1607ee4eb77e",258,["D",1785252584636],145,"http","import { documentHtml } from \"./src/ui/document.ts\";\nimport { styles } from \"./src/ui/styles.ts\";\n\nconst headers = {\n html: { \"content-type\": \"text/html; charset=utf-8\" },\n css: { \"content-type\": \"text/css; charset=utf-8\" },\n};\n\nexport default function (request: Request) {\n const pathname = new URL(request.url).pathname;\n\n if (pathname === \"/styles.css\") {\n return new Response(styles, { headers: headers.css });\n }\n\n return new Response(documentHtml, { headers: headers.html });\n}\n","children",[],[80],"6edce35b-3a56-4d22-abb1-948507aa2da7","README.md","d9aa0084-86fa-11f1-87e4-1607ee4eb77e",287,["D",1785333832243],46,"# laval\n\nA readable, browser-based lava lamp simulation for learning how a small computational fluid model is assembled.\n\nLive simulator: https://laval.val.run/\n\n## Start here\n\nOpen `src/simulation/step.js`. It contains the complete authoritative frame:\n\n```js\nexport function stepLavaLamp(state, settings) {\n const deltaTime = settings.timeStep / settings.substeps;\n\n for (let substep = 0; substep < settings.substeps; substep++) {\n updateParticleTemperatures(state, settings, deltaTime);\n applyParticleVolumePressure(state, settings, deltaTime);\n applyParticleForces(state, settings, deltaTime);\n projectParticleMotion(state, settings);\n moveParticles(state, deltaTime);\n rasterizeParticles(state);\n }\n\n return measureSimulation(state);\n}\n```\n\nEvery operation accepts ordinary simulation data. Physics modules do not read sliders, draw the canvas, change buttons, or know which UI is running them.\n\n## Rebuild order\n\n1. `config.js` — choose a grid width, height, and cell size.\n2. `grid.js` — map two-dimensional coordinates to flat arrays.\n3. `settings.js` — define plain numerical model parameters.\n4. `state.js` — create particles and the grid fields.\n5. `geometry.js` — define the tapered vessel and particle collisions.\n6. `temperature.js` — heat particles at the bottom and cool them elsewhere.\n7. `particles.js` — add buoyancy, cohesion, volume pressure, motion, and rasterization.\n8. `projection.js` — deposit particle velocity to the grid, reduce divergence, and sample it back.\n9. `diagnostics.js` — measure the result without changing it.\n10. `step.js` — compose those operations into one frame.\n11. `renderer.js` and `app.js` — connect the core to a canvas and controls.\n\n## Architecture\n\n```text\nsrc/\n browser/\n app.js thin DOM and animation controller\n renderer.js canvas output\n config.js grid dimensions\n grid.js coordinate helpers\n\n simulation/\n settings.js\n state.js\n geometry.js\n temperature.js\n particles.js\n projection.js\n diagnostics.js\n step.js\n\n ui/\n document.ts\n styles.ts\n\n contracts.ts TypeScript description of the model\n```\n\n## State versus settings\n\n`state` contains values that evolve: particle positions, velocities, temperatures, grid velocity, pressure, and time.\n\n`settings` contains inputs selected before or during a run: heater strength, cooling, cohesion, pressure strength, target density, and timestep controls.\n\nThe UI changes `settings`. The simulation changes `state`.\n\n## What the model represents\n\nWax is a fixed collection of particles. Each particle stores position, velocity, and normalized temperature. Heating changes buoyancy. Pairwise cohesion attracts nearby particles. Neighbor-density pressure prevents them from collapsing into one point.\n\nParticle velocity is deposited bilinearly onto an Eulerian grid. Pressure projection reduces divergence on that grid, then the corrected velocity is sampled back to the particles. Analytic collisions keep particles inside the tapered vessel.\n\nThe model is deterministic and educational. Its normalized coefficients are not calibrated material constants, and its pressure calculation is an SPH-style teaching approximation rather than a production CFD solver.\n",[],[91],"ec02ba1f-9c0f-4799-880e-882f8edb6681",["D",1784854699691],[103,104,105,106],[59],{"_35":206,"_13":207,"_38":208,"_40":70,"_42":43,"_44":209,"_46":47,"_48":210,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":211,"_18":212},{"_35":127,"_13":128,"_38":129,"_40":70,"_42":43,"_44":130,"_46":47,"_48":131,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":132,"_18":133},{"_35":69,"_13":60,"_38":41,"_40":70,"_42":43,"_44":71,"_46":47,"_48":116,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":117,"_18":118},{"_35":107,"_13":108,"_38":109,"_40":70,"_42":43,"_44":110,"_46":47,"_48":111,"_17":112,"_51":52,"_53":113,"_55":56,"_57":-5,"_87":114,"_18":115},"208ae2da-7562-4a89-8aaa-7a04306939e5","contracts.ts","db9d981a-86fa-11f1-aed7-1607ee4eb77e",286,["D",1785333828580],41,"export interface WaxParticle {\n x: number;\n y: number;\n vx: number;\n vy: number;\n temperature: number;\n}\n\nexport interface SimulationSettings {\n particleCount: number;\n heaterStrength: number;\n coolingRate: number;\n glassCoolingRate: number;\n heaterFocus: number;\n neutralTemperature: number;\n densityResponse: number;\n particleCohesion: number;\n restDensity: number;\n volumePressure: number;\n pressureIterations: number;\n timeStep: number;\n substeps: number;\n playbackRate: number;\n}\n\nexport interface SimulationDiagnostics {\n tick: number;\n particleCount: number;\n averageTemperature: number;\n waxHeight: number;\n maximumSpeed: number;\n maximumDensity: number;\n}\n\nexport interface SimulationState {\n particles: WaxParticle[];\n wax: Float32Array;\n temperature: Float32Array;\n velocityX: Float32Array;\n velocityY: Float32Array;\n divergence: Float32Array;\n pressure: Float32Array;\n pressureNext: Float32Array;\n vesselMask: Uint8Array;\n tick: number;\n time: number;\n diagnostics: SimulationDiagnostics | Record;\n indexOf(x: number, y: number): number;\n}\n",[],[59,108],["D",1785251315458],[119,120],[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":124,"_17":66,"_51":52,"_53":67,"_55":56,"_57":-5,"_87":125,"_18":126},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":121,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":122,"_18":123},["D",1785338155164],[],[59,60,37],["D",1785338051424],[],[59,60,62],"b99a0b6b-59b7-4f82-8ffb-9b85d7bec8a1","simulation","747a0682-8b55-11f1-8efb-1607ee4eb77e",272,["D",1785333456767],[134,135,136,137,138,139,140,141],[59,128],{"_35":198,"_13":199,"_38":200,"_40":129,"_42":43,"_44":201,"_46":47,"_48":202,"_17":73,"_51":52,"_53":203,"_55":56,"_57":-5,"_87":204,"_18":205},{"_35":190,"_13":191,"_38":192,"_40":129,"_42":43,"_44":193,"_46":47,"_48":194,"_17":73,"_51":52,"_53":195,"_55":56,"_57":-5,"_87":196,"_18":197},{"_35":182,"_13":183,"_38":184,"_40":129,"_42":43,"_44":185,"_46":47,"_48":186,"_17":73,"_51":52,"_53":187,"_55":56,"_57":-5,"_87":188,"_18":189},{"_35":174,"_13":175,"_38":176,"_40":129,"_42":43,"_44":177,"_46":47,"_48":178,"_17":73,"_51":52,"_53":179,"_55":56,"_57":-5,"_87":180,"_18":181},{"_35":166,"_13":167,"_38":168,"_40":129,"_42":43,"_44":169,"_46":47,"_48":170,"_17":73,"_51":52,"_53":171,"_55":56,"_57":-5,"_87":172,"_18":173},{"_35":158,"_13":159,"_38":160,"_40":129,"_42":43,"_44":161,"_46":47,"_48":162,"_17":73,"_51":52,"_53":163,"_55":56,"_57":-5,"_87":164,"_18":165},{"_35":150,"_13":151,"_38":152,"_40":129,"_42":43,"_44":153,"_46":47,"_48":154,"_17":73,"_51":52,"_53":155,"_55":56,"_57":-5,"_87":156,"_18":157},{"_35":142,"_13":143,"_38":144,"_40":129,"_42":43,"_44":145,"_46":47,"_48":146,"_17":73,"_51":52,"_53":147,"_55":56,"_57":-5,"_87":148,"_18":149},"455563c6-0b2f-4ddc-8247-2f61d2a7e1e6","temperature.js","91c24bf0-8b55-11f1-864d-1607ee4eb77e",276,["D",1785333505864],"import { HEIGHT, WIDTH } from \"../browser/config.js\";\nimport { lampHalfWidth } from \"./geometry.js\";\n\nexport function updateParticleTemperatures(state, settings, deltaTime) {\n const center = (WIDTH - 1) / 2;\n const heaterWidth = 4 - 3 * settings.heaterFocus;\n const movingHotspot = 1.8 * Math.sin(state.tick * 0.045);\n\n for (let n = 0; n < state.particles.length; n++) {\n const particle = state.particles[n];\n const normalizedDistance = (particle.x - (center + movingHotspot)) / heaterWidth;\n const unevenness = 0.65 + 0.45 * (0.5 + 0.5 * Math.sin(particle.x * 2.1 + n * 0.17));\n\n if (particle.y > HEIGHT - 5.5) {\n particle.temperature +=\n settings.heaterStrength *\n deltaTime *\n Math.exp(-normalizedDistance * normalizedDistance) *\n unevenness;\n }\n\n particle.temperature *= 1 - settings.coolingRate * deltaTime;\n\n const wallGap = lampHalfWidth(particle.y) - Math.abs(particle.x - center);\n if (particle.y < 4 || wallGap < 1.2) {\n particle.temperature *= 1 - settings.glassCoolingRate * deltaTime;\n }\n\n particle.temperature = Math.max(0, Math.min(1, particle.temperature));\n }\n}\n",[],[59,128,143],"038e7c26-97c9-49c5-b89b-d6c003072a35","step.js","be109ad6-8b55-11f1-8b5e-1607ee4eb77e",280,["D",1785333580230],"import { measureSimulation } from \"./diagnostics.js\";\nimport {\n applyParticleForces,\n applyParticleVolumePressure,\n moveParticles,\n rasterizeParticles,\n} from \"./particles.js\";\nimport { projectParticleMotion } from \"./projection.js\";\nimport { updateParticleTemperatures } from \"./temperature.js\";\n\nexport function stepLavaLamp(state, settings) {\n const deltaTime = settings.timeStep / settings.substeps;\n let maximumDensity = 0;\n\n for (let substep = 0; substep < settings.substeps; substep++) {\n updateParticleTemperatures(state, settings, deltaTime);\n maximumDensity = applyParticleVolumePressure(state, settings, deltaTime);\n applyParticleForces(state, settings, deltaTime);\n projectParticleMotion(state, settings);\n moveParticles(state, deltaTime);\n rasterizeParticles(state);\n }\n\n state.tick++;\n state.time += settings.timeStep;\n state.diagnostics = measureSimulation(state, maximumDensity);\n return state.diagnostics;\n}\n",[],[59,128,151],"128ec34c-61c8-4b69-a4e1-582b0af09489","state.js","8f57c610-8b55-11f1-aa55-1607ee4eb77e",275,["D",1785333501824],"import { HEIGHT, WIDTH } from \"../browser/config.js\";\nimport { createGrid } from \"../browser/grid.js\";\nimport { buildLampMask, lampHalfWidth } from \"./geometry.js\";\n\nexport function createSimulationState(settings) {\n const cellCount = WIDTH * HEIGHT;\n const wax = new Float32Array(cellCount);\n const temperature = new Float32Array(cellCount);\n const grid = createGrid(WIDTH, HEIGHT, wax);\n\n const state = {\n particles: [],\n wax,\n temperature,\n velocityX: new Float32Array(cellCount),\n velocityY: new Float32Array(cellCount),\n divergence: new Float32Array(cellCount),\n pressure: new Float32Array(cellCount),\n pressureNext: new Float32Array(cellCount),\n vesselMask: null,\n tick: 0,\n time: 0,\n diagnostics: {},\n indexOf: grid.indexOf,\n };\n\n state.vesselMask = buildLampMask(state.indexOf);\n seedParticles(state, settings);\n return state;\n}\n\nexport function seedParticles(state, settings) {\n state.particles.length = 0;\n const center = (WIDTH - 1) / 2;\n\n for (\n let y = HEIGHT - 7.4;\n y <= HEIGHT - 2.1 && state.particles.length < settings.particleCount;\n y += 0.52\n ) {\n for (\n let x = center - 5.6;\n x <= center + 5.6 && state.particles.length < settings.particleCount;\n x += 0.52\n ) {\n if (Math.abs(x - center) >= lampHalfWidth(y) - 0.5) continue;\n const n = state.particles.length;\n state.particles.push({\n x: x + 0.06 * Math.sin(n * 1.7),\n y: y + 0.04 * Math.cos(n * 2.1),\n vx: 0,\n vy: 0,\n temperature: 0.2 + 0.035 * Math.sin(x * 1.9),\n });\n }\n }\n\n state.tick = 0;\n state.time = 0;\n}\n",[],[59,128,159],"1d87a5e4-2b2f-4b04-8da4-fcf63eba3723","settings.js","8aa47a82-8b55-11f1-84b0-1607ee4eb77e",273,["D",1785333493953],"export const defaultSettings = {\n particleCount: 220,\n heaterStrength: 0.12,\n coolingRate: 0.02,\n glassCoolingRate: 0.1,\n heaterFocus: 0.8,\n neutralTemperature: 0.5,\n densityResponse: 1.2,\n particleCohesion: 0.7,\n restDensity: 3,\n volumePressure: 0.9,\n pressureIterations: 60,\n timeStep: 1,\n substeps: 4,\n playbackRate: 6,\n};\n\nexport function copySettings(overrides = {}) {\n return { ...defaultSettings, ...overrides };\n}\n",[],[59,128,167],"409deb34-e9c7-4292-8258-2c73b3315eda","projection.js","b8d370d4-8b55-11f1-864d-1607ee4eb77e",278,["D",1785333571436],"import { HEIGHT, WIDTH } from \"../browser/config.js\";\n\nfunction sample(array, state, x, y) {\n const clampedX = Math.max(0, Math.min(WIDTH - 1, x));\n const clampedY = Math.max(0, Math.min(HEIGHT - 1, y));\n return array[state.indexOf(clampedX, clampedY)];\n}\n\nfunction computeDivergence(state) {\n for (let y = 0; y < HEIGHT; y++) {\n for (let x = 0; x < WIDTH; x++) {\n const horizontal =\n (sample(state.velocityX, state, x + 1, y) - sample(state.velocityX, state, x - 1, y)) *\n 0.5;\n const vertical =\n (sample(state.velocityY, state, x, y + 1) - sample(state.velocityY, state, x, y - 1)) *\n 0.5;\n state.divergence[state.indexOf(x, y)] = horizontal + vertical;\n }\n }\n}\n\nfunction depositParticleVelocities(state) {\n state.velocityX.fill(0);\n state.velocityY.fill(0);\n const weights = new Float32Array(WIDTH * HEIGHT);\n\n for (const particle of state.particles) {\n const x0 = Math.floor(particle.x);\n const y0 = Math.floor(particle.y);\n const tx = particle.x - x0;\n const ty = particle.y - y0;\n\n for (let offsetY = 0; offsetY <= 1; offsetY++) {\n for (let offsetX = 0; offsetX <= 1; offsetX++) {\n const x = Math.max(0, Math.min(WIDTH - 1, x0 + offsetX));\n const y = Math.max(0, Math.min(HEIGHT - 1, y0 + offsetY));\n const weight =\n (offsetX ? tx : 1 - tx) *\n (offsetY ? ty : 1 - ty);\n const index = state.indexOf(x, y);\n\n state.velocityX[index] += particle.vx * weight;\n state.velocityY[index] += particle.vy * weight;\n weights[index] += weight;\n }\n }\n }\n\n for (let index = 0; index < weights.length; index++) {\n if (!weights[index]) continue;\n state.velocityX[index] /= weights[index];\n state.velocityY[index] /= weights[index];\n }\n}\n\nfunction solvePressure(state, iterations) {\n computeDivergence(state);\n state.pressure.fill(0);\n state.pressureNext.fill(0);\n\n for (let iteration = 0; iteration < iterations; iteration++) {\n for (let y = 0; y < HEIGHT; y++) {\n for (let x = 0; x < WIDTH; x++) {\n state.pressureNext[state.indexOf(x, y)] =\n (sample(state.pressure, state, x - 1, y) +\n sample(state.pressure, state, x + 1, y) +\n sample(state.pressure, state, x, y - 1) +\n sample(state.pressure, state, x, y + 1) -\n state.divergence[state.indexOf(x, y)]) /\n 4;\n }\n }\n\n const previous = state.pressure;\n state.pressure = state.pressureNext;\n state.pressureNext = previous;\n }\n\n for (let y = 0; y < HEIGHT; y++) {\n for (let x = 0; x < WIDTH; x++) {\n const index = state.indexOf(x, y);\n state.velocityX[index] -=\n 0.5 *\n (sample(state.pressure, state, x + 1, y) -\n sample(state.pressure, state, x - 1, y));\n state.velocityY[index] -=\n 0.5 *\n (sample(state.pressure, state, x, y + 1) -\n sample(state.pressure, state, x, y - 1));\n }\n }\n}\n\nfunction enforceGridBoundaries(state) {\n for (let y = 0; y < HEIGHT; y++) {\n state.velocityX[state.indexOf(0, y)] = 0;\n state.velocityX[state.indexOf(WIDTH - 1, y)] = 0;\n }\n\n for (let x = 0; x < WIDTH; x++) {\n state.velocityY[state.indexOf(x, 0)] = 0;\n state.velocityY[state.indexOf(x, HEIGHT - 1)] = 0;\n }\n\n for (let y = 0; y < HEIGHT; y++) {\n for (let x = 0; x < WIDTH; x++) {\n const index = state.indexOf(x, y);\n if (!state.vesselMask[index]) {\n state.velocityX[index] = 0;\n state.velocityY[index] = 0;\n }\n }\n }\n}\n\nfunction sampleProjectedVelocity(state, particle) {\n const x0 = Math.floor(particle.x);\n const y0 = Math.floor(particle.y);\n const tx = particle.x - x0;\n const ty = particle.y - y0;\n let velocityX = 0;\n let velocityY = 0;\n\n for (let offsetY = 0; offsetY <= 1; offsetY++) {\n for (let offsetX = 0; offsetX <= 1; offsetX++) {\n const x = Math.max(0, Math.min(WIDTH - 1, x0 + offsetX));\n const y = Math.max(0, Math.min(HEIGHT - 1, y0 + offsetY));\n const weight =\n (offsetX ? tx : 1 - tx) *\n (offsetY ? ty : 1 - ty);\n const index = state.indexOf(x, y);\n\n velocityX += state.velocityX[index] * weight;\n velocityY += state.velocityY[index] * weight;\n }\n }\n\n return { x: velocityX, y: velocityY };\n}\n\nexport function projectParticleMotion(state, settings) {\n depositParticleVelocities(state);\n solvePressure(state, settings.pressureIterations);\n enforceGridBoundaries(state);\n\n for (const particle of state.particles) {\n const projected = sampleProjectedVelocity(state, particle);\n particle.vx = particle.vx * 0.52 + projected.x * 0.48;\n particle.vy = particle.vy * 0.52 + projected.y * 0.48;\n }\n}\n",[],[59,128,175],"d09791d9-b992-4a0b-b476-6da19488ddd2","particles.js","b6c69ea6-8b55-11f1-8977-1607ee4eb77e",277,["D",1785333568006],"import { HEIGHT, WIDTH } from \"../browser/config.js\";\nimport { collideWithLamp } from \"./geometry.js\";\n\nexport function applyParticleForces(state, settings, deltaTime) {\n for (const particle of state.particles) {\n particle.vy +=\n (settings.neutralTemperature - particle.temperature) *\n settings.densityResponse *\n 0.24 *\n deltaTime;\n particle.vx *= 0.992;\n particle.vy *= 0.992;\n }\n\n for (let a = 0; a < state.particles.length; a++) {\n for (let b = a + 1; b < state.particles.length; b++) {\n const first = state.particles[a];\n const second = state.particles[b];\n const dx = second.x - first.x;\n const dy = second.y - first.y;\n const distanceSquared = dx * dx + dy * dy;\n if (distanceSquared < 0.01 || distanceSquared > 2.25) continue;\n\n const distance = Math.sqrt(distanceSquared);\n const averageTemperature = (first.temperature + second.temperature) * 0.5;\n const phaseCohesion = 0.22 + 0.78 * (1 - averageTemperature);\n const force =\n (distance - 0.58) *\n 0.032 *\n settings.particleCohesion *\n phaseCohesion *\n deltaTime;\n const forceX = (force * dx) / distance;\n const forceY = (force * dy) / distance;\n\n first.vx += forceX;\n first.vy += forceY;\n second.vx -= forceX;\n second.vy -= forceY;\n }\n }\n}\n\nexport function applyParticleVolumePressure(state, settings, deltaTime) {\n const smoothingRadius = 1.3;\n const density = new Float32Array(state.particles.length);\n let maximumDensity = 0;\n\n for (let a = 0; a < state.particles.length; a++) {\n density[a] = 1;\n\n for (let b = a + 1; b < state.particles.length; b++) {\n const first = state.particles[a];\n const second = state.particles[b];\n const dx = second.x - first.x;\n const dy = second.y - first.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance >= smoothingRadius) continue;\n\n let weight = 1 - distance / smoothingRadius;\n weight *= weight;\n density[a] += weight;\n density[b] += weight;\n }\n }\n\n for (const value of density) maximumDensity = Math.max(maximumDensity, value);\n\n for (let a = 0; a < state.particles.length; a++) {\n for (let b = a + 1; b < state.particles.length; b++) {\n const first = state.particles[a];\n const second = state.particles[b];\n const dx = second.x - first.x;\n const dy = second.y - first.y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance < 0.001 || distance >= smoothingRadius) continue;\n\n const averageDensity = (density[a] + density[b]) * 0.5;\n const excessDensity = Math.max(0, averageDensity - settings.restDensity);\n const hardCoreRepulsion = Math.max(0, 0.48 - distance) * 2;\n const pressure =\n (excessDensity * (1 - distance / smoothingRadius) * 0.055 +\n hardCoreRepulsion * 0.12) *\n settings.volumePressure *\n deltaTime;\n const forceX = (pressure * dx) / distance;\n const forceY = (pressure * dy) / distance;\n\n first.vx -= forceX;\n first.vy -= forceY;\n second.vx += forceX;\n second.vy += forceY;\n }\n }\n\n return maximumDensity;\n}\n\nexport function moveParticles(state, deltaTime) {\n for (const particle of state.particles) {\n particle.x += particle.vx * deltaTime;\n particle.y += particle.vy * deltaTime;\n collideWithLamp(particle);\n }\n}\n\nexport function rasterizeParticles(state) {\n state.wax.fill(0);\n state.temperature.fill(0);\n\n for (const particle of state.particles) {\n const x = Math.max(0, Math.min(WIDTH - 1, Math.round(particle.x)));\n const y = Math.max(0, Math.min(HEIGHT - 1, Math.round(particle.y)));\n const index = state.indexOf(x, y);\n state.wax[index] = Math.min(1, state.wax[index] + 0.32);\n state.temperature[index] = Math.max(state.temperature[index], particle.temperature);\n }\n}\n",[],[59,128,183],"da779fb8-0d28-455c-ad85-0dcb7040e179","geometry.js","8cce612e-8b55-11f1-be8d-1607ee4eb77e",274,["D",1785333497586],"import { HEIGHT, WIDTH } from \"../browser/config.js\";\n\nexport function lampHalfWidth(y) {\n const t = Math.max(0, Math.min(1, y / (HEIGHT - 1)));\n return 4.5 + 6.2 * Math.pow(Math.sin(Math.PI * t), 0.72);\n}\n\nexport function buildLampMask(indexOf) {\n const mask = new Uint8Array(WIDTH * HEIGHT);\n const center = (WIDTH - 1) / 2;\n\n for (let y = 0; y < HEIGHT; y++) {\n for (let x = 0; x < WIDTH; x++) {\n mask[indexOf(x, y)] =\n y > 0 && y < HEIGHT - 1 && Math.abs(x - center) <= lampHalfWidth(y) ? 1 : 0;\n }\n }\n\n return mask;\n}\n\nexport function collideWithLamp(particle) {\n const center = (WIDTH - 1) / 2;\n const minimumY = 1.35;\n const maximumY = HEIGHT - 2.05;\n\n particle.y = Math.max(minimumY, Math.min(maximumY, particle.y));\n if (particle.y === minimumY && particle.vy < 0) particle.vy *= -0.18;\n if (particle.y === maximumY && particle.vy > 0) particle.vy *= -0.12;\n\n const horizontalLimit = lampHalfWidth(particle.y) - 0.48;\n if (particle.x < center - horizontalLimit) {\n particle.x = center - horizontalLimit;\n particle.vx = Math.abs(particle.vx) * 0.2;\n }\n if (particle.x > center + horizontalLimit) {\n particle.x = center + horizontalLimit;\n particle.vx = -Math.abs(particle.vx) * 0.2;\n }\n}\n",[],[59,128,191],"39d7cd22-a1b7-41ac-b197-47f50b19dfa8","diagnostics.js","bbd76092-8b55-11f1-b641-1607ee4eb77e",279,["D",1785333576506],"import { HEIGHT } from \"../browser/config.js\";\n\nexport function measureSimulation(state, maximumDensity) {\n let averageTemperature = 0;\n let heightSum = 0;\n let maximumSpeed = 0;\n\n for (const particle of state.particles) {\n averageTemperature += particle.temperature;\n heightSum += 1 - particle.y / (HEIGHT - 1);\n maximumSpeed = Math.max(maximumSpeed, Math.hypot(particle.vx, particle.vy));\n }\n\n const particleCount = state.particles.length || 1;\n return {\n tick: state.tick,\n particleCount: state.particles.length,\n averageTemperature: averageTemperature / particleCount,\n waxHeight: heightSum / particleCount,\n maximumSpeed,\n maximumDensity,\n };\n}\n",[],[59,128,199],"efea0db5-813a-4c4b-9b5e-662afae10362","browser","18484c56-8a98-11f1-acc0-1607ee4eb77e",244,["D",1785252127214],[213,214,215,216],[59,207],{"_35":241,"_13":242,"_38":243,"_40":208,"_42":43,"_44":244,"_46":47,"_48":245,"_17":66,"_51":52,"_53":246,"_55":56,"_57":-5,"_87":247,"_18":248},{"_35":233,"_13":234,"_38":235,"_40":208,"_42":43,"_44":236,"_46":47,"_48":237,"_17":73,"_51":52,"_53":238,"_55":56,"_57":-5,"_87":239,"_18":240},{"_35":225,"_13":226,"_38":227,"_40":208,"_42":43,"_44":228,"_46":47,"_48":229,"_17":73,"_51":52,"_53":230,"_55":56,"_57":-5,"_87":231,"_18":232},{"_35":217,"_13":218,"_38":219,"_40":208,"_42":43,"_44":220,"_46":47,"_48":221,"_17":73,"_51":52,"_53":222,"_55":56,"_57":-5,"_87":223,"_18":224},"12e287b6-ab33-4117-a800-3c6396eeaad4","renderer.js","d2c64be2-8b55-11f1-a328-1607ee4eb77e",281,["D",1785333614966],"import { CELL, HEIGHT, WIDTH } from \"./config.js\";\nimport { lampHalfWidth } from \"../simulation/geometry.js\";\n\nexport function createRenderer(canvas) {\n const context = canvas.getContext(\"2d\");\n\n function render(state) {\n context.fillStyle = \"#090d13\";\n context.fillRect(0, 0, canvas.width, canvas.height);\n\n drawGrid();\n drawLamp();\n drawParticles(state);\n }\n\n function drawGrid() {\n context.strokeStyle = \"#1d2733\";\n context.lineWidth = 1;\n for (let x = 0; x <= WIDTH; x++) {\n context.beginPath();\n context.moveTo(x * CELL, 0);\n context.lineTo(x * CELL, HEIGHT * CELL);\n context.stroke();\n }\n for (let y = 0; y <= HEIGHT; y++) {\n context.beginPath();\n context.moveTo(0, y * CELL);\n context.lineTo(WIDTH * CELL, y * CELL);\n context.stroke();\n }\n }\n\n function drawLamp() {\n const center = (WIDTH - 1) / 2;\n context.beginPath();\n\n for (let y = 1; y < HEIGHT - 1; y++) {\n const x = center - lampHalfWidth(y);\n if (y === 1) context.moveTo(x * CELL, y * CELL);\n else context.lineTo(x * CELL, y * CELL);\n }\n for (let y = HEIGHT - 2; y >= 1; y--) {\n const x = center + lampHalfWidth(y);\n context.lineTo(x * CELL, y * CELL);\n }\n\n context.closePath();\n context.fillStyle = \"rgba(35, 65, 90, 0.14)\";\n context.fill();\n context.strokeStyle = \"#526477\";\n context.lineWidth = 2;\n context.stroke();\n }\n\n function drawParticles(state) {\n for (const particle of state.particles) {\n const temperature = particle.temperature;\n const red = Math.round(160 + temperature * 90);\n const green = Math.round(55 + temperature * 45);\n const blue = Math.round(180 - temperature * 70);\n\n context.beginPath();\n context.arc(particle.x * CELL, particle.y * CELL, 5.4, 0, Math.PI * 2);\n context.fillStyle = `rgb(${red}, ${green}, ${blue})`;\n context.fill();\n }\n }\n\n return { render };\n}\n\nexport function renderDiagnostics(diagnostics) {\n document.getElementById(\"tickMetric\").textContent = diagnostics.tick;\n document.getElementById(\"particleMetric\").textContent = diagnostics.particleCount;\n document.getElementById(\"temperatureMetric\").textContent =\n diagnostics.averageTemperature.toFixed(2);\n document.getElementById(\"heightMetric\").textContent =\n Math.round(diagnostics.waxHeight * 100) + \"%\";\n document.getElementById(\"speedMetric\").textContent =\n diagnostics.maximumSpeed.toFixed(2);\n document.getElementById(\"densityMetric\").textContent =\n diagnostics.maximumDensity.toFixed(1);\n}\n",[],[59,207,218],"99efe816-cc1f-47eb-826a-14d16620ce76","grid.js","ff57144c-8a98-11f1-9ff2-1607ee4eb77e",256,["D",1785252514857],"export function createGrid(width, height, field) {\n function indexOf(x, y) {\n return y * width + x;\n }\n\n function at(x, y) {\n return field[indexOf(x, y)];\n }\n\n function set(x, y, value) {\n field[indexOf(x, y)] = Math.max(0, Math.min(1, value));\n }\n\n return { indexOf, at, set };\n}\n",[],[59,207,226],"57520181-98db-49c7-9d74-d9f904cff695","config.js","fb6a58ee-8a98-11f1-950d-1607ee4eb77e",255,["D",1785252508284],"export const WIDTH = 28;\nexport const HEIGHT = 18;\nexport const CELL = 24;\n",[],[59,207,234],"bd192a26-8178-4f27-8c52-93f6b3d5cfe8","app.js","83f9cfba-8a98-11f1-b875-1607ee4eb77e",285,["D",1785333739756],"import { createRenderer, renderDiagnostics } from \"./renderer.js\";\nimport { copySettings } from \"../simulation/settings.js\";\nimport { createSimulationState } from \"../simulation/state.js\";\nimport { stepLavaLamp } from \"../simulation/step.js\";\n\nconst canvas = document.getElementById(\"field\");\nconst renderer = createRenderer(canvas);\nconst settings = copySettings();\nlet state = createSimulationState(settings);\nlet running = false;\nlet initializingControls = true;\nlet accumulator = 0;\nlet previousTime = 0;\n\nfunction runOneFrame() {\n const diagnostics = stepLavaLamp(state, settings);\n renderer.render(state);\n renderDiagnostics(diagnostics);\n}\n\nfunction resetSimulation() {\n running = false;\n accumulator = 0;\n document.getElementById(\"play\").textContent = \"play\";\n state = createSimulationState(settings);\n runOneFrame();\n}\n\nfunction updateSetting(input) {\n settings[input.dataset.setting] = Number(input.value);\n const output = document.getElementById(input.dataset.output);\n output.textContent = formatValue(input.dataset.format, Number(input.value));\n\n if (!initializingControls && input.dataset.setting === \"particleCount\") {\n resetSimulation();\n }\n}\n\nfunction formatValue(format, value) {\n if (format === \"percent\") return Math.round(value * 100) + \"%\";\n if (format === \"integer\") return String(Math.round(value));\n return value.toFixed(2);\n}\n\nfunction animationLoop(time) {\n const elapsedSeconds = previousTime ? Math.min(0.1, (time - previousTime) / 1000) : 0;\n previousTime = time;\n\n if (running) {\n accumulator += elapsedSeconds * settings.playbackRate;\n while (accumulator >= 1) {\n runOneFrame();\n accumulator--;\n }\n }\n\n requestAnimationFrame(animationLoop);\n}\n\ndocument.querySelectorAll(\"[data-setting]\").forEach((input) => {\n input.addEventListener(\"input\", () => updateSetting(input));\n updateSetting(input);\n});\ninitializingControls = false;\n\ndocument.getElementById(\"step\").addEventListener(\"click\", runOneFrame);\ndocument.getElementById(\"reset\").addEventListener(\"click\", resetSimulation);\ndocument.getElementById(\"play\").addEventListener(\"click\", () => {\n running = !running;\n document.getElementById(\"play\").textContent = running ? \"pause\" : \"play\";\n});\n\nrunOneFrame();\nrequestAnimationFrame(animationLoop);\n",[],[59,207,242],"6fa4f715-b236-46ca-b183-2820945d7d51",["D",1784854669144],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Learn fluid simulation through a lava lamp.","imageUrl","userId","40e69d1a-3254-4858-920b-7b1449761575","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","54bae3d1-8223-41e5-b22d-81eb28a263c7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_302":298},"org",{"_11":12,"_296":-5,"_297":298,"_259":260,"_299":300,"_301":56},"branch",{"_17":45,"_13":16,"_35":43,"_288":249,"_289":-5,"_290":-5,"_291":-5,"_292":-5,"_293":-5,"_294":14,"_295":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2OaSpooJk6yZ5KFqyjtIVA4z3SH.jpeg","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":249,"_13":14,"_48":400,"_251":-5,"_252":56,"_253":254,"_255":254,"_256":257,"_258":-5,"_259":260,"_261":81,"_262":47,"_263":-5,"_264":-5,"_265":73,"_266":267,"_268":-5,"_269":-5,"_270":-5,"_271":-5,"_272":273,"_274":273,"_275":276,"_277":276,"_278":276,"_279":273,"_280":273,"_281":401,"_283":402,"_285":403,"_287":56},[337,356,357],"files",[337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357],"counts",{"_327":73,"_328":329,"_330":73,"_32":331,"_332":333},[323,324],{"_35":69,"_13":60,"_38":41,"_40":70,"_42":43,"_44":71,"_46":47,"_48":72,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_18":322},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[59,60],{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":65,"_17":66,"_51":52,"_53":67,"_55":56,"_57":-5,"_18":326},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":325},[59,60,37],[59,60,62],"pulls","branches",1,"forks",{"_334":73,"_336":73},"connections",{"_334":73,"_335":73},"count","unfilledCount","emptyCount",{"_35":99,"_13":59,"_38":70,"_40":-5,"_42":43,"_44":50,"_46":47,"_48":100,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":398,"_18":399},{"_35":206,"_13":207,"_38":208,"_40":70,"_42":43,"_44":209,"_46":47,"_48":210,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":396,"_18":397},{"_35":241,"_13":242,"_38":243,"_40":208,"_42":43,"_44":244,"_46":47,"_48":245,"_17":66,"_51":52,"_53":246,"_55":56,"_57":-5,"_87":394,"_18":395},{"_35":233,"_13":234,"_38":235,"_40":208,"_42":43,"_44":236,"_46":47,"_48":237,"_17":73,"_51":52,"_53":238,"_55":56,"_57":-5,"_87":392,"_18":393},{"_35":225,"_13":226,"_38":227,"_40":208,"_42":43,"_44":228,"_46":47,"_48":229,"_17":73,"_51":52,"_53":230,"_55":56,"_57":-5,"_87":390,"_18":391},{"_35":217,"_13":218,"_38":219,"_40":208,"_42":43,"_44":220,"_46":47,"_48":221,"_17":73,"_51":52,"_53":222,"_55":56,"_57":-5,"_87":388,"_18":389},{"_35":127,"_13":128,"_38":129,"_40":70,"_42":43,"_44":130,"_46":47,"_48":131,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":386,"_18":387},{"_35":198,"_13":199,"_38":200,"_40":129,"_42":43,"_44":201,"_46":47,"_48":202,"_17":73,"_51":52,"_53":203,"_55":56,"_57":-5,"_87":384,"_18":385},{"_35":190,"_13":191,"_38":192,"_40":129,"_42":43,"_44":193,"_46":47,"_48":194,"_17":73,"_51":52,"_53":195,"_55":56,"_57":-5,"_87":382,"_18":383},{"_35":182,"_13":183,"_38":184,"_40":129,"_42":43,"_44":185,"_46":47,"_48":186,"_17":73,"_51":52,"_53":187,"_55":56,"_57":-5,"_87":380,"_18":381},{"_35":174,"_13":175,"_38":176,"_40":129,"_42":43,"_44":177,"_46":47,"_48":178,"_17":73,"_51":52,"_53":179,"_55":56,"_57":-5,"_87":378,"_18":379},{"_35":166,"_13":167,"_38":168,"_40":129,"_42":43,"_44":169,"_46":47,"_48":170,"_17":73,"_51":52,"_53":171,"_55":56,"_57":-5,"_87":376,"_18":377},{"_35":158,"_13":159,"_38":160,"_40":129,"_42":43,"_44":161,"_46":47,"_48":162,"_17":73,"_51":52,"_53":163,"_55":56,"_57":-5,"_87":374,"_18":375},{"_35":150,"_13":151,"_38":152,"_40":129,"_42":43,"_44":153,"_46":47,"_48":154,"_17":73,"_51":52,"_53":155,"_55":56,"_57":-5,"_87":372,"_18":373},{"_35":142,"_13":143,"_38":144,"_40":129,"_42":43,"_44":145,"_46":47,"_48":146,"_17":73,"_51":52,"_53":147,"_55":56,"_57":-5,"_87":370,"_18":371},{"_35":69,"_13":60,"_38":41,"_40":70,"_42":43,"_44":71,"_46":47,"_48":116,"_17":73,"_51":74,"_53":-5,"_55":56,"_57":-5,"_87":368,"_18":369},{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":124,"_17":66,"_51":52,"_53":67,"_55":56,"_57":-5,"_87":366,"_18":367},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":121,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_87":364,"_18":365},{"_35":107,"_13":108,"_38":109,"_40":70,"_42":43,"_44":110,"_46":47,"_48":111,"_17":112,"_51":52,"_53":113,"_55":56,"_57":-5,"_87":362,"_18":363},{"_35":90,"_13":91,"_38":92,"_40":-5,"_42":43,"_44":93,"_46":47,"_48":94,"_17":95,"_51":24,"_53":96,"_55":56,"_57":-5,"_87":360,"_18":361},{"_35":79,"_13":80,"_38":81,"_40":-5,"_42":43,"_44":82,"_46":47,"_48":83,"_17":84,"_51":85,"_53":86,"_55":56,"_57":14,"_87":358,"_18":359},[],[80],[],[91],[],[59,108],[],[59,60,37],[],[59,60,62],[353,354],[59,60],[],[59,128,143],[],[59,128,151],[],[59,128,159],[],[59,128,167],[],[59,128,175],[],[59,128,183],[],[59,128,191],[],[59,128,199],[344,345,346,347,348,349,350,351],[59,128],[],[59,207,218],[],[59,207,226],[],[59,207,234],[],[59,207,242],[339,340,341,342],[59,207],[338,343,352,355],[59],["D",1784854669144],{"_11":12,"_302":298},{"_11":12,"_296":-5,"_297":298,"_259":260,"_299":300,"_301":56},{"_17":45,"_13":16,"_35":43,"_288":249,"_289":-5,"_290":-5,"_291":-5,"_292":-5,"_293":-5,"_294":14,"_295":12},"ctx",{"_281":-5,"_319":437,"_438":439,"_440":441,"_442":56,"_443":56,"_444":56,"_445":47,"_446":-5,"_447":-7,"_448":-7,"_449":73,"_450":56,"_451":56,"_452":-5,"_453":56,"_454":56,"_455":56,"_456":-5},"ENV",{"_408":409,"_410":411,"_412":16,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]