\\n

fluid simulation fundamentals

laval

\\n

Before simulating a lava lamp, learn how a computer represents a fluid. A sustained thermal flow needs an energy source and an energy sink. The heater adds temperature while ambient cooling continuously removes it.

\\n

\\n\\n

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

\\n\\n

\\n

Click a cell to inspect its coordinates.

\\n

—selected cell

\\n

—array index

\\n

—cell value

\\n

0update steps

\\n

\\n\\n

\\n

section 1

\\n

A fluid needs an address

\\n

We divide a rectangular region into cells. Each cell has an x and y coordinate, just like a pixel.

\\n

neighbor blend per step25%

Each cell closes this percentage of the difference between itself and its neighbors.

\\n

distance per step0.75 cells

How far backward each cell looks along its velocity vector.

\\n

pressure iterations60

More iterations approximate the pressure solution more closely.

mean |divergence|: —

\\n

wall leakage

outward-pointing wall cells: —

\\n

buoyancy strength0.50

How much upward velocity one step adds in hotter cells.

\\n

heater per step0.12cooling per step2%

The heater adds temperature at the bottom; cooling removes this fraction from every cell.

\\n

temperature diffusion15%wall cooling8%

Conduction exchanges heat with neighbors; wall cooling removes heat only at the glass boundary.

\\n

neutral temperature0.50density response1.20

Wax above neutral gets an upward push; wax below neutral gets a downward push.

\\n

melting temperature0.55transition width0.10solid drag85%

Cold wax resists velocity; hot wax becomes mobile across a smooth melting range.

\\n

interface sharpening50%

Pushes mixed wax fractions toward carrier (0) or wax (1) after advection.

\\n

latent heat coupling70%

How strongly excess heat near the melt point changes melt progress instead of temperature.

\\n

surface tension0.35

Scales the curvature force applied only near the wax–carrier interface.

\\n

carrier viscosity5%hot-wax viscosity10%cold-wax viscosity45%

Each value is the fraction of the difference toward neighboring velocity closed per step.

\\n

time per frame1.00substeps4

max travel per substep: —

\\n

lamp presetsteps per second6

wax —avg temp —melt —max speed —

\\n

heater unevenness60%

Creates deterministic hot and cool patches across the bottom heater.

\\n

neck sensitivity55%pinch strength45%

detected neck cells: 0 · wax error: 0.000

Cyan outlines show narrow bridges. Removed wax is returned to nearby thicker wax.

\\n

mass correction100%

raw drift 0.000after correction 0.000

Measures wax before the substep and returns numerical gain or loss across mixed interface cells.

\\n

energy ledger this substep

heater +0.000cooling 0.000stored latent 0.000numerical drift 0.000

Thermal energy is temperature plus energy stored in melt progress. Heating and cooling are intentional transfers; drift is not.

\\n

closed material inventory

total wax 0.0last moved 0.00

Clicking an empty cell withdraws the same wax amount from existing cells, preferring the bottom reservoir.

\\n

wax motion

height 0%rising 0%falling 0%

The blue trace is the wax center of mass. Repeated peaks and valleys indicate a circulating cycle.

\\n

wax connection threshold35%

blobs 0largest 0%split events 0merge events 0

Colored outlines identify cells belonging to the same four-neighbor connected region.

\\n

persistent identity matching

next identity 1matched 0

A region keeps its outline color when most cells overlap a region from the previous frame.

\\n

identity search radius1 cell

When direct overlap fails, search this far around the new region for its previous identity.

\\n

cycle quality

height range 0%active blobs 0

A useful lamp has a changing center height and more than one connected wax region without becoming unstable.

\\n

cell width0.5 cmseconds per frame0.10 s

reported maximum speed: 0.0 cm/s

\\n

complete model

blobs 0cycle range 0%rising 0%falling 0%

This runs the closed, mass-corrected, heated, cooled, two-phase timestep with pinch-off and persistent blob tracking.

\\n

wax particle mass220base concentration75%particle cohesion70%glass cooling10%

particles 0 · blobs 0

\\n

target neighbor density3.0volume pressure90%

maximum particle density: 0.0

\\n

const field = createScalarField(28, 18);\\n\\nfield.at(x, y);

\\n

What to noticeA two-dimensional cell can live in a one-dimensional array.

\\n

Deliberately not includedThere is no motion, pressure, viscosity, or fluid physics yet.

\\n

\\n\\n

\\n

The path from this grid to a lava lamp

\\n

checkpoint 01Grid + scalar field

\\n

02Velocity vectors

\\n

03Advection

\\n

04Diffusion

\\n

05Divergence

\\n

06Pressure projection

\\n

07Boundaries

\\n

08Heat + buoyancy

\\n

09Heat transport gap

\\n

10Coupled thermal step

\\n

11Heating + cooling

\\n

12Conduction + wall cooling

\\n

13Wax material field

\\n

14Temperature-driven density

\\n

15Phase change + solid drag

\\n

16Wax interface

\\n

17Latent heat

\\n

18Cohesion + surface tension

\\n

19Phase-dependent viscosity

\\n

20Stable complete timestep

\\n

21Continuous calibrated lamp

\\n

22Uneven heating + bottom pool

\\n

23Pinch-off + recombination

\\n

24Wax conservation

\\n

25Energy budget

\\n

26Closed vessel

\\n

27Cycle diagnostics

\\n

28Blob components

\\n

29Persistent identity

\\n

30Motion matching

\\n

31Cycle calibration

\\n

32Physical units

\\n

33Final simulator

\\n

34Shaped lamp vessel

\\n

35Particle volume pressure

\\n

Current claim: this demonstrates a grid, a scalar field, and neighbor-based smoothing. It is not yet a fluid simulation.

\\n

