Sand, water, fire, lava and plants that all react with each other.
Every pixel is a cell holding a material, and each frame every cell follows a few local rules: sand falls and piles, water spreads sideways, fire rises and burns wood and plants, lava melts sand into glass and boils water into steam, and plants grow into water. The grid lives in a typed array, gets updated bottom-up in a randomized order so nothing drifts to one side, and is written straight into ImageData.
Try it. Pick a material from the palette (or press 1 to 0) and drag to pour it. Right-click or Shift-drag to erase. Press R for a new scene.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a falling sand game with JavaScript and the HTML canvas element. 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 canvas that fills the window and stays sharp on high-DPI screens. Simulate on a small grid (around 300 by 200 cells) and scale it up with image smoothing turned off, so each cell is a crisp square.
- Store the grid as a Uint8Array of material ids: empty, sand, water and stone. Draw it each frame by writing colors into an ImageData buffer with a Uint32Array view and calling putImageData once.
- Update the grid bottom-up. Sand falls into the cell below if it is empty, otherwise slides diagonally. Water does the same, then also flows a few cells sideways. Sand sinks through water by swapping places with it. Stone never moves.
- Alternate the direction you scan each row (left to right, then right to left) so nothing drifts to one side, and stamp moved cells so a grain cannot move twice in one frame.
- Let me pick a material with the number keys and drag the mouse to pour it.
Once that works, make it beautiful and alive:
- Give every grain a small random color variation when it is created, so piles look like real sand.
- Add fire (rises, flickers through a color ramp, dies into smoke), wood (catches fire), and lava (flows slowly, glows, turns water into steam and itself into stone).
- Add glow: count fire and lava cells into a coarse quarter-size light map and draw it scaled up on top with "lighter" blending.
- Draw a small material palette inside the canvas so it works without a keyboard.
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 plants that grow into water, acid that eats through everything but glass, or an autopilot that pours and erupts on its own.
