A campfire whose flames are a fluid simulation colored by blackbody physics.
The fire is a grid fluid solver carrying fuel gas, temperature and smoke. Hot logs exhale fuel; where it meets gas above the ignition temperature it burns, and the heat it releases makes the gas buoyant, while vorticity confinement and a drifting noise force break the plume into licking tongues. Every pixel's color is the blackbody color of its temperature, from Planck's law integrated against the CIE 1931 color matching functions, so the yellow core and dull red tips are physics rather than a palette. Two sets of texture coordinates ride the flow and crossfade to add pixel-scale detail, sparks are inertial particles that cool as they fly, and the clearing is lit by the fire's own measured brightness.
Try it. Drag across the fire to fan it: the flames bend with your stroke and flare with the extra air. Click or tap to drop another log on, and use the sliders or the arrow keys for wind and fuel. Press L or Space to add a log and R for fresh logs.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a campfire simulation with JavaScript and the HTML canvas element, where the flames come from a small fluid solver instead of sprites. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a full-window canvas that stays sharp on high-DPI screens. Paint a dark night background.
- Create a grid about 100 cells wide and 120 tall over the fire area, with arrays for horizontal and vertical velocity, temperature and smoke.
- Each frame: add heat near the bottom center, push hot cells upward (buoyancy proportional to temperature), move every field with semi-Lagrangian advection (trace each cell backward along the velocity and sample with bilinear interpolation), cool the temperature a little, then make the velocity divergence free with 20 or so Gauss-Seidel pressure iterations (Jos Stam's Stable Fluids).
- Render the temperature into an ImageData at grid resolution and draw it scaled up with smoothing, using a simple fire-colored ramp.
Once that works, make it beautiful:
- Add a fuel field: logs emit fuel, and fuel burns where the temperature is above an ignition point, adding heat. Flames now have a body and tips.
- Replace the color ramp with real blackbody color: integrate Planck's law against an analytic fit of the CIE 1931 color matching functions for temperatures from 800 K to 1900 K, convert to sRGB, and store the result in a lookup table.
- Add vorticity confinement so the flames lick and curl, draw them with additive blending plus a cheap bloom (shrink the fire image to a few pixels and stretch it back), and add spark particles that follow the flow and cool.
- Let the mouse fan the flames by pushing the velocity along a drag.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as smoke lit from below by the fire, wind that leans the whole fire, or logs that char as they burn.
