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",[],[67,102,119],"b99a0b6b-59b7-4f82-8ffb-9b85d7bec8a1","simulation","747a0682-8b55-11f1-8efb-1607ee4eb77e",272,["D",1785333456767],[134,135,136,137,138,139,140,141],[67,128],{"_35":198,"_13":199,"_38":200,"_40":129,"_41":42,"_43":201,"_45":46,"_47":202,"_17":71,"_50":97,"_52":203,"_54":55,"_56":-5,"_78":204,"_18":205},{"_35":190,"_13":191,"_38":192,"_40":129,"_41":42,"_43":193,"_45":46,"_47":194,"_17":71,"_50":97,"_52":195,"_54":55,"_56":-5,"_78":196,"_18":197},{"_35":182,"_13":183,"_38":184,"_40":129,"_41":42,"_43":185,"_45":46,"_47":186,"_17":71,"_50":97,"_52":187,"_54":55,"_56":-5,"_78":188,"_18":189},{"_35":174,"_13":175,"_38":176,"_40":129,"_41":42,"_43":177,"_45":46,"_47":178,"_17":71,"_50":97,"_52":179,"_54":55,"_56":-5,"_78":180,"_18":181},{"_35":166,"_13":167,"_38":168,"_40":129,"_41":42,"_43":169,"_45":46,"_47":170,"_17":71,"_50":97,"_52":171,"_54":55,"_56":-5,"_78":172,"_18":173},{"_35":158,"_13":159,"_38":160,"_40":129,"_41":42,"_43":161,"_45":46,"_47":162,"_17":71,"_50":97,"_52":163,"_54":55,"_56":-5,"_78":164,"_18":165},{"_35":150,"_13":151,"_38":152,"_40":129,"_41":42,"_43":153,"_45":46,"_47":154,"_17":71,"_50":97,"_52":155,"_54":55,"_56":-5,"_78":156,"_18":157},{"_35":142,"_13":143,"_38":144,"_40":129,"_41":42,"_43":145,"_45":46,"_47":146,"_17":71,"_50":97,"_52":147,"_54":55,"_56":-5,"_78":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",[],[67,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",[],[67,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",[],[67,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",[],[67,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",[],[67,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",[],[67,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",[],[67,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",[],[67,128,199],"efea0db5-813a-4c4b-9b5e-662afae10362","browser","18484c56-8a98-11f1-acc0-1607ee4eb77e",244,["D",1785252127214],[213,214,215,216],[67,207],{"_35":241,"_13":242,"_38":243,"_40":208,"_41":42,"_43":244,"_45":46,"_47":245,"_17":123,"_50":97,"_52":246,"_54":55,"_56":-5,"_78":247,"_18":248},{"_35":233,"_13":234,"_38":235,"_40":208,"_41":42,"_43":236,"_45":46,"_47":237,"_17":71,"_50":97,"_52":238,"_54":55,"_56":-5,"_78":239,"_18":240},{"_35":225,"_13":226,"_38":227,"_40":208,"_41":42,"_43":228,"_45":46,"_47":229,"_17":71,"_50":97,"_52":230,"_54":55,"_56":-5,"_78":231,"_18":232},{"_35":217,"_13":218,"_38":219,"_40":208,"_41":42,"_43":220,"_45":46,"_47":221,"_17":71,"_50":97,"_52":222,"_54":55,"_56":-5,"_78":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",[],[67,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",[],[67,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",[],[67,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",[],[67,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":55},"branch",{"_17":113,"_13":16,"_35":42,"_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,"_47":400,"_251":-5,"_252":55,"_253":254,"_255":254,"_256":257,"_258":-5,"_259":260,"_261":39,"_262":46,"_263":-5,"_264":-5,"_265":71,"_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":55},[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":71,"_328":329,"_330":71,"_31":331,"_332":333},[321,322,323],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_18":326},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_18":325},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_18":324},[37],[59],[67],"pulls","branches",1,"forks",{"_334":71,"_336":71},"connections",{"_334":71,"_335":71},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":84,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":398,"_18":399},{"_35":206,"_13":207,"_38":208,"_40":68,"_41":42,"_43":209,"_45":46,"_47":210,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":396,"_18":397},{"_35":241,"_13":242,"_38":243,"_40":208,"_41":42,"_43":244,"_45":46,"_47":245,"_17":123,"_50":97,"_52":246,"_54":55,"_56":-5,"_78":394,"_18":395},{"_35":233,"_13":234,"_38":235,"_40":208,"_41":42,"_43":236,"_45":46,"_47":237,"_17":71,"_50":97,"_52":238,"_54":55,"_56":-5,"_78":392,"_18":393},{"_35":225,"_13":226,"_38":227,"_40":208,"_41":42,"_43":228,"_45":46,"_47":229,"_17":71,"_50":97,"_52":230,"_54":55,"_56":-5,"_78":390,"_18":391},{"_35":217,"_13":218,"_38":219,"_40":208,"_41":42,"_43":220,"_45":46,"_47":221,"_17":71,"_50":97,"_52":222,"_54":55,"_56":-5,"_78":388,"_18":389},{"_35":127,"_13":128,"_38":129,"_40":68,"_41":42,"_43":130,"_45":46,"_47":131,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":386,"_18":387},{"_35":198,"_13":199,"_38":200,"_40":129,"_41":42,"_43":201,"_45":46,"_47":202,"_17":71,"_50":97,"_52":203,"_54":55,"_56":-5,"_78":384,"_18":385},{"_35":190,"_13":191,"_38":192,"_40":129,"_41":42,"_43":193,"_45":46,"_47":194,"_17":71,"_50":97,"_52":195,"_54":55,"_56":-5,"_78":382,"_18":383},{"_35":182,"_13":183,"_38":184,"_40":129,"_41":42,"_43":185,"_45":46,"_47":186,"_17":71,"_50":97,"_52":187,"_54":55,"_56":-5,"_78":380,"_18":381},{"_35":174,"_13":175,"_38":176,"_40":129,"_41":42,"_43":177,"_45":46,"_47":178,"_17":71,"_50":97,"_52":179,"_54":55,"_56":-5,"_78":378,"_18":379},{"_35":166,"_13":167,"_38":168,"_40":129,"_41":42,"_43":169,"_45":46,"_47":170,"_17":71,"_50":97,"_52":171,"_54":55,"_56":-5,"_78":376,"_18":377},{"_35":158,"_13":159,"_38":160,"_40":129,"_41":42,"_43":161,"_45":46,"_47":162,"_17":71,"_50":97,"_52":163,"_54":55,"_56":-5,"_78":374,"_18":375},{"_35":150,"_13":151,"_38":152,"_40":129,"_41":42,"_43":153,"_45":46,"_47":154,"_17":71,"_50":97,"_52":155,"_54":55,"_56":-5,"_78":372,"_18":373},{"_35":142,"_13":143,"_38":144,"_40":129,"_41":42,"_43":145,"_45":46,"_47":146,"_17":71,"_50":97,"_52":147,"_54":55,"_56":-5,"_78":370,"_18":371},{"_35":101,"_13":102,"_38":103,"_40":68,"_41":42,"_43":104,"_45":46,"_47":105,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":368,"_18":369},{"_35":118,"_13":119,"_38":120,"_40":103,"_41":42,"_43":121,"_45":46,"_47":122,"_17":123,"_50":97,"_52":124,"_54":55,"_56":-5,"_78":366,"_18":367},{"_35":110,"_13":111,"_38":112,"_40":103,"_41":42,"_43":113,"_45":46,"_47":114,"_17":69,"_50":97,"_52":115,"_54":55,"_56":-5,"_78":364,"_18":365},{"_35":91,"_13":92,"_38":93,"_40":68,"_41":42,"_43":94,"_45":46,"_47":95,"_17":96,"_50":97,"_52":98,"_54":55,"_56":-5,"_78":362,"_18":363},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":81,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_78":360,"_18":361},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":51,"_52":53,"_54":55,"_56":14,"_78":358,"_18":359},[],[37],[],[59],[],[67,92],[],[67,102,111],[],[67,102,119],[353,354],[67,102],[],[67,128,143],[],[67,128,151],[],[67,128,159],[],[67,128,167],[],[67,128,175],[],[67,128,183],[],[67,128,191],[],[67,128,199],[344,345,346,347,348,349,350,351],[67,128],[],[67,207,218],[],[67,207,226],[],[67,207,234],[],[67,207,242],[339,340,341,342],[67,207],[338,343,352,355],[67],["D",1784854669144],{"_11":12,"_302":298},{"_11":12,"_296":-5,"_297":298,"_259":260,"_299":300,"_301":55},{"_17":113,"_13":16,"_35":42,"_288":249,"_289":-5,"_290":-5,"_291":-5,"_292":-5,"_293":-5,"_294":14,"_295":12},"ctx",{"_281":-5,"_318":437,"_438":439,"_440":441,"_442":55,"_443":55,"_444":55,"_445":46,"_446":-5,"_447":-7,"_448":-7,"_449":71,"_450":55,"_451":55,"_452":-5,"_453":55,"_454":55,"_455":55,"_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","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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"]

Code