A browser-based falling sand physics sandbox built with vanilla JavaScript and Canvas. Paint sand, water, wall, and acid on a 2D grid and watch the substances interact in real time.
| Material | Behavior |
|---|---|
| Sand | Falls under gravity, piles up, displaces water and acid |
| Water | Flows downward, spreads horizontally, fills containers |
| Wall | Static barrier — immovable and indestructible |
| Acid | Falls like water, dissolves sand on contact |
- Mouse / Touch — Paint substances with a circular brush
- Right-click — Erase mode
- Keys 1-4 — Select substance
- Space — Pause / Play
- C — Clear canvas
- S — Screenshot
Building this from scratch was a fun exercise in cellular automata and performance:
- Physics accuracy — Getting water to flow naturally while keeping the simulation fast required tuning the spread logic and update order
- Performance — Running 160,000 cell updates per tick at 60fps means every operation counts;
Uint8ArrayandImageDataare essential - Interaction design — Smooth brush painting, touch support, and a custom cursor all need to feel responsive
- Material interactions — Sand sinking through water, acid dissolving sand, and substances displacing each other required careful ordering of the simulation rules
Initial prompt idea credits to @lukesdevlab.