\\n\\n\";\n",[],[148,202,204],"f1340c10-1007-45af-9382-df0fe0c3c541",230,["D",1785251315458],[171,172],[148,202],"c64b9493-5588-4f6b-9dcc-553cd6e29e41","lessons.js","801014a4-8a98-11f1-add9-1607ee4eb77e","18484c56-8a98-11f1-acc0-1607ee4eb77e",248,["D",1785252301329],"export const copy={\n grid:{number:\"section 1\",title:\"A fluid needs an address\",text:\"We divide a rectangular region into cells. Each cell has an x and y coordinate, just like a pixel.\",instruction:\"Click a cell to inspect its coordinates.\",code:\"const field = createScalarField(28, 18);\\n\\nfield.at(x, y);\",notice:\"A two-dimensional cell can live in a one-dimensional array.\",notYet:\"There is no stored fluid quantity and no motion yet.\"},\n scalar:{number:\"section 2\",title:\"One number in every cell\",text:\"A scalar field stores one value at each location. Here the value represents an abstract amount of blue dye.\",instruction:\"Click and drag to paint dye into cells.\",code:\"field.set(x, y, dyeAmount);\\n\\nrenderScalarField(field);\",notice:\"Color is only a picture of the numbers. The Float32Array is the model.\",notYet:\"The dye does not move or spread by itself.\"},\n diffusion:{number:\"section 3\",title:\"State changes in steps\",text:\"A simulation repeatedly derives a new field from the current field. The slider controls how far each cell moves toward its neighbor average during the next step.\",instruction:\"For a fair comparison: choose a percentage, press example, then press step.\",code:\"while (running) {\\n field = diffuseScalarField(field);\\n renderScalarField(field);\\n}\",notice:\"The slider affects future steps; it cannot recalculate steps already taken. Compare 5% and 100% from the same example state.\",notYet:\"This is diffusion only—not velocity, advection, pressure, or a complete fluid solver.\"},\n velocity:{number:\"checkpoint 2\",title:\"Two numbers in every cell\",text:\"A velocity field stores a horizontal component vx and a vertical component vy at each location. An arrow visualizes that pair.\",instruction:\"Drag from one cell toward another to assign a direction, or press example.\",code:\"velocity.set(x, y, { vx, vy });\\n\\nrenderVectorField(velocity);\",notice:\"Arrow direction shows the vector direction. Arrow length represents its magnitude.\",notYet:\"The arrows describe possible motion, but nothing follows them yet. Transport comes next with advection.\"},\n advection:{number:\"checkpoint 3\",title:\"Use velocity to transport dye\",text:\"Advection connects the fields. For every destination cell, we trace backward along its velocity and sample the dye value found there.\",instruction:\"Press example, then advance the dye one step at a time.\",code:\"dye = advectScalarField(\\n dye,\\n velocity\\n);\\n\\nrenderScalarField(dye);\",notice:\"The velocity field is not the dye. It tells the update where each new dye value should come from.\",notYet:\"This uses semi-Lagrangian sampling. It is stable and visual, but it can blur dye and does not conserve its total amount exactly.\"},\n transportDiffusion:{number:\"checkpoint 4\",title:\"Transport, then spread\",text:\"A fluid step can apply multiple updates in sequence. First advection transports the dye. Then diffusion exchanges dye with neighboring cells.\",instruction:\"Press example, choose both strengths, and advance one combined step at a time.\",code:\"dye = advect(dye, velocity);\\ndye = diffuse(dye, diffusion);\\n\\nrenderScalarField(dye);\",notice:\"Advection changes where the pattern goes. Diffusion changes how sharp or spread-out the pattern is.\",notYet:\"This diffuses the dye quantity, not the velocity field. We also have not enforced incompressibility or solved pressure.\"},\n divergence:{number:\"checkpoint 5\",title:\"Where flow expands or compresses\",text:\"Divergence measures the net flow leaving each cell. Positive values behave like sources; negative values behave like sinks; values near zero have balanced inflow and outflow.\",instruction:\"Press example. Red cells are sources, blue cells are sinks. Click a cell to inspect its divergence.\",code:\"divergence = measureDivergence(velocity);\\n\\n// target for incompressible flow\\ndivergence ≈ 0;\",notice:\"A velocity field can look smooth while still creating or destroying volume. Divergence gives us a number that exposes that problem.\",notYet:\"We only measure the error here. The next lesson will solve pressure and subtract its gradient to reduce divergence.\"},\n projection:{number:\"checkpoint 6\",title:\"Use pressure to correct velocity\",text:\"Projection converts divergence into a pressure field, then subtracts the pressure gradient from velocity. The correction pushes away from compression and resists expansion.\",instruction:\"Press example, note the red and blue error, then press step to project the velocity.\",code:\"divergence = measureDivergence(velocity);\\npressure = solvePressure(divergence);\\nvelocity -= gradient(pressure);\",notice:\"Pressure is not painted manually. It is solved from the divergence error, used to correct velocity, and recalculated on the next step.\",notYet:\"The iterative pressure solve is approximate, and wall boundary conditions are still simplified. The next lesson will make boundaries explicit.\"},\n boundaries:{number:\"checkpoint 7\",title:\"Fluid cannot cross a solid wall\",text:\"A wall removes the velocity component pointing through it. Motion parallel to the wall can remain, so the fluid slides along the surface instead of escaping.\",instruction:\"Press example. Red wall cells leak outward; press step to enforce no-through boundaries.\",code:\"velocity = enforceNoThroughWalls(velocity);\\n\\nnormalVelocityAtWall = 0;\",notice:\"At left and right walls we remove horizontal velocity. At top and bottom walls we remove vertical velocity.\",notYet:\"This is a free-slip wall: tangential motion remains. We have not yet implemented no-slip friction, obstacles, or coupled projection at the boundary.\"},\n temperature:{number:\"checkpoint 8\",title:\"Heat creates upward acceleration\",text:\"Temperature is another scalar field. Hotter fluid is less dense, so buoyancy adds upward velocity where temperature is high.\",instruction:\"Press example, choose a buoyancy strength, then press step. Watch the arrows grow upward inside the hot region.\",code:\"velocity = applyBuoyancy(\\n velocity,\\n temperature\\n);\",notice:\"Temperature does not move anything directly. It changes velocity; velocity can move dye later through advection.\",notYet:\"Temperature does not diffuse or advect yet. We also omit ambient cooling, gravity calibration, density, and wax phase changes.\"},\n thermalFlow:{number:\"checkpoint 9\",title:\"The local-force gap\",text:\"Buoyancy changes velocity only where heat already exists. Backward advection in neighboring stationary cells cannot discover that heat, so a bottom row can remain pinned.\",instruction:\"Paint the bottom row and step. This deliberately preserves the gap you noticed.\",code:\"velocity = applyBuoyancy(velocity, temperature);\\ntemperature = advect(temperature, velocity);\",notice:\"Composing two correct operations is not enough if the velocity field has not been made into a coherent fluid-wide flow.\",notYet:\"This version skips pressure projection and boundary enforcement between force and transport. The next module inserts them.\"},\n coupledThermal:{number:\"checkpoint 10\",title:\"Spread the push before transport\",text:\"Pressure projection turns the local buoyant push into a divergence-reduced velocity field. Wall enforcement keeps that corrected flow inside before it transports temperature.\",instruction:\"Paint a hot bottom row or press example, then step. Compare its motion with Module 11.\",code:\"velocity = applyBuoyancy(velocity, temperature);\\nvelocity = project(velocity);\\nvelocity = enforceWalls(velocity);\\ntemperature = advect(temperature, velocity);\",notice:\"Projection does not move heat. It reshapes velocity so neighboring cells participate; advection then moves the temperature.\",notYet:\"The heater is not continuous and temperature does not diffuse or cool. Those processes come next.\"},\n heatedFlow:{number:\"checkpoint 11\",title:\"Temperature needs a source and a sink\",text:\"A real lamp keeps receiving energy from its bulb while losing energy to its surroundings. Each step adds heat near the bottom and removes a percentage everywhere.\",instruction:\"Press clear, then step repeatedly. Adjust heater and cooling to see whether heat accumulates or fades.\",code:\"temperature = cool(temperature);\\ntemperature = addBottomHeat(temperature);\\nvelocity = applyBuoyancyAndProject(velocity, temperature);\\ntemperature = advect(temperature, velocity);\",notice:\"The temperature field is no longer just initial data. It is driven over time by competing input and loss rates.\",notYet:\"Cooling is uniform rather than stronger at the glass, and heat does not diffuse by conduction. We still have only one material.\"},\n conductiveFlow:{number:\"checkpoint 12\",title:\"Heat also travels without bulk motion\",text:\"Conduction exchanges temperature between neighboring cells. The glass boundary then removes extra heat only from edge cells, creating a spatially meaningful heat sink.\",instruction:\"Press clear and step repeatedly. Compare low and high conduction, then change wall cooling.\",code:\"temperature = addBottomHeat(temperature);\\ntemperature = diffuseTemperature(temperature);\\ntemperature = coolAtWalls(temperature);\\nvelocity = solveFlow(velocity, temperature);\\ntemperature = advect(temperature, velocity);\",notice:\"Advection carries heat with moving fluid. Conduction spreads heat between neighbors even when the local velocity is zero.\",notYet:\"The walls all use one cooling rate and the heater has an abstract strength. We still have one continuous material rather than wax in a carrier liquid.\"},\n waxField:{number:\"checkpoint 13\",title:\"Material identity is another scalar field\",text:\"Wax fraction stores how much of each cell is wax: 0 is carrier liquid, 1 is wax, and values between represent a numerically mixed cell.\",instruction:\"Press example or paint wax, then step. Pink shows wax while the underlying warmth still affects the shared velocity.\",code:\"wax = advect(wax, velocity);\\ntemperature = advect(temperature, velocity);\",notice:\"Wax fraction and temperature coexist at every cell. Advection can transport both fields through the same velocity without confusing what they mean.\",notYet:\"Wax does not yet have different density or viscosity, and it does not melt or solidify. This is material tracking, not phase-change physics.\"},\n densityWax:{number:\"checkpoint 14\",title:\"Wax buoyancy depends on relative density\",text:\"Temperature changes wax density relative to the carrier. Wax hotter than neutral gets an upward force; colder wax gets a downward force.\",instruction:\"Press example: the left blob is hot and low, the right blob is cold and high. Step and compare their directions.\",code:\"densityError = wax * (neutralTemperature - temperature);\\nvelocity.y += densityError * response;\",notice:\"The force combines temperature and material identity. Equally hot carrier liquid does not receive this wax-specific density force.\",notYet:\"Values are normalized rather than kg/m³, and the relationship is linear. Wax still has no temperature-dependent viscosity or solid state.\"},\n phaseWax:{number:\"checkpoint 15\",title:\"Temperature changes how freely wax moves\",text:\"Wax identity remains constant, but a smooth phase fraction is derived from temperature. Cold wax is mostly solid and damps local velocity; hot wax is mostly liquid and follows the flow.\",instruction:\"Press example, then step. Watch the initially cold wax resist motion until heating moves it through the melting range.\",code:\"liquid = smoothMelt(temperature, meltPoint, width);\\nvelocity *= 1 - wax * (1 - liquid) * solidDrag;\",notice:\"Material identity and phase state are different: wax remains wax while its liquid fraction changes continuously from 0 to 1.\",notYet:\"Solid drag is a teaching approximation, not a full viscosity or viscoelastic stress solve. Latent heat and surface tension are still absent.\"},\n interfaceWax:{number:\"checkpoint 16\",title:\"A wax boundary is made of fractional cells\",text:\"Bilinear advection creates cells containing partial wax. The renderer now respects that fraction, and an optional sharpening pass nudges mixed values toward 0 or 1.\",instruction:\"Press example and step. Compare 0% and 100% sharpening, and inspect the wax value at the edge.\",code:\"wax = advect(wax, velocity);\\nwax = sharpenInterface(wax, strength);\",notice:\"Faint edge cells are numerical mixtures, not fully solid wax. Wax fraction must affect both the simulation and its rendering.\",notYet:\"This smoothstep sharpening is not mass-conserving and is not a full VOF, level-set, or surface-tension method.\"},\n latentWax:{number:\"checkpoint 17\",title:\"Melting consumes energy\",text:\"Wax now stores melt progress separately from temperature. Near the melting point, added energy advances the phase instead of immediately making the wax hotter.\",instruction:\"Press example, select a wax cell, and step. Watch temperature linger near the melt point while melt progress rises.\",code:\"energy = exchangeLatentHeat(temperature, meltProgress);\\n// temperature plateaus while phase changes\",notice:\"A phase transition can store energy without a matching temperature increase. Solidifying releases that stored energy back into temperature.\",notYet:\"The latent capacity is normalized and approximate; we do not yet use joules, specific heat, or a fully conservative enthalpy formulation.\"},\n surfaceWax:{number:\"checkpoint 18\",title:\"The wax boundary creates a force\",text:\"A gradient estimates the interface normal. Changes in that normal estimate curvature. Surface tension applies a force proportional to curvature near the wax boundary.\",instruction:\"Press example and step. Compare surface tension at 0 and 1; cyan cells mark the mixed interface.\",code:\"normal = normalize(gradient(wax));\\ncurvature = -divergence(normal);\\nforce = surfaceTension * curvature * gradient(wax);\",notice:\"Surface tension acts at the interface, not throughout the wax. It resists highly curved, ragged boundaries and encourages coherent blobs.\",notYet:\"This coarse continuum-surface-force approximation can create numerical currents and is not quantitatively calibrated.\"},\n viscosityWax:{number:\"checkpoint 19\",title:\"Viscosity diffuses momentum\",text:\"Each cell moves its velocity toward the average of neighboring velocities. The blend strength depends on whether the cell is carrier, hot liquid wax, or cold wax.\",instruction:\"Press example and step. Compare low and high cold-wax viscosity, then inspect viscosity at hot and cold wax cells.\",code:\"viscosity = mixByMaterialAndPhase(carrier, hotWax, coldWax);\\nvelocity = diffuseVelocity(velocity, viscosity);\",notice:\"Diffusing dye spreads a scalar quantity. Viscosity uses similar neighbor exchange on velocity, smoothing differences in momentum.\",notYet:\"These are normalized per-step blend rates, not Pa·s. Variable-viscosity diffusion is approximate and solid drag remains a separate teaching force.\"},\n stableLamp:{number:\"checkpoint 20\",title:\"One frame can contain several smaller solves\",text:\"The complete physics order is fixed. A frame time is divided by the selected substep count, and rate-like updates are scaled by that smaller duration.\",instruction:\"Press example. Compare one substep with eight at the same time per frame, and watch maximum travel per substep.\",code:\"for (const dt of subdivide(frameTime)) {\\n addHeatAndCool(dt);\\n updatePhaseAndForces(dt);\\n diffuseAndProjectVelocity(dt);\\n enforceWalls();\\n advectFields(dt);\\n}\",notice:\"Substeps do not add new physics. They reduce how far information travels before fields are recomputed, improving numerical stability.\",notYet:\"This still uses normalized units and explicit approximations. The final lesson adds continuous time, playback controls, and lamp-oriented presets.\"},\n simulator:{number:\"checkpoint 21\",title:\"The complete lamp runs continuously\",text:\"A fixed-rate animation loop repeatedly executes the stable timestep. Presets choose coherent groups of parameters rather than changing one coefficient in isolation.\",instruction:\"Choose a preset, press example, then play. Pause at any time to inspect a cell or advance one frame manually.\",code:\"while (playing) {\\n accumulator += elapsedTime;\\n while (accumulator >= frameInterval)\\n stepCompleteLamp();\\n}\",notice:\"The simulator runtime does not add physics. It schedules the validated timestep repeatedly and exposes diagnostics that reveal drift or instability.\",notYet:\"Parameters remain normalized and visually calibrated. This is a complete educational browser simulator, not a quantitatively validated industrial multiphase CFD model.\"},\n unevenHeating:{number:\"checkpoint 22\",title:\"Perfect symmetry prevents separate blobs\",text:\"A broad wax pool now rests above a heater whose strength varies across space and slowly over time. Small thermal differences seed separate buoyant regions.\",instruction:\"Press example, compare unevenness at 0% and 100%, then play. Watch for localized hot spots instead of uniform lifting.\",code:\"localHeat = heater * (1 + spatialPerturbation);\\ntemperature.bottom += localHeat;\",notice:\"The perturbation does not create motion directly. It creates temperature differences that density and buoyancy amplify into different rising regions.\",notYet:\"Pinch-off and merging still depend on the coarse interface method. The next step focuses on necking, separation, and recombination.\"},\n pinchOff:{number:\"checkpoint 23\",title:\"Thin wax bridges can become separate blobs\",text:\"The coarse grid cannot resolve a neck thinner than one cell, so this lesson adds an explicit topology rule: detect a strained, partially filled bridge, remove wax from its neck, and return that wax to its thicker neighbors.\",instruction:\"Press example, then play. Cyan cells are neck candidates. Compare pinch strength at 0% and 100%, and watch separated blobs merge naturally when advection brings their interfaces together.\",code:\"neck = detectThinBridge(wax, velocity);\\nremoved = pinch(neck);\\nredistributeConservatively(removed);\",notice:\"Pinch-off is a change in connectivity. The algorithm severs only narrow, strained bridges and conserves the wax it moves. Recombination needs no opposite rule: overlapping interfaces already become one connected field.\",notYet:\"This is a transparent teaching approximation, not a resolved Rayleigh–Plateau instability. A finer adaptive grid or particle/interface method would produce breakup from the governing forces themselves.\"},\n conservation:{number:\"checkpoint 24\",title:\"Wax may move, but its total amount should not change\",text:\"Advection and interface sharpening operate cell by cell, so rounding and nonlinear sharpening can create or destroy wax numerically. This lesson records total wax before each substep and audits it afterward.\",instruction:\"Press example and play. Set mass correction to 0% to expose raw drift, then 100% and compare the two diagnostics.\",code:\"targetMass = sum(waxBefore);\\nrunPhysics();\\nerror = targetMass - sum(waxAfter);\\nredistribute(error, interfaceCells);\",notice:\"Conservation is a constraint on the whole field, not a property of one cell. Individual cell values may change while their sum remains constant.\",notYet:\"The correction preserves normalized wax volume, not physical mass derived from density and cell volume. Energy and momentum also deserve separate conservation audits.\"},\n energyBudget:{number:\"checkpoint 25\",title:\"Heat has sources, sinks, and storage\",text:\"Unlike wax volume, thermal energy is not expected to remain constant. The heater adds it, ambient and wall cooling remove it, and melting transfers it between temperature and latent storage.\",instruction:\"Press example and play. Change heater and cooling strength, then watch which ledger entries respond. Stored latent energy can rise even while temperature pauses.\",code:\"energy = sum(temperature + meltProgress);\\nchange = heaterInput + coolingLoss + numericalDrift;\",notice:\"A conservation law is an accounting identity: system change equals energy crossing the boundary plus numerical error. Constant energy is expected only in a closed system.\",notYet:\"The ledger uses normalized energy units and omits kinetic and gravitational potential energy. The next refinement would audit the complete mechanical-plus-thermal budget.\"},\n closedVessel:{number:\"checkpoint 26\",title:\"A closed lamp has a fixed material inventory\",text:\"Previously, painting set a cell to wax without removing wax anywhere else. Conservation then faithfully preserved that newly enlarged total. In this lesson, painting relocates wax from the existing field instead.\",instruction:\"Press example. Note the total wax, then click or drag through empty cells. Wax leaves other locations—starting with the bottom reservoir—as the selected cells fill.\",code:\"amount = withdraw(waxInventory);\\ntarget.wax += amount;\\n// carrier fraction is always 1 - wax fraction\",notice:\"Every cell is already full: wax fraction plus carrier-liquid fraction equals one. Adding wax to a cell means displacing carrier there and taking wax from somewhere else in the closed lamp.\",notYet:\"The relocation gesture is an educational editing constraint, not fluid motion. During play, advection and pressure remain responsible for physical transport.\"},\n cycleDiagnostics:{number:\"checkpoint 27\",title:\"A cycle is a pattern measured over time\",text:\"One frame cannot tell us whether wax is circulating. We track the wax-weighted center height and the fractions currently moving upward or downward, then retain a short history.\",instruction:\"Press example and play. Look for the height trace to rise and fall repeatedly. A flat trace means the lamp has approached a steady arrangement, even if local cells still move.\",code:\"height = weightedCenter(wax);\\nrising = sum(wax where velocity.y < 0);\\nfalling = sum(wax where velocity.y > 0);\",notice:\"Oscillation is a property of a sequence of states, not one state. Center of mass compresses the whole wax field into one useful—but incomplete—signal.\",notYet:\"The trace does not identify individual blobs. Object tracking would be needed to measure each blob’s lifetime, speed, split, and merge events.\"},\n particleVolume:{number:\"checkpoint 35\",title:\"Wax particles need pressure as well as cohesion\",text:\"A smoothing kernel estimates crowding. Density above the target creates outward pressure, preventing many particles from occupying one point.\",instruction:\"Press example and play. Raise volume pressure until wax spans several cells, then tune cohesion to keep that finite volume connected.\",code:\"density = kernelSum(neighbors);\\npressure = max(0, density - restDensity);\",notice:\"Pressure preserves particle volume; cohesion shapes it. Bilinear transfer couples each particle to four grid cells.\",notYet:\"This is an SPH-style teaching approximation, not an iterative PBF solve.\"},\n shapedLamp:{number:\"checkpoint 34\",title:\"The vessel shape completes the circulation path\",text:\"Wax is a configurable fixed particle mass moving through the projected carrier grid. Uneven heating creates internal density differences, while hot particles weaken their cohesion enough for a large cluster to neck and separate.\",instruction:\"Press example and play. Compare low and high base concentration. Watch fallen wax gather centrally, reheat locally, and launch again.\",code:\"inside = lampShape(cell);\\nheat = focusedBaseHeater(x);\\nenforceCurvedWalls(velocity);\",notice:\"More particles create a deformable wax body rather than a tiny point cluster. Cold particles cohere strongly at the base; unevenly heated particles rise at different rates and can pull the body apart.\",notYet:\"The particle-to-grid transfer is deliberately simple and the rendered surface is an overlap visualization rather than a calibrated SPH kernel.\"},\n finalLamp:{number:\"checkpoint 33\",title:\"The complete educational lava lamp\",text:\"The final mode runs one authoritative timestep: heat, cooling, phase exchange, buoyancy, surface force, viscosity, pressure projection, walls, transport, pinch-off, and conservation.\",instruction:\"Choose a preset, press example, then play. Use the compact diagnostics to judge whether wax is forming blobs and completing a rise-and-fall cycle.\",code:\"while (playing) stepLavaLamp();\",notice:\"The final picture is the consequence of interacting fields and constraints, not a scripted blob animation.\",notYet:\"This remains a coarse normalized teaching model, not a quantitatively validated industrial multiphase CFD solver.\"},\n physicalUnits:{number:\"checkpoint 32\",title:\"Normalized values need a scale to become units\",text:\"A velocity of one means one cell per simulation frame. Choose a cell width and frame duration to interpret that same value as centimeters per second.\",instruction:\"Play, then change cell width and seconds per frame. The motion is unchanged; only its physical interpretation changes.\",code:\"speedCmPerSecond = velocityCellsPerFrame * cellWidthCm / secondsPerFrame;\",notice:\"Units do not appear automatically. A nondimensional simulation becomes physical only after selecting reference scales.\",notYet:\"The coefficients are visually calibrated and cannot yet be claimed as measured wax viscosity, density, or surface tension.\"},\n calibration:{number:\"checkpoint 31\",title:\"A lamp is calibrated as a system\",text:\"Heating, cooling, viscosity, density response, and surface tension must produce a bounded repeating cycle together. No single best slider value exists in isolation.\",instruction:\"Compare the balanced, slow, and active presets. Watch height range and blob count instead of judging only instantaneous speed.\",code:\"preset = calibrateTogether({heat,cooling,viscosity,density,surface});\",notice:\"Calibration chooses a useful regime of behavior; it does not add new governing physics.\",notYet:\"These presets are visual targets rather than fits to measurements from a specific manufactured lamp.\"},\n motionMatch:{number:\"checkpoint 30\",title:\"Identity matching needs motion tolerance\",text:\"A fast blob may move into entirely new cells between frames. When direct overlap fails, the tracker searches nearby previous cells before declaring a new identity.\",instruction:\"Play and compare a search radius of zero with one or two cells. Larger radii preserve identity through faster motion but can confuse nearby blobs.\",code:\"match = overlap || nearbyPreviousIdentity(searchRadius);\",notice:\"Tracking is an inference problem layered over the simulation. Greater tolerance reduces lost identities but increases ambiguous matches.\",notYet:\"The matcher expands spatially rather than predicting a velocity-directed future centroid.\"},\n blobIdentity:{number:\"checkpoint 29\",title:\"Identity comes from overlap across frames\",text:\"Each connected region compares its cells with the previous frame. The strongest overlap inherits the old identity; unmatched regions receive a new one.\",instruction:\"Press example and play. Outline colors now persist as blobs travel. Splits share a parent identity and merges overlap multiple previous identities.\",code:\"identity = largestOverlap(currentBlob, previousBlobs);\\nif (!identity) identity = nextId++;\",notice:\"Connectivity answers what is one blob now. Temporal matching answers whether it is the same blob as before.\",notYet:\"Fast motion can defeat pure overlap matching. A production tracker would also compare centroid, volume, and velocity.\"},\n blobTracking:{number:\"checkpoint 28\",title:\"A blob is a connected region, not a special particle\",text:\"We threshold the wax fraction, then flood-fill neighboring wax cells. Every connected component receives a label, size, and colored outline.\",instruction:\"Press example and play. Change the connection threshold and watch weak fractional bridges either join regions or separate them. Split and merge counts respond when the component count changes.\",code:\"mask = wax > threshold;\\nblobs = connectedComponents(mask, fourNeighbors);\",notice:\"Blob identity is derived from the wax field. The simulation never stores a blob object; connected shapes emerge from neighboring cell values.\",notYet:\"A changing component count is only an apparent split or merge. Robust event tracking must match component overlap across frames so threshold flicker is not mistaken for topology change.\"}\n };\n\n",[],[148,225,217],"browser","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",[],[148,225,227],"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",[],[148,225,235],"f54bf197-8440-41a7-88f5-0079e92e2436","app.js","83f9cfba-8a98-11f1-b875-1607ee4eb77e",257,["D",1785252538414],"import { CELL, HEIGHT, WIDTH } from \"./config.js\";\nimport { createGrid } from \"./grid.js\";\nimport { copy } from \"./lessons.js\";\n\n(function () {\n // Mutable simulation fields and runtime state remain together while the physics\n // functions are migrated behind explicit interfaces in later passes.\n var canvas = document.getElementById(\"field\"),\n ctx = canvas.getContext(\"2d\");\n var field = new Float32Array(WIDTH * HEIGHT),\n next = new Float32Array(WIDTH * HEIGHT);\n var velocityX = new Float32Array(WIDTH * HEIGHT),\n velocityY = new Float32Array(WIDTH * HEIGHT),\n velocityNextX = new Float32Array(WIDTH * HEIGHT),\n velocityNextY = new Float32Array(WIDTH * HEIGHT);\n var divergence = new Float32Array(WIDTH * HEIGHT);\n var pressure = new Float32Array(WIDTH * HEIGHT),\n pressureNext = new Float32Array(WIDTH * HEIGHT);\n var temperature = new Float32Array(WIDTH * HEIGHT),\n temperatureNext = new Float32Array(WIDTH * HEIGHT);\n var wax = new Float32Array(WIDTH * HEIGHT),\n waxNext = new Float32Array(WIDTH * HEIGHT);\n var meltProgress = new Float32Array(WIDTH * HEIGHT),\n meltProgressNext = new Float32Array(WIDTH * HEIGHT);\n var surfaceNormalX = new Float32Array(WIDTH * HEIGHT),\n surfaceNormalY = new Float32Array(WIDTH * HEIGHT),\n surfaceCurvature = new Float32Array(WIDTH * HEIGHT),\n neckMask = new Float32Array(WIDTH * HEIGHT),\n blobLabels = new Int16Array(WIDTH * HEIGHT),\n previousBlobLabels = new Int16Array(WIDTH * HEIGHT),\n vesselMask = new Uint8Array(WIDTH * HEIGHT);\n var mode = \"grid\",\n selected = null,\n painting = false,\n vectorOrigin = null,\n tickCount = 0,\n stepScale = 1,\n running = false,\n animationAccumulator = 0,\n lastAnimationTime = 0,\n cycleHistory = [],\n previousBlobCount = 0,\n splitEvents = 0,\n mergeEvents = 0,\n nextBlobId = 1,\n waxParticles = [];\n var rate = document.getElementById(\"rate\"),\n distance = document.getElementById(\"distance\"),\n iterations = document.getElementById(\"iterations\"),\n buoyancy = document.getElementById(\"buoyancy\"),\n heater = document.getElementById(\"heater\"),\n cooling = document.getElementById(\"cooling\"),\n conduction = document.getElementById(\"conduction\"),\n wallCooling = document.getElementById(\"wallCooling\"),\n neutralTemp = document.getElementById(\"neutralTemp\"),\n densityResponse = document.getElementById(\"densityResponse\"),\n meltTemp = document.getElementById(\"meltTemp\"),\n transitionWidth = document.getElementById(\"transitionWidth\"),\n solidDrag = document.getElementById(\"solidDrag\"),\n interfaceSharpness = document.getElementById(\"interfaceSharpness\"),\n latentCoupling = document.getElementById(\"latentCoupling\"),\n surfaceTension = document.getElementById(\"surfaceTension\"),\n carrierViscosity = document.getElementById(\"carrierViscosity\"),\n hotViscosity = document.getElementById(\"hotViscosity\"),\n coldViscosity = document.getElementById(\"coldViscosity\"),\n timeStep = document.getElementById(\"timeStep\"),\n substeps = document.getElementById(\"substeps\"),\n playbackRate = document.getElementById(\"playbackRate\"),\n lampPreset = document.getElementById(\"lampPreset\"),\n heaterUnevenness = document.getElementById(\"heaterUnevenness\"),\n neckSensitivity = document.getElementById(\"neckSensitivity\"),\n pinchStrength = document.getElementById(\"pinchStrength\"),\n conservationStrength = document.getElementById(\"conservationStrength\"),\n blobThreshold = document.getElementById(\"blobThreshold\"),\n matchRadius = document.getElementById(\"matchRadius\"),\n cellSizeCm = document.getElementById(\"cellSizeCm\"),\n secondsPerFrame = document.getElementById(\"secondsPerFrame\"),\n baseFocus = document.getElementById(\"baseFocus\"),\n glassCooling = document.getElementById(\"glassCooling\"),\n collectionStrength = document.getElementById(\"collectionStrength\"),\n particleCount = document.getElementById(\"particleCount\"),\n restDensity = document.getElementById(\"restDensity\"),\n volumePressure = document.getElementById(\"volumePressure\");\n\n const { indexOf, at, set } = createGrid(WIDTH, HEIGHT, field);\n\n // FIELD SETUP AND LESSON SEEDING\n function clearCurrent() {\n if (mode === \"shapedLamp\" || mode === \"particleVolume\") waxParticles.length = 0;\n if (\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n )\n setRunning(false);\n if (\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ) {\n temperature.fill(0);\n temperatureNext.fill(0);\n wax.fill(0);\n waxNext.fill(0);\n meltProgress.fill(0);\n meltProgressNext.fill(0);\n velocityX.fill(0);\n velocityY.fill(0);\n divergence.fill(0);\n pressure.fill(0);\n pressureNext.fill(0);\n } else if (\n mode === \"velocity\" ||\n mode === \"divergence\" ||\n mode === \"projection\" ||\n mode === \"boundaries\"\n ) {\n velocityX.fill(0);\n velocityY.fill(0);\n divergence.fill(0);\n pressure.fill(0);\n pressureNext.fill(0);\n } else if (mode === \"advection\" || mode === \"transportDiffusion\") {\n field.fill(0);\n velocityX.fill(0);\n velocityY.fill(0);\n } else {\n field.fill(0);\n }\n tickCount = 0;\n selected = null;\n draw();\n updateReadout();\n }\n function seedCurrent() {\n clearCurrent();\n if (mode === \"shapedLamp\" || mode === \"particleVolume\") {\n buildLampMask();\n seedWaxParticles();\n } else if (\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ) {\n for (var y = HEIGHT - 4; y < HEIGHT - 1; y++)\n for (var x = 3; x < WIDTH - 3; x++) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.25;\n meltProgress[indexOf(x, y)] = 0;\n }\n } else if (mode === \"stableLamp\" || mode === \"simulator\") {\n for (var y = HEIGHT - 8; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 5; x <= Math.floor(WIDTH / 2) + 4; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 5);\n if (dx * dx + dy * dy < 22) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.62;\n meltProgress[indexOf(x, y)] = 0.65;\n }\n }\n } else if (mode === \"viscosityWax\") {\n for (var y = HEIGHT - 8; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 5; x <= Math.floor(WIDTH / 2) + 4; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 5);\n if (dx * dx + dy * dy < 22) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.68;\n meltProgress[indexOf(x, y)] = 0.75;\n }\n }\n } else if (mode === \"surfaceWax\") {\n for (var y = HEIGHT - 8; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 5; x <= Math.floor(WIDTH / 2) + 4; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 5);\n if (dx * dx + dy * dy < 22) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.7;\n meltProgress[indexOf(x, y)] = 0.8;\n }\n }\n } else if (mode === \"latentWax\") {\n for (var y = HEIGHT - 7; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 4; x <= Math.floor(WIDTH / 2) + 3; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 4);\n if (dx * dx + dy * dy < 16) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = +meltTemp.value - 0.12;\n }\n }\n } else if (mode === \"interfaceWax\") {\n for (var y = HEIGHT - 7; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 4; x <= Math.floor(WIDTH / 2) + 3; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 4);\n if (dx * dx + dy * dy < 16) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.65;\n }\n }\n } else if (mode === \"phaseWax\") {\n for (var y = HEIGHT - 7; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 4; x <= Math.floor(WIDTH / 2) + 3; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 4);\n if (dx * dx + dy * dy < 16) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.35;\n }\n }\n } else if (mode === \"densityWax\") {\n for (var y = HEIGHT - 6; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 5; x < Math.floor(WIDTH / 2); x++) {\n var dx = x - (WIDTH / 2 - 3),\n dy = y - (HEIGHT - 4);\n if (dx * dx + dy * dy < 10) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.85;\n }\n }\n for (var y = 2; y < 6; y++)\n for (var x = Math.floor(WIDTH / 2) + 1; x <= Math.floor(WIDTH / 2) + 5; x++) {\n var dx = x - (WIDTH / 2 + 3),\n dy = y - 4;\n if (dx * dx + dy * dy < 10) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.2;\n }\n }\n } else if (mode === \"waxField\") {\n for (var y = HEIGHT - 6; y < HEIGHT - 2; y++)\n for (var x = Math.floor(WIDTH / 2) - 4; x <= Math.floor(WIDTH / 2) + 3; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 4);\n if (dx * dx + dy * dy < 14) {\n wax[indexOf(x, y)] = 1;\n temperature[indexOf(x, y)] = 0.8;\n }\n }\n } else if (\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\"\n ) {\n for (var y = HEIGHT - 5; y < HEIGHT - 1; y++)\n for (var x = WIDTH / 2 - 4; x < WIDTH / 2 + 4; x++) {\n var dx = x - (WIDTH - 1) / 2,\n dy = y - (HEIGHT - 3);\n if (dx * dx + dy * dy < 13) temperature[indexOf(x, y)] = 1;\n }\n } else if (mode === \"heatedFlow\") {\n applyHeatSourceAndCooling();\n } else if (mode === \"boundaries\") {\n seedBoundaryExample();\n updateBoundaryMetric(null, countBoundaryLeaks());\n } else if (mode === \"divergence\" || mode === \"projection\") {\n seedDivergenceExample();\n pressure.fill(0);\n pressureNext.fill(0);\n if (mode === \"projection\") updateProjectionMetric(null, meanAbsoluteDivergence());\n } else if (mode === \"velocity\" || mode === \"advection\" || mode === \"transportDiffusion\") {\n var cx = (WIDTH - 1) / 2,\n cy = (HEIGHT - 1) / 2;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var dx = x - cx,\n dy = y - cy,\n length = Math.sqrt(dx * dx + dy * dy) || 1;\n velocityX[indexOf(x, y)] = -dy / length;\n velocityY[indexOf(x, y)] = dx / length;\n }\n if (mode === \"advection\" || mode === \"transportDiffusion\") {\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var dx = x - 19,\n dy = y - 9;\n if (dx * dx + dy * dy < 7) set(x, y, 1);\n }\n }\n } else {\n for (var y = 6; y < 12; y++)\n for (var x = 10; x < 18; x++) {\n var dx = x - 13.5,\n dy = y - 8.5;\n if (dx * dx + dy * dy < 12) set(x, y, 1);\n }\n }\n draw();\n updateReadout();\n }\n\n function seedBoundaryExample() {\n var cx = (WIDTH - 1) / 2,\n cy = (HEIGHT - 1) / 2;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var dx = x - cx,\n dy = y - cy,\n length = Math.sqrt(dx * dx + dy * dy) || 1;\n var radialX = dx / length,\n radialY = dy / length;\n var vx = 0.7 * radialX - 0.7 * radialY,\n vy = 0.7 * radialY + 0.7 * radialX;\n var speed = Math.sqrt(vx * vx + vy * vy);\n if (speed > 1) {\n vx /= speed;\n vy /= speed;\n }\n velocityX[indexOf(x, y)] = vx;\n velocityY[indexOf(x, y)] = vy;\n }\n }\n function isBoundaryLeak(x, y) {\n var i = indexOf(x, y);\n return (\n (x === 0 && velocityX[i] < 0) ||\n (x === WIDTH - 1 && velocityX[i] > 0) ||\n (y === 0 && velocityY[i] < 0) ||\n (y === HEIGHT - 1 && velocityY[i] > 0)\n );\n }\n function countBoundaryLeaks() {\n var count = 0;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) if (isBoundaryLeak(x, y)) count++;\n return count;\n }\n function updateBoundaryMetric(before, after) {\n document.getElementById(\"boundaryMetric\").textContent =\n before === null ? after : before + \" → \" + after;\n }\n function enforceBoundaries(commitUI) {\n var before = countBoundaryLeaks();\n for (var y = 0; y < HEIGHT; y++) {\n velocityX[indexOf(0, y)] = 0;\n velocityX[indexOf(WIDTH - 1, y)] = 0;\n }\n for (var x = 0; x < WIDTH; x++) {\n velocityY[indexOf(x, 0)] = 0;\n velocityY[indexOf(x, HEIGHT - 1)] = 0;\n }\n var after = countBoundaryLeaks();\n updateBoundaryMetric(before, after);\n if (commitUI !== false) {\n tickCount++;\n draw();\n updateReadout();\n }\n }\n\n function applyBuoyancy(commitUI) {\n var strength = +buoyancy.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n velocityY[i] -= temperature[i] * strength;\n velocityY[i] = Math.max(-1.5, velocityY[i]);\n }\n if (commitUI !== false) {\n tickCount++;\n draw();\n updateReadout();\n }\n }\n\n function sampleTemperature(x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n var x0 = Math.floor(x),\n y0 = Math.floor(y),\n x1 = Math.min(WIDTH - 1, x0 + 1),\n y1 = Math.min(HEIGHT - 1, y0 + 1);\n var tx = x - x0,\n ty = y - y0;\n var top = temperature[indexOf(x0, y0)] * (1 - tx) + temperature[indexOf(x1, y0)] * tx;\n var bottom = temperature[indexOf(x0, y1)] * (1 - tx) + temperature[indexOf(x1, y1)] * tx;\n return top * (1 - ty) + bottom * ty;\n }\n\n function advectTemperature() {\n var stepDistance = +distance.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n temperatureNext[i] = sampleTemperature(\n x - velocityX[i] * stepDistance,\n y - velocityY[i] * stepDistance,\n );\n }\n var swap = temperature;\n temperature = temperatureNext;\n temperatureNext = swap;\n }\n\n function stepRisingHeat() {\n applyBuoyancy(false);\n advectTemperature();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function stepCoupledThermal() {\n applyBuoyancy(false);\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function applyHeatSourceAndCooling() {\n var loss = 1 - +cooling.value,\n gain = +heater.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= loss;\n for (var y = HEIGHT - 3; y < HEIGHT - 1; y++)\n for (var x = Math.floor(WIDTH / 2) - 3; x <= Math.floor(WIDTH / 2) + 2; x++) {\n var i = indexOf(x, y);\n temperature[i] = Math.min(1, temperature[i] + gain);\n }\n }\n\n function stepHeatedFlow() {\n applyHeatSourceAndCooling();\n applyBuoyancy(false);\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n tickCount++;\n draw();\n updateReadout();\n }\n\n // THERMAL AND MATERIAL PHYSICS\n\n function addBottomHeat() {\n var gain = +heater.value * stepScale;\n for (var y = HEIGHT - 3; y < HEIGHT - 1; y++)\n for (var x = Math.floor(WIDTH / 2) - 3; x <= Math.floor(WIDTH / 2) + 2; x++) {\n var i = indexOf(x, y);\n temperature[i] = Math.min(1, temperature[i] + gain);\n }\n }\n\n function diffuseTemperature() {\n var strength = +conduction.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var center = temperature[indexOf(x, y)],\n sum = 0,\n count = 0;\n if (x > 0) {\n sum += temperature[indexOf(x - 1, y)];\n count++;\n }\n if (x < WIDTH - 1) {\n sum += temperature[indexOf(x + 1, y)];\n count++;\n }\n if (y > 0) {\n sum += temperature[indexOf(x, y - 1)];\n count++;\n }\n if (y < HEIGHT - 1) {\n sum += temperature[indexOf(x, y + 1)];\n count++;\n }\n temperatureNext[indexOf(x, y)] = center + strength * (sum / count - center);\n }\n var swap = temperature;\n temperature = temperatureNext;\n temperatureNext = swap;\n }\n\n function coolTemperatureAtWalls() {\n var keep = 1 - +wallCooling.value * stepScale;\n for (var x = 0; x < WIDTH; x++) {\n temperature[indexOf(x, 0)] *= keep;\n temperature[indexOf(x, HEIGHT - 1)] *= keep;\n }\n for (var y = 1; y < HEIGHT - 1; y++) {\n temperature[indexOf(0, y)] *= keep;\n temperature[indexOf(WIDTH - 1, y)] *= keep;\n }\n }\n\n function stepConductiveFlow() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyBuoyancy(false);\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function sampleWax(x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n var x0 = Math.floor(x),\n y0 = Math.floor(y),\n x1 = Math.min(WIDTH - 1, x0 + 1),\n y1 = Math.min(HEIGHT - 1, y0 + 1);\n var tx = x - x0,\n ty = y - y0;\n var top = wax[indexOf(x0, y0)] * (1 - tx) + wax[indexOf(x1, y0)] * tx;\n var bottom = wax[indexOf(x0, y1)] * (1 - tx) + wax[indexOf(x1, y1)] * tx;\n return top * (1 - ty) + bottom * ty;\n }\n\n function advectWax() {\n var stepDistance = +distance.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n waxNext[i] = sampleWax(x - velocityX[i] * stepDistance, y - velocityY[i] * stepDistance);\n }\n var swap = wax;\n wax = waxNext;\n waxNext = swap;\n }\n\n function stepWaxTransport() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyBuoyancy(false);\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function applyWaxDensityBuoyancy() {\n var neutral = +neutralTemp.value,\n response = +densityResponse.value * stepScale;\n for (var i = 0; i < wax.length; i++) {\n var densityAnomaly = wax[i] * (neutral - temperature[i]);\n velocityY[i] += densityAnomaly * response;\n velocityY[i] = Math.max(-1.5, Math.min(1.5, velocityY[i]));\n }\n }\n\n function stepDensityWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyWaxDensityBuoyancy();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function liquidWaxFraction(tempValue) {\n var half = Math.max(0.001, +transitionWidth.value),\n start = +meltTemp.value - half,\n end = +meltTemp.value + half;\n var t = Math.max(0, Math.min(1, (tempValue - start) / (end - start)));\n return t * t * (3 - 2 * t);\n }\n\n function applyPhaseDrag() {\n var drag = +solidDrag.value * stepScale;\n for (var i = 0; i < wax.length; i++) {\n var solidFraction = wax[i] * (1 - liquidWaxFraction(temperature[i]));\n var keep = 1 - solidFraction * drag;\n velocityX[i] *= keep;\n velocityY[i] *= keep;\n }\n }\n\n function stepPhaseWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyWaxDensityBuoyancy();\n applyPhaseDrag();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function sharpenWaxInterface() {\n var strength = +interfaceSharpness.value;\n for (var i = 0; i < wax.length; i++) {\n var w = Math.max(0, Math.min(1, wax[i]));\n var sharpened = w * w * (3 - 2 * w);\n wax[i] = w * (1 - strength) + sharpened * strength;\n }\n }\n\n function stepInterfaceWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyWaxDensityBuoyancy();\n applyPhaseDrag();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n sharpenWaxInterface();\n tickCount++;\n draw();\n updateReadout();\n }\n\n function applyLatentHeat() {\n var melt = +meltTemp.value,\n coupling = +latentCoupling.value * stepScale;\n for (var i = 0; i < wax.length; i++) {\n if (wax[i] <= 0) continue;\n if (temperature[i] > melt && meltProgress[i] < wax[i]) {\n var absorbed = Math.min((temperature[i] - melt) * coupling, wax[i] - meltProgress[i]);\n meltProgress[i] += absorbed;\n temperature[i] -= absorbed;\n } else if (temperature[i] < melt && meltProgress[i] > 0) {\n var released = Math.min((melt - temperature[i]) * coupling, meltProgress[i]);\n meltProgress[i] -= released;\n temperature[i] += released;\n }\n }\n }\n\n function applyLatentPhaseDrag() {\n var drag = +solidDrag.value * stepScale;\n for (var i = 0; i < wax.length; i++) {\n var liquid = wax[i] > 0 ? Math.max(0, Math.min(1, meltProgress[i] / wax[i])) : 0;\n var keep = 1 - wax[i] * (1 - liquid) * drag;\n velocityX[i] *= keep;\n velocityY[i] *= keep;\n }\n }\n\n function sampleMeltProgress(x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n var x0 = Math.floor(x),\n y0 = Math.floor(y),\n x1 = Math.min(WIDTH - 1, x0 + 1),\n y1 = Math.min(HEIGHT - 1, y0 + 1),\n tx = x - x0,\n ty = y - y0;\n var top = meltProgress[indexOf(x0, y0)] * (1 - tx) + meltProgress[indexOf(x1, y0)] * tx;\n var bottom = meltProgress[indexOf(x0, y1)] * (1 - tx) + meltProgress[indexOf(x1, y1)] * tx;\n return top * (1 - ty) + bottom * ty;\n }\n\n function advectMeltProgress() {\n var stepDistance = +distance.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n meltProgressNext[i] = sampleMeltProgress(\n x - velocityX[i] * stepDistance,\n y - velocityY[i] * stepDistance,\n );\n }\n var swap = meltProgress;\n meltProgress = meltProgressNext;\n meltProgressNext = swap;\n }\n\n function stepLatentWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n tickCount++;\n draw();\n updateReadout();\n }\n\n function waxAt(x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n return wax[indexOf(x, y)];\n }\n function normalAt(array, x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n return array[indexOf(x, y)];\n }\n\n function applySurfaceTension() {\n var sigma = +surfaceTension.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var gx = 0.5 * (waxAt(x + 1, y) - waxAt(x - 1, y)),\n gy = 0.5 * (waxAt(x, y + 1) - waxAt(x, y - 1)),\n length = Math.sqrt(gx * gx + gy * gy);\n var i = indexOf(x, y);\n surfaceNormalX[i] = length > 0.0001 ? gx / length : 0;\n surfaceNormalY[i] = length > 0.0001 ? gy / length : 0;\n }\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y),\n gx = 0.5 * (waxAt(x + 1, y) - waxAt(x - 1, y)),\n gy = 0.5 * (waxAt(x, y + 1) - waxAt(x, y - 1));\n var curvature =\n -0.5 *\n (normalAt(surfaceNormalX, x + 1, y) -\n normalAt(surfaceNormalX, x - 1, y) +\n (normalAt(surfaceNormalY, x, y + 1) - normalAt(surfaceNormalY, x, y - 1)));\n surfaceCurvature[i] = curvature;\n velocityX[i] += sigma * curvature * gx;\n velocityY[i] += sigma * curvature * gy;\n }\n }\n\n function stepSurfaceWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applyBottomCollection();\n applySurfaceTension();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n tickCount++;\n draw();\n updateReadout();\n }\n\n function viscosityAtIndex(i) {\n var w = wax[i],\n liquid = w > 0 ? Math.max(0, Math.min(1, meltProgress[i] / w)) : 0;\n var waxViscosity = +coldViscosity.value * (1 - liquid) + +hotViscosity.value * liquid;\n return +carrierViscosity.value * (1 - w) + waxViscosity * w;\n }\n\n function diffuseVelocityByViscosity() {\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y),\n sumX = 0,\n sumY = 0,\n count = 0;\n if (x > 0) {\n sumX += velocityX[indexOf(x - 1, y)];\n sumY += velocityY[indexOf(x - 1, y)];\n count++;\n }\n if (x < WIDTH - 1) {\n sumX += velocityX[indexOf(x + 1, y)];\n sumY += velocityY[indexOf(x + 1, y)];\n count++;\n }\n if (y > 0) {\n sumX += velocityX[indexOf(x, y - 1)];\n sumY += velocityY[indexOf(x, y - 1)];\n count++;\n }\n if (y < HEIGHT - 1) {\n sumX += velocityX[indexOf(x, y + 1)];\n sumY += velocityY[indexOf(x, y + 1)];\n count++;\n }\n var blend = viscosityAtIndex(i) * stepScale;\n velocityNextX[i] = velocityX[i] + blend * (sumX / count - velocityX[i]);\n velocityNextY[i] = velocityY[i] + blend * (sumY / count - velocityY[i]);\n }\n var swap = velocityX;\n velocityX = velocityNextX;\n velocityNextX = swap;\n swap = velocityY;\n velocityY = velocityNextY;\n velocityNextY = swap;\n }\n\n function stepViscosityWax() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n tickCount++;\n draw();\n updateReadout();\n }\n\n function runCompleteSubstep() {\n addBottomHeat();\n var ambientKeep = 1 - +cooling.value * stepScale;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n }\n\n function updateStabilityMetric() {\n var maxSpeed = 0;\n for (var i = 0; i < velocityX.length; i++)\n maxSpeed = Math.max(\n maxSpeed,\n Math.sqrt(velocityX[i] * velocityX[i] + velocityY[i] * velocityY[i]),\n );\n document.getElementById(\"stabilityMetric\").textContent =\n (maxSpeed * +distance.value * stepScale).toFixed(2) + \" cells\";\n }\n\n function stepStableLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runCompleteSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n }\n\n function addUnevenBottomHeat() {\n var gain = +heater.value * stepScale,\n uneven = +heaterUnevenness.value;\n for (var y = HEIGHT - 3; y < HEIGHT - 1; y++)\n for (var x = 3; x < WIDTH - 3; x++) {\n var wave =\n 0.5 +\n 0.5 * Math.sin(x * 1.37 + tickCount * 0.19) +\n 0.25 * Math.sin(x * 0.53 - tickCount * 0.11);\n wave = Math.max(0, Math.min(1, wave));\n var localGain = gain * (1 - uneven + uneven * (0.35 + 1.3 * wave));\n var i = indexOf(x, y);\n temperature[i] = Math.min(1, temperature[i] + localGain);\n }\n }\n\n function runUnevenSubstep() {\n addUnevenBottomHeat();\n var ambientKeep = 1 - +cooling.value * stepScale;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n }\n\n function totalWax() {\n var total = 0;\n for (var i = 0; i < wax.length; i++) total += wax[i];\n return total;\n }\n function detectAndPinchNecks() {\n neckMask.fill(0);\n var before = totalWax(),\n removed = 0,\n count = 0,\n sensitivity = +neckSensitivity.value,\n strength = +pinchStrength.value;\n waxNext.set(wax);\n for (var y = 1; y < HEIGHT - 3; y++)\n for (var x = 1; x < WIDTH - 1; x++) {\n var i = indexOf(x, y),\n w = wax[i];\n if (w < 0.08 || w > 0.92) continue;\n var left = wax[indexOf(x - 1, y)],\n right = wax[indexOf(x + 1, y)],\n up = wax[indexOf(x, y - 1)],\n down = wax[indexOf(x, y + 1)];\n var vertical = up + down,\n horizontal = left + right;\n var verticalBridge = vertical > 1.05 && horizontal < 1.05 - 0.7 * sensitivity;\n var horizontalBridge = horizontal > 1.05 && vertical < 1.05 - 0.7 * sensitivity;\n var strain =\n Math.abs(velocityY[indexOf(x, y - 1)] - velocityY[indexOf(x, y + 1)]) +\n Math.abs(velocityX[indexOf(x - 1, y)] - velocityX[indexOf(x + 1, y)]);\n if (!(verticalBridge || horizontalBridge) || strain < 0.04 * (1 - sensitivity)) continue;\n var cut = Math.min(w, 0.18 * strength * stepScale * (0.6 + Math.min(2, strain)));\n if (cut <= 0) continue;\n neckMask[i] = 1;\n waxNext[i] -= cut;\n removed += cut;\n count++;\n var a = verticalBridge ? indexOf(x, y - 1) : indexOf(x - 1, y),\n b = verticalBridge ? indexOf(x, y + 1) : indexOf(x + 1, y);\n var capacityA = 1 - waxNext[a],\n capacityB = 1 - waxNext[b],\n capacity = capacityA + capacityB;\n if (capacity > 0) {\n var putA = Math.min(capacityA, (cut * capacityA) / capacity),\n putB = Math.min(capacityB, cut - putA);\n waxNext[a] += putA;\n waxNext[b] += putB;\n }\n }\n wax.set(waxNext);\n var after = totalWax(),\n error = before - after;\n if (Math.abs(error) > 1e-7) {\n for (var pass = 0; pass < 3 && Math.abs(error) > 1e-6; pass++) {\n var capacity = 0;\n for (var i = 0; i < wax.length; i++)\n capacity += error > 0 ? (wax[i] > 0.05 ? 1 - wax[i] : 0) : wax[i];\n if (capacity <= 0) break;\n for (var i = 0; i < wax.length; i++) {\n var room = error > 0 ? (wax[i] > 0.05 ? 1 - wax[i] : 0) : wax[i];\n wax[i] = Math.max(0, Math.min(1, wax[i] + (error * room) / capacity));\n }\n error = before - totalWax();\n }\n }\n document.getElementById(\"neckMetric\").textContent = count;\n document.getElementById(\"waxErrorMetric\").textContent = Math.abs(before - totalWax()).toFixed(\n 3,\n );\n }\n\n function runPinchSubstep() {\n addUnevenBottomHeat();\n var ambientKeep = 1 - +cooling.value * stepScale;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n detectAndPinchNecks();\n sharpenWaxInterface();\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n }\n\n function correctWaxMass(target, strength) {\n var raw = totalWax() - target,\n remaining = -raw * strength;\n for (var pass = 0; pass < 4 && Math.abs(remaining) > 1e-7; pass++) {\n var capacity = 0;\n for (var i = 0; i < wax.length; i++)\n capacity += remaining > 0 ? (wax[i] > 0.02 ? 1 - wax[i] : 0) : wax[i];\n if (capacity <= 0) break;\n for (var i = 0; i < wax.length; i++) {\n var room = remaining > 0 ? (wax[i] > 0.02 ? 1 - wax[i] : 0) : wax[i];\n wax[i] = Math.max(0, Math.min(1, wax[i] + (remaining * room) / capacity));\n }\n remaining = target - totalWax();\n }\n document.getElementById(\"rawDriftMetric\").textContent = (raw >= 0 ? \"+\" : \"\") + raw.toFixed(3);\n var corrected = totalWax() - target;\n document.getElementById(\"correctedDriftMetric\").textContent =\n (corrected >= 0 ? \"+\" : \"\") + corrected.toFixed(3);\n }\n\n function totalThermalEnergy() {\n var total = 0;\n for (var i = 0; i < temperature.length; i++) total += temperature[i] + meltProgress[i];\n return total;\n }\n function analyzeBlobs(countEvents, persistent) {\n blobLabels.fill(-1);\n var threshold = +blobThreshold.value,\n components = [],\n queue = [];\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var st = indexOf(x, y);\n if (wax[st] < threshold || blobLabels[st] >= 0) continue;\n var cells = [],\n ci = components.length;\n blobLabels[st] = ci;\n queue = [st];\n for (var q = 0; q < queue.length; q++) {\n var i = queue[q],\n cx = i % WIDTH,\n cy = Math.floor(i / WIDTH);\n cells.push(i);\n var ns = [\n [cx - 1, cy],\n [cx + 1, cy],\n [cx, cy - 1],\n [cx, cy + 1],\n ];\n for (var n = 0; n < 4; n++) {\n var nx = ns[n][0],\n ny = ns[n][1];\n if (nx < 0 || nx >= WIDTH || ny < 0 || ny >= HEIGHT) continue;\n var ni = indexOf(nx, ny);\n if (wax[ni] >= threshold && blobLabels[ni] < 0) {\n blobLabels[ni] = ci;\n queue.push(ni);\n }\n }\n }\n components.push(cells);\n }\n var ids = [],\n matched = 0,\n parents = {};\n for (var c = 0; c < components.length; c++) {\n var votes = {};\n for (var k = 0; k < components[c].length; k++) {\n var old = previousBlobLabels[components[c][k]];\n if (old >= 0) votes[old] = (votes[old] || 0) + 1;\n else if (persistent) {\n var rr = +matchRadius.value,\n cx = components[c][k] % WIDTH,\n cy = Math.floor(components[c][k] / WIDTH);\n for (var sy = Math.max(0, cy - rr); sy <= Math.min(HEIGHT - 1, cy + rr); sy++)\n for (var sx = Math.max(0, cx - rr); sx <= Math.min(WIDTH - 1, cx + rr); sx++) {\n var nearby = previousBlobLabels[indexOf(sx, sy)];\n if (nearby >= 0) votes[nearby] = (votes[nearby] || 0) + 0.15;\n }\n }\n }\n var best = -1,\n bestN = 0,\n keys = Object.keys(votes);\n for (var j = 0; j < keys.length; j++) {\n var id = +keys[j];\n if (votes[id] > bestN) {\n best = id;\n bestN = votes[id];\n }\n }\n if (persistent && best >= 0) {\n ids[c] = best;\n matched++;\n parents[best] = (parents[best] || 0) + 1;\n if (countEvents && keys.length > 1) mergeEvents++;\n } else ids[c] = nextBlobId++;\n }\n if (countEvents) for (var id in parents) if (parents[id] > 1) splitEvents += parents[id] - 1;\n var total = totalWax(),\n largest = 0;\n for (var c = 0; c < components.length; c++) {\n var size = 0;\n for (var k = 0; k < components[c].length; k++) {\n var i = components[c][k];\n size += wax[i];\n blobLabels[i] = ids[c];\n }\n largest = Math.max(largest, size);\n }\n previousBlobLabels.set(blobLabels);\n previousBlobCount = components.length;\n document.getElementById(\"blobCountMetric\").textContent = components.length;\n document.getElementById(\"largestBlobMetric\").textContent =\n Math.round((total ? largest / total : 0) * 100) + \"%\";\n document.getElementById(\"splitMetric\").textContent = splitEvents;\n document.getElementById(\"mergeMetric\").textContent = mergeEvents;\n document.getElementById(\"nextBlobMetric\").textContent = nextBlobId;\n document.getElementById(\"matchedBlobMetric\").textContent = matched;\n }\n function stepBlobTrackingLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runClosedVesselSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n recordCycleDiagnostics();\n analyzeBlobs(true);\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function stepBlobIdentityLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runClosedVesselSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n recordCycleDiagnostics();\n analyzeBlobs(true, true);\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function updateCourseDiagnostics() {\n var min = 1,\n max = 0;\n for (var i = 0; i < cycleHistory.length; i++) {\n min = Math.min(min, cycleHistory[i]);\n max = Math.max(max, cycleHistory[i]);\n }\n var range = Math.max(0, max - min),\n blobs = +document.getElementById(\"blobCountMetric\").textContent || 0;\n document.getElementById(\"cycleRangeMetric\").textContent = Math.round(range * 100) + \"%\";\n document.getElementById(\"activeBlobsMetric\").textContent = blobs;\n var maxSpeed = 0;\n for (var i = 0; i < velocityX.length; i++)\n maxSpeed = Math.max(\n maxSpeed,\n Math.sqrt(velocityX[i] * velocityX[i] + velocityY[i] * velocityY[i]),\n );\n document.getElementById(\"physicalSpeedMetric\").textContent =\n ((maxSpeed * +cellSizeCm.value) / +secondsPerFrame.value).toFixed(1) + \" cm/s\";\n document.getElementById(\"finalBlobsMetric\").textContent = blobs;\n document.getElementById(\"finalCycleMetric\").textContent = Math.round(range * 100) + \"%\";\n document.getElementById(\"finalRisingMetric\").textContent =\n document.getElementById(\"risingMetric\").textContent;\n document.getElementById(\"finalFallingMetric\").textContent =\n document.getElementById(\"fallingMetric\").textContent;\n }\n function lampHalfWidth(y) {\n var 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 // SHAPED VESSEL AND PARTICLE PHYSICS\n\n function buildLampMask() {\n var c = (WIDTH - 1) / 2;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++)\n vesselMask[indexOf(x, y)] =\n y > 0 && y < HEIGHT - 1 && Math.abs(x - c) <= lampHalfWidth(y) ? 1 : 0;\n }\n function seedWaxParticles() {\n waxParticles.length = 0;\n var c = (WIDTH - 1) / 2,\n target = +particleCount.value;\n for (var y = HEIGHT - 7.4; y <= HEIGHT - 2.1 && waxParticles.length < target; y += 0.52)\n for (var x = c - 5.6; x <= c + 5.6 && waxParticles.length < target; x += 0.52) {\n if (Math.abs(x - c) < lampHalfWidth(y) - 0.5) {\n var n = waxParticles.length;\n waxParticles.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 temp: 0.2 + 0.035 * Math.sin(x * 1.9),\n });\n }\n }\n rasterizeWaxParticles();\n }\n function rasterizeWaxParticles() {\n wax.fill(0);\n temperature.fill(0);\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n x = Math.max(0, Math.min(WIDTH - 1, Math.round(p.x))),\n y = Math.max(0, Math.min(HEIGHT - 1, Math.round(p.y))),\n i = indexOf(x, y);\n wax[i] = Math.min(1, wax[i] + 0.32);\n temperature[i] = Math.max(temperature[i], p.temp);\n }\n }\n function drawWaxParticles() {\n ctx.save();\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n hot = Math.max(0, Math.min(1, p.temp));\n ctx.beginPath();\n ctx.arc((p.x + 0.5) * CELL, (p.y + 0.5) * CELL, CELL * 0.42, 0, Math.PI * 2);\n ctx.fillStyle =\n \"rgba(\" +\n Math.round(155 + 90 * hot) +\n \",\" +\n Math.round(70 + 20 * hot) +\n \",\" +\n Math.round(205 - 45 * hot) +\n \",.42)\";\n ctx.fill();\n }\n ctx.restore();\n }\n function collideParticle(p) {\n var c = (WIDTH - 1) / 2,\n minY = 1.35,\n maxY = HEIGHT - 2.05;\n p.y = Math.max(minY, Math.min(maxY, p.y));\n if (p.y === minY && p.vy < 0) p.vy *= -0.18;\n if (p.y === maxY && p.vy > 0) p.vy *= -0.12;\n var limit = lampHalfWidth(p.y) - 0.48;\n if (p.x < c - limit) {\n p.x = c - limit;\n p.vx = Math.abs(p.vx) * 0.2;\n }\n if (p.x > c + limit) {\n p.x = c + limit;\n p.vx = -Math.abs(p.vx) * 0.2;\n }\n }\n function updateParticleThermal() {\n var c = (WIDTH - 1) / 2,\n width = 4 - 3 * +baseFocus.value,\n dt = stepScale,\n hotspot = 1.8 * Math.sin(tickCount * 0.045);\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n d = (p.x - (c + hotspot)) / width,\n uneven = 0.65 + 0.45 * (0.5 + 0.5 * Math.sin(p.x * 2.1 + n * 0.17));\n if (p.y > HEIGHT - 5.5) p.temp += +heater.value * dt * Math.exp(-d * d) * uneven;\n p.temp *= 1 - +cooling.value * dt;\n var wallGap = lampHalfWidth(p.y) - Math.abs(p.x - c);\n if (p.y < 4 || wallGap < 1.2) p.temp *= 1 - +glassCooling.value * dt;\n p.temp = Math.max(0, Math.min(1, p.temp));\n }\n }\n function applyParticleForces() {\n var dt = stepScale,\n c = +collectionStrength.value,\n neutral = +neutralTemp.value,\n response = +densityResponse.value;\n for (var a = 0; a < waxParticles.length; a++) {\n var p = waxParticles[a];\n p.vy += (neutral - p.temp) * response * 0.24 * dt;\n p.vx *= 0.992;\n p.vy *= 0.992;\n }\n for (var a = 0; a < waxParticles.length; a++)\n for (var q = a + 1; q < waxParticles.length; q++) {\n var p = waxParticles[a],\n o = waxParticles[q],\n dx = o.x - p.x,\n dy = o.y - p.y,\n d2 = dx * dx + dy * dy;\n if (d2 < 0.01 || d2 > 2.25) continue;\n var d = Math.sqrt(d2),\n phaseCohesion = 0.22 + 0.78 * (1 - (p.temp + o.temp) * 0.5),\n force = (d - 0.58) * 0.032 * c * phaseCohesion * dt,\n fx = (force * dx) / d,\n fy = (force * dy) / d;\n p.vx += fx;\n p.vy += fy;\n o.vx -= fx;\n o.vy -= fy;\n }\n }\n function applyParticleVolumePressure() {\n var count = waxParticles.length,\n h = 1.3,\n density = new Float32Array(count),\n maxD = 0,\n target = +restDensity.value,\n strength = +volumePressure.value * stepScale;\n for (var a = 0; a < count; a++) {\n density[a] = 1;\n for (var q = a + 1; q < count; q++) {\n var p = waxParticles[a],\n o = waxParticles[q],\n dx = o.x - p.x,\n dy = o.y - p.y,\n d = Math.sqrt(dx * dx + dy * dy);\n if (d < h) {\n var w = 1 - d / h;\n w *= w;\n density[a] += w;\n density[q] += w;\n }\n }\n }\n for (var a = 0; a < count; a++) maxD = Math.max(maxD, density[a]);\n for (var a = 0; a < count; a++)\n for (var q = a + 1; q < count; q++) {\n var p = waxParticles[a],\n o = waxParticles[q],\n dx = o.x - p.x,\n dy = o.y - p.y,\n d = Math.sqrt(dx * dx + dy * dy);\n if (d < 0.001 || d >= h) continue;\n var excess = Math.max(0, (density[a] + density[q]) * 0.5 - target),\n hard = Math.max(0, 0.48 - d) * 2,\n force = (excess * (1 - d / h) * 0.055 + hard * 0.12) * strength,\n fx = (force * dx) / d,\n fy = (force * dy) / d;\n p.vx -= fx;\n p.vy -= fy;\n o.vx += fx;\n o.vy += fy;\n }\n document.getElementById(\"particleDensityMetric\").textContent = maxD.toFixed(1);\n }\n function depositParticleVelocityBilinear() {\n velocityX.fill(0);\n velocityY.fill(0);\n var weights = new Float32Array(WIDTH * HEIGHT);\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n x0 = Math.floor(p.x),\n y0 = Math.floor(p.y),\n tx = p.x - x0,\n ty = p.y - y0;\n for (var oy = 0; oy <= 1; oy++)\n for (var ox = 0; ox <= 1; ox++) {\n var x = Math.max(0, Math.min(WIDTH - 1, x0 + ox)),\n y = Math.max(0, Math.min(HEIGHT - 1, y0 + oy)),\n w = (ox ? tx : 1 - tx) * (oy ? ty : 1 - ty),\n i = indexOf(x, y);\n velocityX[i] += p.vx * w;\n velocityY[i] += p.vy * w;\n weights[i] += w;\n }\n }\n for (var i = 0; i < weights.length; i++)\n if (weights[i]) {\n velocityX[i] /= weights[i];\n velocityY[i] /= weights[i];\n }\n }\n function sampleProjectedVelocityBilinear(p) {\n var x0 = Math.floor(p.x),\n y0 = Math.floor(p.y),\n tx = p.x - x0,\n ty = p.y - y0,\n vx = 0,\n vy = 0;\n for (var oy = 0; oy <= 1; oy++)\n for (var ox = 0; ox <= 1; ox++) {\n var x = Math.max(0, Math.min(WIDTH - 1, x0 + ox)),\n y = Math.max(0, Math.min(HEIGHT - 1, y0 + oy)),\n w = (ox ? tx : 1 - tx) * (oy ? ty : 1 - ty),\n i = indexOf(x, y);\n vx += velocityX[i] * w;\n vy += velocityY[i] * w;\n }\n return { vx: vx, vy: vy };\n }\n function projectParticleMotionBilinear() {\n depositParticleVelocityBilinear();\n projectVelocity(false);\n enforceBoundaries(false);\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n if (!vesselMask[i]) velocityX[i] = velocityY[i] = 0;\n }\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n v = sampleProjectedVelocityBilinear(p);\n p.vx = p.vx * 0.52 + v.vx * 0.48;\n p.vy = p.vy * 0.52 + v.vy * 0.48;\n }\n }\n function runParticleVolumeSubstep() {\n updateParticleThermal();\n applyParticleVolumePressure();\n applyParticleForces();\n projectParticleMotionBilinear();\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n];\n p.x += p.vx * stepScale;\n p.y += p.vy * stepScale;\n collideParticle(p);\n }\n rasterizeWaxParticles();\n }\n function stepParticleVolume() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runParticleVolumeSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n recordCycleDiagnostics();\n analyzeBlobs(true, true);\n updateCourseDiagnostics();\n document.getElementById(\"shapedWaxMetric\").textContent = waxParticles.length;\n document.getElementById(\"shapedBlobMetric\").textContent =\n document.getElementById(\"blobCountMetric\").textContent;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n function projectParticleMotion() {\n velocityX.fill(0);\n velocityY.fill(0);\n var counts = new Float32Array(WIDTH * HEIGHT);\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n x = Math.round(p.x),\n y = Math.round(p.y),\n i = indexOf(Math.max(0, Math.min(WIDTH - 1, x)), Math.max(0, Math.min(HEIGHT - 1, y)));\n velocityX[i] += p.vx;\n velocityY[i] += p.vy;\n counts[i]++;\n }\n for (var i = 0; i < counts.length; i++)\n if (counts[i]) {\n velocityX[i] /= counts[i];\n velocityY[i] /= counts[i];\n }\n projectVelocity(false);\n enforceBoundaries(false);\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n if (!vesselMask[i]) velocityX[i] = velocityY[i] = 0;\n }\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n],\n i = indexOf(\n Math.max(0, Math.min(WIDTH - 1, Math.round(p.x))),\n Math.max(0, Math.min(HEIGHT - 1, Math.round(p.y))),\n );\n p.vx = p.vx * 0.55 + velocityX[i] * 0.45;\n p.vy = p.vy * 0.55 + velocityY[i] * 0.45;\n }\n }\n function runShapedLampSubstep() {\n updateParticleThermal();\n applyParticleForces();\n projectParticleMotion();\n for (var n = 0; n < waxParticles.length; n++) {\n var p = waxParticles[n];\n p.x += p.vx * stepScale;\n p.y += p.vy * stepScale;\n collideParticle(p);\n }\n rasterizeWaxParticles();\n }\n function stepShapedLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runShapedLampSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n recordCycleDiagnostics();\n analyzeBlobs(true, true);\n updateCourseDiagnostics();\n document.getElementById(\"shapedWaxMetric\").textContent = waxParticles.length;\n document.getElementById(\"shapedBlobMetric\").textContent =\n document.getElementById(\"blobCountMetric\").textContent;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n function stepRemainingLesson() {\n stepBlobIdentityLamp();\n updateCourseDiagnostics();\n }\n\n // DIAGNOSTICS, CONSERVATION, AND RUNTIME\n\n function recordCycleDiagnostics() {\n var total = 0,\n heightSum = 0,\n rising = 0,\n falling = 0;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y),\n w = wax[i];\n total += w;\n heightSum += w * (1 - y / (HEIGHT - 1));\n if (velocityY[i] < -0.03) rising += w;\n else if (velocityY[i] > 0.03) falling += w;\n }\n var height = total > 0 ? heightSum / total : 0;\n cycleHistory.push(height);\n if (cycleHistory.length > 100) cycleHistory.shift();\n document.getElementById(\"waxHeightMetric\").textContent = Math.round(height * 100) + \"%\";\n document.getElementById(\"risingMetric\").textContent =\n Math.round((total ? rising / total : 0) * 100) + \"%\";\n document.getElementById(\"fallingMetric\").textContent =\n Math.round((total ? falling / total : 0) * 100) + \"%\";\n var chart = document.getElementById(\"cycleChart\"),\n c = chart.getContext(\"2d\"),\n w = chart.width,\n h = chart.height;\n c.clearRect(0, 0, w, h);\n c.fillStyle = \"#0b1017\";\n c.fillRect(0, 0, w, h);\n c.strokeStyle = \"#303640\";\n c.lineWidth = 1;\n for (var g = 1; g < 4; g++) {\n var gy = (g * h) / 4;\n c.beginPath();\n c.moveTo(0, gy);\n c.lineTo(w, gy);\n c.stroke();\n }\n if (cycleHistory.length > 1) {\n c.strokeStyle = \"#50a7ff\";\n c.lineWidth = 2;\n c.beginPath();\n for (var n = 0; n < cycleHistory.length; n++) {\n var px = (n * w) / 99,\n py = h - 4 - cycleHistory[n] * (h - 8);\n if (n === 0) c.moveTo(px, py);\n else c.lineTo(px, py);\n }\n c.stroke();\n }\n }\n function stepCycleDiagnosticsLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runClosedVesselSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n recordCycleDiagnostics();\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function runClosedVesselSubstep() {\n var targetWax = totalWax();\n runEnergyBudgetSubstep();\n correctWaxMass(targetWax, 1);\n document.getElementById(\"inventoryMetric\").textContent = totalWax().toFixed(1);\n }\n function stepClosedVesselLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runClosedVesselSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function runEnergyBudgetSubstep() {\n var start = totalThermalEnergy(),\n targetWax = totalWax();\n addUnevenBottomHeat();\n var afterHeater = totalThermalEnergy();\n var ambientKeep = 1 - +cooling.value * stepScale;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n var afterCooling = totalThermalEnergy();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n detectAndPinchNecks();\n sharpenWaxInterface();\n correctWaxMass(targetWax, 1);\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n var finish = totalThermalEnergy(),\n energyIn = afterHeater - start,\n energyOut = afterCooling - afterHeater,\n drift = finish - afterCooling;\n var latent = 0;\n for (var i = 0; i < meltProgress.length; i++) latent += meltProgress[i];\n document.getElementById(\"energyInMetric\").textContent = \"+\" + energyIn.toFixed(3);\n document.getElementById(\"energyOutMetric\").textContent = energyOut.toFixed(3);\n document.getElementById(\"latentEnergyMetric\").textContent = latent.toFixed(3);\n document.getElementById(\"energyDriftMetric\").textContent =\n (drift >= 0 ? \"+\" : \"\") + drift.toFixed(3);\n }\n\n function stepEnergyBudgetLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runEnergyBudgetSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function runConservationSubstep() {\n var target = totalWax();\n addUnevenBottomHeat();\n var ambientKeep = 1 - +cooling.value * stepScale;\n for (var i = 0; i < temperature.length; i++) temperature[i] *= ambientKeep;\n diffuseTemperature();\n coolTemperatureAtWalls();\n applyLatentHeat();\n applyWaxDensityBuoyancy();\n applyLatentPhaseDrag();\n applySurfaceTension();\n diffuseVelocityByViscosity();\n projectVelocity(false);\n enforceBoundaries(false);\n advectTemperature();\n advectWax();\n advectMeltProgress();\n detectAndPinchNecks();\n sharpenWaxInterface();\n correctWaxMass(target, +conservationStrength.value);\n for (var i = 0; i < meltProgress.length; i++)\n meltProgress[i] = Math.min(meltProgress[i], wax[i]);\n }\n\n function stepConservationLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runConservationSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function stepPinchLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runPinchSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function stepUnevenLamp() {\n var count = +substeps.value;\n stepScale = +timeStep.value / count;\n for (var n = 0; n < count; n++) runUnevenSubstep();\n updateStabilityMetric();\n stepScale = 1;\n tickCount++;\n draw();\n updateReadout();\n updateSimulatorDiagnostics();\n }\n\n function updateSimulatorDiagnostics() {\n var waxTotal = 0,\n tempTotal = 0,\n meltTotal = 0,\n maxSpeed = 0;\n for (var i = 0; i < wax.length; i++) {\n waxTotal += wax[i];\n tempTotal += temperature[i];\n meltTotal += meltProgress[i];\n maxSpeed = Math.max(\n maxSpeed,\n Math.sqrt(velocityX[i] * velocityX[i] + velocityY[i] * velocityY[i]),\n );\n }\n document.getElementById(\"waxMetric\").textContent = waxTotal.toFixed(1);\n document.getElementById(\"tempMetric\").textContent = (tempTotal / temperature.length).toFixed(2);\n document.getElementById(\"meltMetric\").textContent = (\n waxTotal > 0 ? meltTotal / waxTotal : 0\n ).toFixed(2);\n document.getElementById(\"speedMetric\").textContent = maxSpeed.toFixed(2);\n }\n\n function stepFinalLamp() {\n stepStableLamp();\n updateSimulatorDiagnostics();\n }\n\n function setRunning(value) {\n running = value;\n document.getElementById(\"play\").textContent = running ? \"pause\" : \"play\";\n if (!running) animationAccumulator = 0;\n }\n\n function applyLampPreset() {\n var preset = lampPreset.value;\n if (preset === \"slow\") {\n heater.value = 0.08;\n cooling.value = 0.03;\n densityResponse.value = 0.8;\n surfaceTension.value = 0.5;\n hotViscosity.value = 0.2;\n coldViscosity.value = 0.5;\n timeStep.value = 0.75;\n substeps.value = 6;\n } else if (preset === \"active\") {\n heater.value = 0.2;\n cooling.value = 0.02;\n densityResponse.value = 1.8;\n surfaceTension.value = 0.25;\n hotViscosity.value = 0.05;\n coldViscosity.value = 0.35;\n timeStep.value = 1.25;\n substeps.value = 6;\n } else {\n heater.value = 0.12;\n cooling.value = 0.02;\n densityResponse.value = 1.2;\n surfaceTension.value = 0.35;\n hotViscosity.value = 0.1;\n coldViscosity.value = 0.45;\n timeStep.value = 1;\n substeps.value = 4;\n }\n document.getElementById(\"heaterOut\").textContent = (+heater.value).toFixed(2);\n document.getElementById(\"coolingOut\").textContent = Math.round(+cooling.value * 100) + \"%\";\n document.getElementById(\"densityOut\").textContent = (+densityResponse.value).toFixed(2);\n document.getElementById(\"surfaceOut\").textContent = (+surfaceTension.value).toFixed(2);\n document.getElementById(\"hotViscosityOut\").textContent =\n Math.round(+hotViscosity.value * 100) + \"%\";\n document.getElementById(\"coldViscosityOut\").textContent =\n Math.round(+coldViscosity.value * 100) + \"%\";\n document.getElementById(\"timeStepOut\").textContent = (+timeStep.value).toFixed(2);\n document.getElementById(\"substepsOut\").textContent = substeps.value;\n }\n\n function animationLoop(now) {\n if (!lastAnimationTime) lastAnimationTime = now;\n var elapsed = Math.min(0.25, (now - lastAnimationTime) / 1000);\n lastAnimationTime = now;\n if (\n running &&\n (mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\")\n ) {\n animationAccumulator += elapsed * +playbackRate.value;\n var safety = 0;\n while (animationAccumulator >= 1 && safety < 4) {\n if (mode === \"particleVolume\") stepParticleVolume();\n else if (mode === \"shapedLamp\") stepShapedLamp();\n else if (\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\"\n )\n stepRemainingLesson();\n else if (mode === \"blobIdentity\") stepBlobIdentityLamp();\n else if (mode === \"blobTracking\") stepBlobTrackingLamp();\n else if (mode === \"cycleDiagnostics\") stepCycleDiagnosticsLamp();\n else if (mode === \"closedVessel\") stepClosedVesselLamp();\n else if (mode === \"energyBudget\") stepEnergyBudgetLamp();\n else if (mode === \"conservation\") stepConservationLamp();\n else if (mode === \"pinchOff\") stepPinchLamp();\n else if (mode === \"unevenHeating\") stepUnevenLamp();\n else stepFinalLamp();\n animationAccumulator -= 1;\n safety++;\n }\n }\n requestAnimationFrame(animationLoop);\n }\n\n // FIELD RENDERING, ADVECTION, AND POINTER INPUT\n\n function colorForLatentWax(tempValue, waxValue, progress) {\n var liquid = waxValue > 0 ? Math.max(0, Math.min(1, progress / waxValue)) : 0;\n var phaseR = 150 + 90 * liquid,\n phaseG = 95 - 20 * liquid,\n phaseB = 205 - 55 * liquid;\n var baseR = 11,\n baseG = 16,\n baseB = 23;\n if (tempValue > 0) {\n baseR = 40 + 215 * tempValue;\n baseG = 35 + 95 * tempValue;\n baseB = 50 - 25 * tempValue;\n }\n return (\n \"rgb(\" +\n Math.round(baseR * (1 - waxValue) + phaseR * waxValue) +\n \",\" +\n Math.round(baseG * (1 - waxValue) + phaseG * waxValue) +\n \",\" +\n Math.round(baseB * (1 - waxValue) + phaseB * waxValue) +\n \")\"\n );\n }\n\n function colorForPhaseWax(tempValue, waxValue) {\n var liquid = liquidWaxFraction(tempValue);\n var phaseR = 150 + 90 * liquid,\n phaseG = 95 - 20 * liquid,\n phaseB = 205 - 55 * liquid;\n var baseR = 11,\n baseG = 16,\n baseB = 23;\n if (tempValue > 0) {\n baseR = 40 + 215 * tempValue;\n baseG = 35 + 95 * tempValue;\n baseB = 50 - 25 * tempValue;\n }\n return (\n \"rgb(\" +\n Math.round(baseR * (1 - waxValue) + phaseR * waxValue) +\n \",\" +\n Math.round(baseG * (1 - waxValue) + phaseG * waxValue) +\n \",\" +\n Math.round(baseB * (1 - waxValue) + phaseB * waxValue) +\n \")\"\n );\n }\n\n function colorForWax(tempValue, waxValue) {\n var baseR = 11,\n baseG = 16,\n baseB = 23;\n if (tempValue > 0) {\n baseR = 40 + 215 * tempValue;\n baseG = 35 + 95 * tempValue;\n baseB = 50 - 25 * tempValue;\n }\n var waxR = 224,\n waxG = 80,\n waxB = 170;\n return (\n \"rgb(\" +\n Math.round(baseR * (1 - waxValue) + waxR * waxValue) +\n \",\" +\n Math.round(baseG * (1 - waxValue) + waxG * waxValue) +\n \",\" +\n Math.round(baseB * (1 - waxValue) + waxB * waxValue) +\n \")\"\n );\n }\n\n function colorForTemperature(value) {\n if (value <= 0) return \"#0b1017\";\n var r = Math.round(40 + 215 * value),\n g = Math.round(35 + 95 * value),\n b = Math.round(50 - 25 * value);\n return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n }\n\n function seedDivergenceExample() {\n var source = { x: 8, y: 9 },\n sink = { x: 20, y: 9 };\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var sx = x - source.x,\n sy = y - source.y,\n sr = sx * sx + sy * sy + 3;\n var kx = x - sink.x,\n ky = y - sink.y,\n kr = kx * kx + ky * ky + 3;\n var vx = (5 * sx) / sr - (5 * kx) / kr,\n vy = (5 * sy) / sr - (5 * ky) / kr;\n var length = Math.sqrt(vx * vx + vy * vy);\n if (length > 1) {\n vx /= length;\n vy /= length;\n }\n velocityX[indexOf(x, y)] = vx;\n velocityY[indexOf(x, y)] = vy;\n }\n computeDivergence();\n }\n function velocityAt(array, x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n return array[indexOf(x, y)];\n }\n function computeDivergence() {\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var horizontal = (velocityAt(velocityX, x + 1, y) - velocityAt(velocityX, x - 1, y)) * 0.5;\n var vertical = (velocityAt(velocityY, x, y + 1) - velocityAt(velocityY, x, y - 1)) * 0.5;\n divergence[indexOf(x, y)] = horizontal + vertical;\n }\n }\n\n function scalarArrayAt(array, x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n return array[indexOf(x, y)];\n }\n function meanAbsoluteDivergence() {\n var total = 0;\n for (var i = 0; i < divergence.length; i++) total += Math.abs(divergence[i]);\n return total / divergence.length;\n }\n function updateProjectionMetric(before, after) {\n var metric = document.getElementById(\"projectionMetric\");\n if (!metric) return;\n metric.textContent =\n before === null ? after.toFixed(4) : before.toFixed(4) + \" → \" + after.toFixed(4);\n }\n function projectVelocity(commitUI) {\n computeDivergence();\n var before = meanAbsoluteDivergence();\n pressure.fill(0);\n pressureNext.fill(0);\n for (var iteration = 0; iteration < +iterations.value; iteration++) {\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n pressureNext[indexOf(x, y)] =\n (scalarArrayAt(pressure, x - 1, y) +\n scalarArrayAt(pressure, x + 1, y) +\n scalarArrayAt(pressure, x, y - 1) +\n scalarArrayAt(pressure, x, y + 1) -\n divergence[indexOf(x, y)]) /\n 4;\n }\n var swap = pressure;\n pressure = pressureNext;\n pressureNext = swap;\n }\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n velocityX[indexOf(x, y)] -=\n 0.5 * (scalarArrayAt(pressure, x + 1, y) - scalarArrayAt(pressure, x - 1, y));\n velocityY[indexOf(x, y)] -=\n 0.5 * (scalarArrayAt(pressure, x, y + 1) - scalarArrayAt(pressure, x, y - 1));\n }\n computeDivergence();\n var after = meanAbsoluteDivergence();\n updateProjectionMetric(before, after);\n if (commitUI !== false) {\n tickCount++;\n draw();\n updateReadout();\n }\n }\n\n // The math is intentionally kept behind this name for the first checkpoint.\n function diffuseScalarField(commitUI) {\n var strength = +rate.value;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var center = at(x, y),\n sum = 0,\n count = 0;\n if (x > 0) {\n sum += at(x - 1, y);\n count++;\n }\n if (x < WIDTH - 1) {\n sum += at(x + 1, y);\n count++;\n }\n if (y > 0) {\n sum += at(x, y - 1);\n count++;\n }\n if (y < HEIGHT - 1) {\n sum += at(x, y + 1);\n count++;\n }\n next[indexOf(x, y)] = center + strength * (sum / count - center);\n }\n var swap = field;\n field = next;\n next = swap;\n if (commitUI !== false) {\n tickCount++;\n draw();\n updateReadout();\n }\n }\n\n function sampleScalar(x, y) {\n x = Math.max(0, Math.min(WIDTH - 1, x));\n y = Math.max(0, Math.min(HEIGHT - 1, y));\n var x0 = Math.floor(x),\n y0 = Math.floor(y),\n x1 = Math.min(WIDTH - 1, x0 + 1),\n y1 = Math.min(HEIGHT - 1, y0 + 1);\n var tx = x - x0,\n ty = y - y0;\n var top = at(x0, y0) * (1 - tx) + at(x1, y0) * tx;\n var bottom = at(x0, y1) * (1 - tx) + at(x1, y1) * tx;\n return top * (1 - ty) + bottom * ty;\n }\n function advectScalarField(commitUI) {\n var stepDistance = +distance.value * stepScale;\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n var i = indexOf(x, y);\n next[i] = sampleScalar(x - velocityX[i] * stepDistance, y - velocityY[i] * stepDistance);\n }\n var swap = field;\n field = next;\n next = swap;\n if (commitUI !== false) {\n tickCount++;\n draw();\n updateReadout();\n }\n }\n function advectAndDiffuse() {\n advectScalarField(false);\n diffuseScalarField(false);\n tickCount++;\n draw();\n updateReadout();\n }\n\n function colorForDivergence(value) {\n var amount = Math.min(1, Math.abs(value) * 2.2);\n if (value > 0)\n return (\n \"rgb(\" +\n Math.round(22 + 145 * amount) +\n \",\" +\n Math.round(25 + 45 * amount) +\n \",\" +\n Math.round(34 + 25 * amount) +\n \")\"\n );\n if (value < 0)\n return (\n \"rgb(\" +\n Math.round(22 + 45 * amount) +\n \",\" +\n Math.round(25 + 35 * amount) +\n \",\" +\n Math.round(34 + 145 * amount) +\n \")\"\n );\n return \"#111821\";\n }\n function colorFor(value) {\n if (value <= 0) return \"#0b1017\";\n var r = Math.round(40 + value * 65),\n g = Math.round(105 + value * 110),\n b = Math.round(170 + value * 80);\n return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n }\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n for (var y = 0; y < HEIGHT; y++)\n for (var x = 0; x < WIDTH; x++) {\n ctx.fillStyle =\n mode === \"shapedLamp\" && !vesselMask[indexOf(x, y)]\n ? \"#05070a\"\n : mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ? colorForLatentWax(\n temperature[indexOf(x, y)],\n wax[indexOf(x, y)],\n meltProgress[indexOf(x, y)],\n )\n : mode === \"phaseWax\" || mode === \"interfaceWax\"\n ? colorForPhaseWax(temperature[indexOf(x, y)], wax[indexOf(x, y)])\n : mode === \"waxField\" || mode === \"densityWax\"\n ? colorForWax(temperature[indexOf(x, y)], wax[indexOf(x, y)])\n : mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\"\n ? colorForTemperature(temperature[indexOf(x, y)])\n : mode === \"boundaries\" && isBoundaryLeak(x, y)\n ? \"#6b2929\"\n : mode === \"boundaries\" &&\n (x === 0 || x === WIDTH - 1 || y === 0 || y === HEIGHT - 1)\n ? \"#343b45\"\n : mode === \"divergence\" || mode === \"projection\"\n ? colorForDivergence(divergence[indexOf(x, y)])\n : mode === \"grid\" || mode === \"velocity\" || mode === \"boundaries\"\n ? \"#111821\"\n : colorFor(at(x, y));\n ctx.fillRect(x * CELL, y * CELL, CELL, CELL);\n ctx.strokeStyle =\n (mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\") &&\n blobLabels[indexOf(x, y)] >= 0\n ? [\"#50a7ff\", \"#ffd166\", \"#ef6f9a\", \"#75d39b\", \"#b28cff\", \"#ff9f5a\"][\n blobLabels[indexOf(x, y)] % 6\n ]\n : mode === \"pinchOff\" && neckMask[indexOf(x, y)]\n ? \"#7de3ff\"\n : mode === \"surfaceWax\" && wax[indexOf(x, y)] > 0.05 && wax[indexOf(x, y)] < 0.95\n ? \"#7de3ff\"\n : \"#28313c\";\n ctx.strokeRect(x * CELL + 0.5, y * CELL + 0.5, CELL - 1, CELL - 1);\n }\n if (mode === \"shapedLamp\" || mode === \"particleVolume\") drawWaxParticles();\n if (\n mode === \"velocity\" ||\n mode === \"advection\" ||\n mode === \"transportDiffusion\" ||\n mode === \"divergence\" ||\n mode === \"projection\" ||\n mode === \"boundaries\" ||\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ) {\n for (var y = 0; y < HEIGHT; y += 2)\n for (var x = 0; x < WIDTH; x += 2) {\n var vx = velocityX[indexOf(x, y)],\n vy = velocityY[indexOf(x, y)];\n drawArrow(x * CELL + CELL / 2, y * CELL + CELL / 2, vx * CELL * 0.72, vy * CELL * 0.72);\n }\n if (mode === \"boundaries\") {\n for (var x = 0; x < WIDTH; x++) {\n drawArrow(\n x * CELL + CELL / 2,\n CELL / 2,\n velocityX[indexOf(x, 0)] * CELL * 0.72,\n velocityY[indexOf(x, 0)] * CELL * 0.72,\n );\n drawArrow(\n x * CELL + CELL / 2,\n (HEIGHT - 1) * CELL + CELL / 2,\n velocityX[indexOf(x, HEIGHT - 1)] * CELL * 0.72,\n velocityY[indexOf(x, HEIGHT - 1)] * CELL * 0.72,\n );\n }\n for (var y = 1; y < HEIGHT - 1; y++) {\n drawArrow(\n CELL / 2,\n y * CELL + CELL / 2,\n velocityX[indexOf(0, y)] * CELL * 0.72,\n velocityY[indexOf(0, y)] * CELL * 0.72,\n );\n drawArrow(\n (WIDTH - 1) * CELL + CELL / 2,\n y * CELL + CELL / 2,\n velocityX[indexOf(WIDTH - 1, y)] * CELL * 0.72,\n velocityY[indexOf(WIDTH - 1, y)] * CELL * 0.72,\n );\n }\n }\n if (selected)\n drawArrow(\n selected.x * CELL + CELL / 2,\n selected.y * CELL + CELL / 2,\n velocityX[indexOf(selected.x, selected.y)] * CELL * 0.72,\n velocityY[indexOf(selected.x, selected.y)] * CELL * 0.72,\n true,\n );\n }\n if (selected) {\n ctx.strokeStyle = \"#ffd166\";\n ctx.lineWidth = 3;\n ctx.strokeRect(selected.x * CELL + 2, selected.y * CELL + 2, CELL - 4, CELL - 4);\n ctx.lineWidth = 1;\n }\n }\n function drawArrow(x, y, dx, dy, highlight) {\n var endX = x + dx,\n endY = y + dy,\n angle = Math.atan2(dy, dx),\n head = 4;\n ctx.strokeStyle = highlight ? \"#ffd166\" : \"#50a7ff\";\n ctx.fillStyle = ctx.strokeStyle;\n ctx.lineWidth = highlight ? 2.5 : 1.4;\n ctx.beginPath();\n ctx.moveTo(x, y);\n ctx.lineTo(endX, endY);\n ctx.stroke();\n if (Math.abs(dx) + Math.abs(dy) > 0.01) {\n ctx.beginPath();\n ctx.moveTo(endX, endY);\n ctx.lineTo(endX - head * Math.cos(angle - 0.55), endY - head * Math.sin(angle - 0.55));\n ctx.lineTo(endX - head * Math.cos(angle + 0.55), endY - head * Math.sin(angle + 0.55));\n ctx.closePath();\n ctx.fill();\n }\n ctx.lineWidth = 1;\n }\n function cellFromEvent(event) {\n var rect = canvas.getBoundingClientRect();\n return {\n x: Math.max(\n 0,\n Math.min(\n WIDTH - 1,\n Math.floor(((event.clientX - rect.left) * canvas.width) / rect.width / CELL),\n ),\n ),\n y: Math.max(\n 0,\n Math.min(\n HEIGHT - 1,\n Math.floor(((event.clientY - rect.top) * canvas.height) / rect.height / CELL),\n ),\n ),\n };\n }\n function relocateWax(cell) {\n if (mode === \"shapedLamp\" && !vesselMask[indexOf(cell.x, cell.y)]) return 0;\n var target = indexOf(cell.x, cell.y),\n needed = 1 - wax[target],\n moved = 0;\n if (needed <= 0) return 0;\n for (var y = HEIGHT - 2; y >= 1 && needed > 1e-6; y--)\n for (var x = 1; x < WIDTH - 1 && needed > 1e-6; x++) {\n var donor = indexOf(x, y);\n if (donor === target || wax[donor] <= 0) continue;\n var take = Math.min(needed, wax[donor]);\n var ratio = wax[donor] > 0 ? take / wax[donor] : 0;\n wax[donor] -= take;\n meltProgress[donor] *= 1 - ratio;\n wax[target] += take;\n needed -= take;\n moved += take;\n }\n document.getElementById(\"inventoryMetric\").textContent = totalWax().toFixed(1);\n document.getElementById(\"movedWaxMetric\").textContent = moved.toFixed(2);\n return moved;\n }\n\n function interact(event) {\n var cell = cellFromEvent(event);\n if (\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ) {\n selected = cell;\n if (painting || event.type === \"pointerdown\") relocateWax(cell);\n } else if (\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ) {\n selected = cell;\n if (painting || event.type === \"pointerdown\") wax[indexOf(cell.x, cell.y)] = 1;\n } else if (\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\"\n ) {\n selected = cell;\n if (painting || event.type === \"pointerdown\") temperature[indexOf(cell.x, cell.y)] = 1;\n } else if (\n mode === \"velocity\" ||\n mode === \"divergence\" ||\n mode === \"projection\" ||\n mode === \"boundaries\"\n ) {\n if (!vectorOrigin) vectorOrigin = cell;\n selected = vectorOrigin;\n var dx = cell.x - vectorOrigin.x,\n dy = cell.y - vectorOrigin.y,\n length = Math.sqrt(dx * dx + dy * dy);\n if (length > 0) {\n velocityX[indexOf(selected.x, selected.y)] = dx / length;\n velocityY[indexOf(selected.x, selected.y)] = dy / length;\n if (mode === \"divergence\" || mode === \"projection\") {\n computeDivergence();\n if (mode === \"projection\") updateProjectionMetric(null, meanAbsoluteDivergence());\n }\n if (mode === \"boundaries\") updateBoundaryMetric(null, countBoundaryLeaks());\n }\n } else {\n selected = cell;\n if (mode !== \"grid\" && (painting || event.type === \"pointerdown\")) set(cell.x, cell.y, 1);\n }\n draw();\n updateReadout();\n }\n function updateReadout() {\n document.getElementById(\"coordinate\").textContent = selected\n ? \"(\" + selected.x + \", \" + selected.y + \")\"\n : \"—\";\n document.getElementById(\"index\").textContent = selected ? indexOf(selected.x, selected.y) : \"—\";\n document.getElementById(\"value\").textContent = selected\n ? mode === \"divergence\" || mode === \"projection\"\n ? divergence[indexOf(selected.x, selected.y)].toFixed(3)\n : mode === \"velocity\" || mode === \"boundaries\"\n ? \"(\" +\n velocityX[indexOf(selected.x, selected.y)].toFixed(2) +\n \", \" +\n velocityY[indexOf(selected.x, selected.y)].toFixed(2) +\n \")\"\n : mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n ? \"wax \" +\n wax[indexOf(selected.x, selected.y)].toFixed(2) +\n \" / speed \" +\n Math.sqrt(\n velocityX[indexOf(selected.x, selected.y)] ** 2 +\n velocityY[indexOf(selected.x, selected.y)] ** 2,\n ).toFixed(2)\n : mode === \"viscosityWax\"\n ? \"wax \" +\n wax[indexOf(selected.x, selected.y)].toFixed(2) +\n \" / visc \" +\n viscosityAtIndex(indexOf(selected.x, selected.y)).toFixed(2)\n : mode === \"surfaceWax\"\n ? \"wax \" +\n wax[indexOf(selected.x, selected.y)].toFixed(2) +\n \" / curve \" +\n surfaceCurvature[indexOf(selected.x, selected.y)].toFixed(2)\n : mode === \"latentWax\"\n ? \"melt \" +\n (wax[indexOf(selected.x, selected.y)] > 0\n ? meltProgress[indexOf(selected.x, selected.y)] /\n wax[indexOf(selected.x, selected.y)]\n : 0\n ).toFixed(2) +\n \" / temp \" +\n temperature[indexOf(selected.x, selected.y)].toFixed(2)\n : mode === \"phaseWax\" || mode === \"interfaceWax\"\n ? \"wax \" +\n wax[indexOf(selected.x, selected.y)].toFixed(2) +\n \" / liquid \" +\n liquidWaxFraction(temperature[indexOf(selected.x, selected.y)]).toFixed(2) +\n \" / temp \" +\n temperature[indexOf(selected.x, selected.y)].toFixed(2)\n : mode === \"waxField\" || mode === \"densityWax\"\n ? \"wax \" +\n wax[indexOf(selected.x, selected.y)].toFixed(2) +\n \" / temp \" +\n temperature[indexOf(selected.x, selected.y)].toFixed(2)\n : mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\"\n ? temperature[indexOf(selected.x, selected.y)].toFixed(3) +\n \" / vy \" +\n velocityY[indexOf(selected.x, selected.y)].toFixed(2)\n : at(selected.x, selected.y).toFixed(3)\n : \"—\";\n document.getElementById(\"ticks\").textContent = tickCount;\n }\n\n // LESSON CONTROLLER AND DOM EVENTS\n\n function selectMode(nextMode) {\n if (\n (mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\") &&\n nextMode !== mode\n )\n setRunning(false);\n mode = nextMode;\n var c = copy[mode];\n document.querySelectorAll(\".lesson-button\").forEach(function (b) {\n b.classList.toggle(\"active\", b.dataset.mode === mode);\n });\n document.getElementById(\"sectionNumber\").textContent = c.number;\n document.getElementById(\"sectionTitle\").textContent = c.title;\n document.getElementById(\"sectionText\").textContent = c.text;\n document.getElementById(\"instruction\").textContent = c.instruction;\n document.getElementById(\"code\").innerHTML = c.code;\n document.getElementById(\"notice\").textContent = c.notice;\n document.getElementById(\"notYet\").textContent = c.notYet;\n document.getElementById(\"advance\").disabled = !(\n mode === \"diffusion\" ||\n mode === \"advection\" ||\n mode === \"transportDiffusion\" ||\n mode === \"projection\" ||\n mode === \"boundaries\" ||\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\"\n );\n document\n .getElementById(\"diffusionControl\")\n .classList.toggle(\"visible\", mode === \"diffusion\" || mode === \"transportDiffusion\");\n document\n .getElementById(\"advectionControl\")\n .classList.toggle(\n \"visible\",\n mode === \"advection\" ||\n mode === \"transportDiffusion\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document.getElementById(\"projectionControl\").classList.toggle(\"visible\", mode === \"projection\");\n document.getElementById(\"boundaryControl\").classList.toggle(\"visible\", mode === \"boundaries\");\n document\n .getElementById(\"buoyancyControl\")\n .classList.toggle(\n \"visible\",\n mode === \"temperature\" ||\n mode === \"thermalFlow\" ||\n mode === \"coupledThermal\" ||\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\",\n );\n document\n .getElementById(\"heatCycleControl\")\n .classList.toggle(\n \"visible\",\n mode === \"heatedFlow\" ||\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"conductionControl\")\n .classList.toggle(\n \"visible\",\n mode === \"conductiveFlow\" ||\n mode === \"waxField\" ||\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"densityControl\")\n .classList.toggle(\n \"visible\",\n mode === \"densityWax\" ||\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"phaseControl\")\n .classList.toggle(\n \"visible\",\n mode === \"phaseWax\" ||\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"interfaceControl\")\n .classList.toggle(\n \"visible\",\n mode === \"interfaceWax\" ||\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"latentControl\")\n .classList.toggle(\n \"visible\",\n mode === \"latentWax\" ||\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"surfaceControl\")\n .classList.toggle(\n \"visible\",\n mode === \"surfaceWax\" ||\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"viscosityControl\")\n .classList.toggle(\n \"visible\",\n mode === \"viscosityWax\" ||\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"stabilityControl\")\n .classList.toggle(\n \"visible\",\n mode === \"stableLamp\" ||\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"simulatorControl\")\n .classList.toggle(\n \"visible\",\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document\n .getElementById(\"unevenControl\")\n .classList.toggle(\"visible\", mode === \"unevenHeating\" || mode === \"pinchOff\");\n document\n .getElementById(\"pinchControl\")\n .classList.toggle(\"visible\", mode === \"pinchOff\" || mode === \"conservation\");\n document\n .getElementById(\"conservationControl\")\n .classList.toggle(\"visible\", mode === \"conservation\");\n document\n .getElementById(\"energyBudgetControl\")\n .classList.toggle(\"visible\", mode === \"energyBudget\");\n document\n .getElementById(\"closedVesselControl\")\n .classList.toggle(\"visible\", mode === \"closedVessel\" || mode === \"cycleDiagnostics\");\n document\n .getElementById(\"cycleDiagnosticsControl\")\n .classList.toggle(\"visible\", mode === \"cycleDiagnostics\" || mode === \"blobTracking\");\n document\n .getElementById(\"blobTrackingControl\")\n .classList.toggle(\"visible\", mode === \"blobTracking\" || mode === \"blobIdentity\");\n document\n .getElementById(\"blobIdentityControl\")\n .classList.toggle(\"visible\", mode === \"blobIdentity\" || mode === \"motionMatch\");\n document\n .getElementById(\"motionMatchControl\")\n .classList.toggle(\"visible\", mode === \"motionMatch\");\n document\n .getElementById(\"calibrationControl\")\n .classList.toggle(\"visible\", mode === \"calibration\");\n document\n .getElementById(\"physicalUnitsControl\")\n .classList.toggle(\"visible\", mode === \"physicalUnits\");\n document.getElementById(\"finalLampControl\").classList.toggle(\"visible\", mode === \"finalLamp\");\n document\n .getElementById(\"shapedLampControl\")\n .classList.toggle(\"visible\", mode === \"shapedLamp\" || mode === \"particleVolume\");\n document\n .getElementById(\"particleVolumeControl\")\n .classList.toggle(\"visible\", mode === \"particleVolume\");\n document\n .getElementById(\"play\")\n .classList.toggle(\n \"visible\",\n mode === \"simulator\" ||\n mode === \"unevenHeating\" ||\n mode === \"pinchOff\" ||\n mode === \"conservation\" ||\n mode === \"energyBudget\" ||\n mode === \"closedVessel\" ||\n mode === \"cycleDiagnostics\" ||\n mode === \"blobTracking\" ||\n mode === \"blobIdentity\" ||\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\" ||\n mode === \"shapedLamp\" ||\n mode === \"particleVolume\",\n );\n document.querySelectorAll(\".step\").forEach(function (s, i) {\n var current =\n mode === \"particleVolume\"\n ? i === 34\n : mode === \"shapedLamp\"\n ? i === 33\n : mode === \"finalLamp\"\n ? i === 32\n : mode === \"physicalUnits\"\n ? i === 31\n : mode === \"calibration\"\n ? i === 30\n : mode === \"motionMatch\"\n ? i === 29\n : mode === \"blobIdentity\"\n ? i === 28\n : mode === \"blobTracking\"\n ? i === 27\n : mode === \"cycleDiagnostics\"\n ? i === 26\n : mode === \"closedVessel\"\n ? i === 25\n : mode === \"energyBudget\"\n ? i === 24\n : mode === \"conservation\"\n ? i === 23\n : mode === \"pinchOff\"\n ? i === 22\n : mode === \"unevenHeating\"\n ? i === 21\n : mode === \"simulator\"\n ? i === 20\n : mode === \"stableLamp\"\n ? i === 19\n : mode === \"viscosityWax\"\n ? i === 18\n : mode === \"surfaceWax\"\n ? i === 17\n : mode === \"latentWax\"\n ? i === 16\n : mode === \"interfaceWax\"\n ? i === 15\n : mode === \"phaseWax\"\n ? i === 14\n : mode === \"densityWax\"\n ? i === 13\n : mode === \"waxField\"\n ? i === 12\n : mode === \"conductiveFlow\"\n ? i === 11\n : mode === \"heatedFlow\"\n ? i === 10\n : mode === \"coupledThermal\"\n ? i === 9\n : mode === \"thermalFlow\"\n ? i === 8\n : mode === \"temperature\"\n ? i === 7\n : mode === \"boundaries\"\n ? i === 6\n : mode === \"projection\"\n ? i === 5\n : mode === \"divergence\"\n ? i === 4\n : mode ===\n \"transportDiffusion\"\n ? i === 3\n : mode === \"advection\"\n ? i === 2\n : mode === \"velocity\"\n ? i === 1\n : i === 0;\n s.classList.toggle(\"current\", current);\n });\n document.getElementById(\"truth\").innerHTML =\n mode === \"particleVolume\"\n ? \"Current claim: neighbor-density pressure preserves finite wax volume while cohesion keeps it connected.\"\n : mode === \"shapedLamp\"\n ? \"Current claim: tapered walls and localized heating can return falling wax to a repeating collection-and-launch cycle.\"\n : mode === \"finalLamp\"\n ? \"Current claim: this is the complete educational lava-lamp simulator assembled from the preceding fields, forces, constraints, and diagnostics.\"\n : mode === \"physicalUnits\"\n ? \"Current claim: reference length and time scales convert normalized motion into an interpretable physical speed.\"\n : mode === \"calibration\"\n ? \"Current claim: useful lava-lamp behavior occupies a coordinated parameter regime rather than one magic coefficient.\"\n : mode === \"motionMatch\"\n ? \"Current claim: a spatial tolerance can preserve identity when a blob moves beyond direct cell overlap.\"\n : mode === \"blobIdentity\"\n ? \"Current claim: spatial overlap can preserve a derived blob identity across successive field states.\"\n : mode === \"blobTracking\"\n ? \"Current claim: blobs are connected components derived from the wax-fraction field at a chosen threshold.\"\n : mode === \"cycleDiagnostics\"\n ? \"Current claim: repeated changes in wax center height reveal a circulation cycle that no single simulation frame can establish.\"\n : mode === \"closedVessel\"\n ? \"Current claim: wax fraction and carrier fraction sum to one in every cell, while the closed lamp keeps one fixed total wax inventory.\"\n : mode === \"energyBudget\"\n ? \"Current claim: thermal energy changes because the lamp is an open system; its change can be separated into heater input, cooling loss, latent storage, and numerical drift.\"\n : mode === \"conservation\"\n ? \"Current claim: local field values may change freely while a global correction keeps their total wax constant.\"\n : mode === \"pinchOff\"\n ? \"Current claim: a conservative topology correction can teach pinch-off on a grid too coarse to resolve the physical instability directly.\"\n : mode === \"unevenHeating\"\n ? \"Current claim: small deterministic heater differences break symmetry and seed localized buoyant wax regions from a shared bottom pool.\"\n : mode === \"simulator\"\n ? \"Current claim: this continuously runs the complete educational lava-lamp timestep with coherent presets and live stability diagnostics.\"\n : mode === \"stableLamp\"\n ? \"Current claim: subdividing the same frame time recomputes coupled fields more frequently and reduces per-substep travel.\"\n : mode === \"viscosityWax\"\n ? \"Current claim: phase-dependent viscosity smooths neighboring velocity differences at a rate derived from material and melt progress.\"\n : mode === \"surfaceWax\"\n ? \"Current claim: an interface-normal and curvature estimate can create a surface force that encourages coherent wax blobs.\"\n : mode === \"latentWax\"\n ? \"Current claim: latent heat allows phase progress to change while temperature remains near the melting point.\"\n : mode === \"interfaceWax\"\n ? \"Current claim: fractional wax cells must render fractionally, and interface sharpening can counter numerical smearing at a conservation cost.\"\n : mode === \"phaseWax\"\n ? \"Current claim: wax identity can remain constant while a temperature-derived liquid fraction controls resistance to motion.\"\n : mode === \"densityWax\"\n ? \"Current claim: combining wax fraction with temperature produces a signed density force: hot wax rises and cold wax sinks relative to the carrier.\"\n : mode === \"waxField\"\n ? \"Current claim: material identity can be stored as a scalar fraction and transported independently from temperature through the same velocity field.\"\n : mode === \"conductiveFlow\"\n ? \"Current claim: conduction spreads temperature through neighbor exchange while wall cooling removes heat at the domain boundary.\"\n : mode === \"heatedFlow\"\n ? \"Current claim: sustained thermal motion depends on the balance between heat added each step and heat lost each step.\"\n : mode === \"coupledThermal\"\n ? \"Current claim: projection spreads a local buoyant push into a coherent velocity field before advection transports temperature.\"\n : mode === \"thermalFlow\"\n ? \"Current claim: buoyancy changes velocity, then advection uses that velocity to carry the temperature field upward.\"\n : mode === \"temperature\"\n ? \"Current claim: a temperature scalar field can add upward velocity through a buoyancy force.\"\n : mode === \"boundaries\"\n ? \"Current claim: no-through boundary enforcement removes outward wall-normal velocity while preserving tangential motion.\"\n : mode === \"projection\"\n ? \"Current claim: an iterative pressure solve reduces the measured divergence when its gradient is removed from velocity.\"\n : mode === \"divergence\"\n ? \"Current claim: this computes discrete divergence from the velocity field and visualizes sources and sinks.\"\n : mode === \"transportDiffusion\"\n ? \"Current claim: each step transports the dye, then diffuses it into neighboring cells.\"\n : mode === \"advection\"\n ? \"Current claim: this transports a scalar field through a fixed velocity field, one discrete step at a time.\"\n : mode === \"velocity\"\n ? \"Current claim: this stores and renders a velocity vector in each cell. It does not move dye yet.\"\n : \"Current claim: this demonstrates a grid, a scalar field, and neighbor-based smoothing. It is not yet a fluid simulation.\";\n if (mode === \"finalLamp\") {\n document.querySelectorAll(\".slider\").forEach(function (x) {\n x.classList.remove(\"visible\");\n });\n document.getElementById(\"simulatorControl\").classList.add(\"visible\");\n document.getElementById(\"finalLampControl\").classList.add(\"visible\");\n }\n if (mode === \"particleVolume\") {\n document.querySelectorAll(\".slider\").forEach(function (x) {\n x.classList.remove(\"visible\");\n });\n document.getElementById(\"simulatorControl\").classList.add(\"visible\");\n document.getElementById(\"heatCycleControl\").classList.add(\"visible\");\n document.getElementById(\"shapedLampControl\").classList.add(\"visible\");\n document.getElementById(\"particleVolumeControl\").classList.add(\"visible\");\n }\n if (mode === \"shapedLamp\") {\n document.querySelectorAll(\".slider\").forEach(function (x) {\n x.classList.remove(\"visible\");\n });\n document.getElementById(\"simulatorControl\").classList.add(\"visible\");\n document.getElementById(\"heatCycleControl\").classList.add(\"visible\");\n document.getElementById(\"shapedLampControl\").classList.add(\"visible\");\n }\n draw();\n updateReadout();\n }\n\n canvas.addEventListener(\"pointerdown\", function (e) {\n painting = true;\n canvas.setPointerCapture(e.pointerId);\n interact(e);\n });\n canvas.addEventListener(\"pointermove\", function (e) {\n if (painting) interact(e);\n });\n canvas.addEventListener(\"pointerup\", function () {\n painting = false;\n vectorOrigin = null;\n });\n document.querySelectorAll(\".lesson-button\").forEach(function (b) {\n b.addEventListener(\"click\", function () {\n selectMode(b.dataset.mode);\n });\n });\n document.getElementById(\"clear\").addEventListener(\"click\", clearCurrent);\n document.getElementById(\"seed\").addEventListener(\"click\", function () {\n seedCurrent();\n if (mode === \"blobTracking\") analyzeBlobs(false);\n });\n document.getElementById(\"advance\").addEventListener(\"click\", function () {\n if (mode === \"diffusion\") diffuseScalarField();\n else if (mode === \"advection\") advectScalarField();\n else if (mode === \"transportDiffusion\") advectAndDiffuse();\n else if (mode === \"projection\") projectVelocity();\n else if (mode === \"boundaries\") enforceBoundaries();\n else if (mode === \"temperature\") applyBuoyancy();\n else if (mode === \"thermalFlow\") stepRisingHeat();\n else if (mode === \"coupledThermal\") stepCoupledThermal();\n else if (mode === \"heatedFlow\") stepHeatedFlow();\n else if (mode === \"conductiveFlow\") stepConductiveFlow();\n else if (mode === \"waxField\") stepWaxTransport();\n else if (mode === \"densityWax\") stepDensityWax();\n else if (mode === \"phaseWax\") stepPhaseWax();\n else if (mode === \"interfaceWax\") stepInterfaceWax();\n else if (mode === \"latentWax\") stepLatentWax();\n else if (mode === \"surfaceWax\") stepSurfaceWax();\n else if (mode === \"viscosityWax\") stepViscosityWax();\n else if (mode === \"stableLamp\") stepStableLamp();\n else if (mode === \"simulator\") stepFinalLamp();\n else if (mode === \"unevenHeating\") stepUnevenLamp();\n else if (mode === \"pinchOff\") stepPinchLamp();\n else if (mode === \"conservation\") stepConservationLamp();\n else if (mode === \"energyBudget\") stepEnergyBudgetLamp();\n else if (mode === \"closedVessel\") stepClosedVesselLamp();\n else if (mode === \"cycleDiagnostics\") stepCycleDiagnosticsLamp();\n else if (mode === \"blobTracking\") stepBlobTrackingLamp();\n else if (mode === \"blobIdentity\") stepBlobIdentityLamp();\n else if (\n mode === \"motionMatch\" ||\n mode === \"calibration\" ||\n mode === \"physicalUnits\" ||\n mode === \"finalLamp\"\n )\n stepRemainingLesson();\n else if (mode === \"shapedLamp\") stepShapedLamp();\n else if (mode === \"particleVolume\") stepParticleVolume();\n });\n rate.addEventListener(\"input\", function () {\n document.getElementById(\"rateOut\").textContent = Math.round(+rate.value * 100) + \"%\";\n });\n distance.addEventListener(\"input\", function () {\n document.getElementById(\"distanceOut\").textContent = (+distance.value).toFixed(2) + \" cells\";\n });\n iterations.addEventListener(\"input\", function () {\n document.getElementById(\"iterationsOut\").textContent = iterations.value;\n });\n buoyancy.addEventListener(\"input\", function () {\n document.getElementById(\"buoyancyOut\").textContent = (+buoyancy.value).toFixed(2);\n });\n heater.addEventListener(\"input\", function () {\n document.getElementById(\"heaterOut\").textContent = (+heater.value).toFixed(2);\n });\n cooling.addEventListener(\"input\", function () {\n document.getElementById(\"coolingOut\").textContent = Math.round(+cooling.value * 100) + \"%\";\n });\n conduction.addEventListener(\"input\", function () {\n document.getElementById(\"conductionOut\").textContent =\n Math.round(+conduction.value * 100) + \"%\";\n });\n wallCooling.addEventListener(\"input\", function () {\n document.getElementById(\"wallCoolingOut\").textContent =\n Math.round(+wallCooling.value * 100) + \"%\";\n });\n neutralTemp.addEventListener(\"input\", function () {\n document.getElementById(\"neutralOut\").textContent = (+neutralTemp.value).toFixed(2);\n });\n densityResponse.addEventListener(\"input\", function () {\n document.getElementById(\"densityOut\").textContent = (+densityResponse.value).toFixed(2);\n });\n meltTemp.addEventListener(\"input\", function () {\n document.getElementById(\"meltOut\").textContent = (+meltTemp.value).toFixed(2);\n });\n transitionWidth.addEventListener(\"input\", function () {\n document.getElementById(\"transitionOut\").textContent = (+transitionWidth.value).toFixed(2);\n });\n solidDrag.addEventListener(\"input\", function () {\n document.getElementById(\"solidDragOut\").textContent = Math.round(+solidDrag.value * 100) + \"%\";\n });\n interfaceSharpness.addEventListener(\"input\", function () {\n document.getElementById(\"interfaceOut\").textContent =\n Math.round(+interfaceSharpness.value * 100) + \"%\";\n });\n latentCoupling.addEventListener(\"input\", function () {\n document.getElementById(\"latentOut\").textContent =\n Math.round(+latentCoupling.value * 100) + \"%\";\n });\n surfaceTension.addEventListener(\"input\", function () {\n document.getElementById(\"surfaceOut\").textContent = (+surfaceTension.value).toFixed(2);\n });\n carrierViscosity.addEventListener(\"input\", function () {\n document.getElementById(\"carrierViscosityOut\").textContent =\n Math.round(+carrierViscosity.value * 100) + \"%\";\n });\n hotViscosity.addEventListener(\"input\", function () {\n document.getElementById(\"hotViscosityOut\").textContent =\n Math.round(+hotViscosity.value * 100) + \"%\";\n });\n coldViscosity.addEventListener(\"input\", function () {\n document.getElementById(\"coldViscosityOut\").textContent =\n Math.round(+coldViscosity.value * 100) + \"%\";\n });\n timeStep.addEventListener(\"input\", function () {\n document.getElementById(\"timeStepOut\").textContent = (+timeStep.value).toFixed(2);\n });\n substeps.addEventListener(\"input\", function () {\n document.getElementById(\"substepsOut\").textContent = substeps.value;\n });\n playbackRate.addEventListener(\"input\", function () {\n document.getElementById(\"playbackOut\").textContent = playbackRate.value;\n });\n lampPreset.addEventListener(\"change\", function () {\n applyLampPreset();\n clearCurrent();\n seedCurrent();\n updateSimulatorDiagnostics();\n });\n document.getElementById(\"play\").addEventListener(\"click\", function () {\n setRunning(!running);\n });\n heaterUnevenness.addEventListener(\"input\", function () {\n document.getElementById(\"unevenOut\").textContent =\n Math.round(+heaterUnevenness.value * 100) + \"%\";\n });\n neckSensitivity.addEventListener(\"input\", function () {\n document.getElementById(\"neckOut\").textContent = Math.round(+neckSensitivity.value * 100) + \"%\";\n });\n pinchStrength.addEventListener(\"input\", function () {\n document.getElementById(\"pinchOut\").textContent = Math.round(+pinchStrength.value * 100) + \"%\";\n });\n conservationStrength.addEventListener(\"input\", function () {\n document.getElementById(\"conservationOut\").textContent =\n Math.round(+conservationStrength.value * 100) + \"%\";\n });\n restDensity.addEventListener(\"input\", function () {\n document.getElementById(\"restDensityOut\").textContent = (+restDensity.value).toFixed(1);\n });\n volumePressure.addEventListener(\"input\", function () {\n document.getElementById(\"volumePressureOut\").textContent =\n Math.round(+volumePressure.value * 100) + \"%\";\n });\n particleCount.addEventListener(\"input\", function () {\n document.getElementById(\"particleCountOut\").textContent = particleCount.value;\n });\n particleCount.addEventListener(\"change\", function () {\n setRunning(false);\n seedCurrent();\n recordCycleDiagnostics();\n analyzeBlobs(false, true);\n draw();\n });\n baseFocus.addEventListener(\"input\", function () {\n document.getElementById(\"baseFocusOut\").textContent = Math.round(+baseFocus.value * 100) + \"%\";\n });\n collectionStrength.addEventListener(\"input\", function () {\n document.getElementById(\"collectionOut\").textContent =\n Math.round(+collectionStrength.value * 100) + \"%\";\n });\n glassCooling.addEventListener(\"input\", function () {\n document.getElementById(\"glassCoolingOut\").textContent =\n Math.round(+glassCooling.value * 100) + \"%\";\n });\n matchRadius.addEventListener(\"input\", function () {\n document.getElementById(\"matchRadiusOut\").textContent =\n matchRadius.value + \" cell\" + (matchRadius.value === \"1\" ? \"\" : \"s\");\n });\n cellSizeCm.addEventListener(\"input\", function () {\n document.getElementById(\"cellSizeOut\").textContent = (+cellSizeCm.value).toFixed(1) + \" cm\";\n updateCourseDiagnostics();\n });\n secondsPerFrame.addEventListener(\"input\", function () {\n document.getElementById(\"secondsOut\").textContent = (+secondsPerFrame.value).toFixed(2) + \" s\";\n updateCourseDiagnostics();\n });\n blobThreshold.addEventListener(\"input\", function () {\n document.getElementById(\"blobThresholdOut\").textContent =\n Math.round(+blobThreshold.value * 100) + \"%\";\n analyzeBlobs(false);\n draw();\n });\n applyLampPreset();\n buildLampMask();\n selectMode(\"particleVolume\");\n seedCurrent();\n document.getElementById(\"inventoryMetric\").textContent = totalWax().toFixed(1);\n recordCycleDiagnostics();\n analyzeBlobs(false, true);\n updateCourseDiagnostics();\n updateSimulatorDiagnostics();\n requestAnimationFrame(animationLoop);\n})();\n\nexport {};\n",[],[148,225,243],"efea0db5-813a-4c4b-9b5e-662afae10362",244,["D",1785252127214],[166,167,168,169],[148,225],["D",1784854699691],[165,170,173],[148],["D",1784854669144],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":47},{"_13":84,"_32":85,"_41":40,"_86":42,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":43,"_93":94},"ctx",{"_77":-5,"_122":295,"_296":297,"_298":299,"_300":47,"_301":47,"_302":47,"_303":25,"_304":-5,"_305":-7,"_306":-7,"_307":61,"_308":47,"_309":47,"_310":-5,"_311":47,"_312":47,"_313":47,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":85,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"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"]

Diff · v271