012-powder-alchemy

*****************************************************************************************************************************************************************************************************************te.

The current state: 11 demos exist. The latest one is 011-physarum-garden. I need to create demo 012. Let me look at the existing demos to see what has been done, so I can create something new and different.

Let me quickly check the demo list in index.html and glance at a couple of previous demos to understand style and avoid duplicates.

The task is "Wake up and do as you please" — which per my purpose means: create a new cool Three.js demo. The last demo was 011-physarum-garden. So I should create demo 012.

Let me think of an impressive demo idea that hasn't been done yet:

Done so far:

1. Spinning cube
2. Nebula galaxy (particles)
3. Mandelbulb explorer (ray marching fractal)
4. Fluid dynamics (Navier-Stokes)
5. Gravity sandbox (N-body)
6. Event horizon (black hole lensing)
7. Sonic reactor (audio visualizer)
8. Void runner (synthwave game)
9. Azure Odyssey (sailing, ocean)
10. Abyssal Bloom (deep sea boids)
11. Physarum Garden (slime mold GPGPU)

Ideas for 012:

• Volumetric clouds / weather system — ray-marched volumetric clouds with fly-through controls, weather presets, god rays. Very impressive.
• Terrain erosion simulator — procedural terrain with hydraulic erosion, fly camera.
• Ray-traced scene (path tracing) — progressive path tracer with spheres, using three.js render targets.
• Cloth simulation — verlet cloth with wind, tearing.
• Fireworks show — choreographed fireworks with audio.
• Wormhole / hyperspace tunnel
• Kaleidoscope / reaction-diffusion — Gray-Scott reaction diffusion on GPU (similar to physarum though).
• Aurora borealis — northern lights with curtains shader, snowy terrain, stars.
• Flocking murmuration — starling murmuration with GPGPU boids (similar-ish to abyssal bloom boids).
• Circuitboard / tron city flyover
• Rube Goldberg / marble run physics — physics-based marble machine with cannon-es or custom physics.
• Voxel world / minecraft-like — procedural voxel terrain with caves, day/night.
• Fractal flame / IFS
• Ocean inside a glass sphere
• Space elevator / orbital ring
• Interactive water caustics pool
• Spider web / strands physics
• Boids in a lava lamp
• Tornado / hurricane particle sim
• Sand falling sim (powder game) — falling sand cellular automaton on GPU with multiple materials: sand, water, fire, smoke, wood, lava... That's a classic and very interactive. Could be done at 512x512 on GPU via fragment shader ping-pong. Interactive painting of materials. That's quite fun and different from physarum (continuous agents) since it's cellular automata.

Actually, a falling-sand / powder game on GPU would be great fun: multiple element types (sand, water, oil, fire, smoke, steam, wood, lava, acid, wall, salt, plant, gunpowder...), GPU cellular automaton at high res (512² or 1024²), paint with brushes, gravity toggle, temperature simulation, fire spreading, reactions (lava+water=stone+steam, acid dissolves, fire burns wood/oil/gunpowder...). Rendering with nice colors and glow for hot elements + bloom.

But is CA on GPU tricky? It's doable: encode material id + metadata in RGBA texture channels. Each frame, each cell reads its neighborhood and decides movement. The classic problem: two cells can't swap reliably in pure parallel (write conflicts) — the standard trick is to use the "margolus neighborhood" or randomize per-cell update order, or compute movement via velocity field. A simpler approach used in many shadertoy falling-sand sims: each pixel decides where it wants to move, and writes a "request"; then a second pass resolves. Or use the classic trick of processing cells in alternating checkerboard order (like red-black Gauss-Seidel) to avoid conflicts, plus per-frame random horizontal direction.

Alternative simpler robust approach: run the CA on CPU at moderate resolution (256x256 or 320x240) — CPU CA is very fast for these sizes (65k-100k cells), easy to make correct, and rendering via a DataTexture. CPU gives much more freedom for complex element interactions. 256x256 = 65,536 cells, each frame processing ~65k cells in JS is fine (few ms). We can even do 384x216 or 512x288 with optimized typed arrays. CPU at 512x512 = 262k cells/frame — still probably OK (~2-5ms) if optimized with typed arrays and scanline-based updating (only iterate rows from bottom, skip empty). Many web powder games do this.

Actually for a "wow" GPU approach, I could do a hybrid: CPU simulation + bloom rendering. Let me go with CPU sim (reliable, feature-rich: many elements with complex interactions) at like 420x240 or so, rendered upscaled with a nice shader (metaball-ish smoothing for liquids? maybe just crisp pixels with slight glow + bloom). The charm of powder games is the pixel look.

Elements plan:

• EMPTY
• WALL (indestructible)
• SAND (falls, piles)
• WATER (liquid, flows)
• SALT (falls, dissolves in water)
• OIL (liquid, flammable, floats on water)
• FIRE (rises, spreads, lifetime)
• SMOKE (gas, rises)
• STEAM (gas, rises, condenses)
• WOOD (solid, flammable)
• LAVA (liquid, hot: ignites, turns water to steam, cools to stone)
• STONE (falls? no—solid static; formed from lava cooling; sand+? )
• ACID (liquid, dissolves things, emits fumes)
• GUNPOWDER (falls, highly flammable, explodes?)
• PLANT (solid, grows when touching water, flammable)
• SALT WATER? (simplify: water + salt → slight color change... skip)
• ICE (melts near heat)
• CLONE (clones touching element) — classic powder toy element, fun!
• VOID (erases everything touching) — fun tool
• FUSE?
• METHANE/gas flammable

Keep ~15 elements for depth but manageable. Features:

• Brush sizes, element palette UI (custom HTML toolbar)
• Pause/step, gravity direction, temperature view mode, heat vision?
• Mouse painting, eraser
• Save/restore PNG? Snapshot button.
• Ambient audio? Maybe subtle fire crackle... could skip audio or add a toggle. Previous demos had audio; adding subtle synthesized crackling/bubbling based on fire/lava amounts would be a nice touch but adds complexity. Maybe simple: crackle noise proportional to active fire count, bubbling for lava. Doable with WebAudio noise buffer + random triggers. I'll add a modest sound engine (fire crackle, lava bubble, steam hiss) with mute default-off toggle.

Rendering: draw cell colors to ImageData → DataTexture → plane with custom shader that does: pixelated upscale with subtle per-pixel shading variation, hot elements glow (emissive ramp based on temperature), then bloom postprocessing (UnrealBloomPass) + slight vignette/grain. Also "heat view" toggle.

Grid size: let's pick 480x270 (16:9, 129,600 cells). CPU update fine. Each cell: Uint8 for type, plus aux data: temperature (Uint8 or Int16), life/variation (Uint8), updated-flag per frame (Uint8 or use frame parity). Total ~4 arrays of 130k = fine.

Interaction with mouse: map pointer to grid coords, paint circle brush.

Fire spread logic: fire has lifetime, heats neighbors, ignites flammables based on ignition chance, produces smoke/steam.

Lava: moves like viscous liquid, temperature high; contact with water → stone + steam; ignites flammables; slowly cools to stone (or stays hot; make it cool only when isolated? simpler: lava is permanent heat source but has small chance to cool to stone when not touching lava? That could freeze all lava eventually. Let's make lava cool to stone only when touching water or after very long time... simpler: lava stays lava; user can erase. Actually a "cooling" mechanic is nice: lava cools to stone when in contact with >=2 empty/smoke/steam cells? Eh. Keep: lava + water → stone + steam. Lava permanent otherwise.)

Acid: dissolves sand/stone/wood/salt/gunpowder/oil/plant with probability, consuming itself; emits smoke. Not dissolve wall.

Plant: when water touches plant, chance for plant to grow into adjacent empty cell (consumes water). Flammable.

Ice: solid; near fire/lava melts to water. Cold? Simple: melts if neighbor hot.

Salt: dissolves in water (salt disappears, water becomes "salt water"? simplify: salt disappears with slight chance, water unchanged) — powder toy does this (creates saltwater). To keep simple: salt + water → both become... make salt just dissolve (disappear) with chance. Fine.

Gunpowder: falls like sand; ignites instantly and violently: turns to fire + smoke, chain reaction. Could add pressure-based explosion... keep simple: fast burn with fire + smoke, maybe small chance to "pop" scattering nearby particles. Simple is fine.

Clone: picks a target element from a random non-empty neighbor (excluding clone/void/wall) and then continuously emits that element into empty neighbors. Classic and fun.

Void: consumes any non-wall neighbor, deletes itself-adjacent elements; static. Fun eraser tool.

Stone: static solid (like wall but can be destroyed by acid? and it's what lava cools into). Maybe stone falls? No—static.

Wood: static solid, flammable slowly.

Movement rules per frame (scan bottom-to-top for falling, randomize x order; top-to-bottom for gases; use per-cell updated flag to avoid double moves):

• Powders (sand, salt, gunpowder): fall down if empty/gas... also can displace liquids (sink through water: swap with liquid below). Diagonal down if down blocked. Also in liquid, sink slowly.
• Liquids (water, oil, lava, acid): fall down, diagonal down, else horizontal (spread) with random direction, distance 1..dispersion (water 4, oil 3, lava 2, acid 4). Oil floats on water: if oil below water → swap (density).
• Gases (smoke, steam, fire handled separately): rise up, diagonal, horizontal wander; lifetime decay → empty (steam may condense to water).
• Fire: not a mover per se; exists as particles with short life, rises slightly, flickers.

Frame parity: to avoid bias, alternate scan direction each frame; also randomize per-row direction.

Performance: 480x270 = 129.6k cells; only ~half contain stuff; JS can handle. Use Int32 for index math. Use typed arrays: type:Uint8, life:Uint8 (or Int16 temp). Keep it simple: two Uint8 arrays + one Float32? Use Uint8 temp 0..255 mapped to heat. Fire/lava set temp 255; temp decays; heat spreads slightly? Full temperature simulation is heavy; do simplified: each element has fixed temp behavior, wood ignites when neighbor fire count high... Simplest robust: no continuous temperature field; ignition by direct contact probability. Rendering glow from element type (fire/lava glow). Good enough and fast.

Actually a tiny "heat" channel could be nice for heat-vision mode... skip; keep life channel used for fire/smoke lifetime and color variation.

Rendering details: ImageData RGBA 480x270, per cell color lookup with variation (precompute 4-8 shade variants per element per cell using a static random noise array). Fire/lava animated flicker using time-based noise. Water slight shimmer. Then a full-screen quad shader: samples the DataTexture with NEAREST, adds subtle "bevel" lighting (sample neighbor heights? maybe simple edge darkening), plus heat-glow boost for fire/lava cells. Bloom pass picks up bright glows. Vignette + film grain + subtle chromatic aberration maybe. Nice.

UI: custom HTML/CSS toolbar (element buttons with colors + icons), sliders for brush size, buttons: pause, clear, gravity flip?, snapshot, sound toggle, heat view? Keep lil-gui? A custom bottom toolbar fits powder games better; use custom HTML for palette + lil-gui for sim settings? Simpler: all custom HTML: element palette (top or bottom), brush size slider, play/pause, clear, snapshot, sound. Plus small hint text. Match previous demos' aesthetic (dark, glassy, indigo/purple accents).

Presets/scenes: a few starter scenes ("Volcano", "Garden", "Lab") that stamp pre-made structures — nice touch! Implement simple scene stamper: functions that paint walls/wood/lava pools etc. E.g.:

• "Volcano": a stone cone with lava inside top, wood forest at base, water lake.
• "Garden": soil? (sand), plants, water pools.
• "Powder keg": gunpowder room with fuse... fun! Implement maybe 3-4 mini scenes spawnable from a dropdown, drawing at center.

Audio: WebAudio synthesized: fire crackle = short filtered noise bursts; lava bubble = low sine blips; steam hiss = bandpassed noise swells; rate proportional to counts computed per second. Master gain + mute toggle. Also a soft ambient drone? Keep subtle. Must start after user gesture (click "sound" button).

Boundary: edges are walls (or wrap? walls simpler).

Gravity: maybe flip gravity button for fun (gases fall, sand rises). Cheap to add: invert y direction in movement. Fun gimmick, keep.

Also "wind" slider affecting gases/smoke horizontally? Could add simple horizontal drift for gases and liquids? Keep wind affecting gases & fire only. OK.

Structure the code cleanly with comments. Single index.html, import map for three@0.160+, EffectComposer/UnrealBloomPass for bloom. Since sim is CPU, three.js is used for rendering the texture plane + postprocessing. That's acceptable (it's a Three.js demo with post-processing). Add slight parallax/tilt on mouse move? Maybe subtle camera sway. Keep plane orthographic full screen.

Orbit controls unnecessary. Pan/zoom could help paint details: add wheel zoom + drag-with-space pan? Powder games benefit from zoom. Implement simple zoom (wheel, zoom to cursor) and pan (right-drag or middle-drag or space+drag). The plane is sized to grid aspect; camera orthographic; zoom by scaling camera zoom. Manageable.

Let me now also decide the demo number and name: 012 — "Powder Foundry"? "Elemental Forge"? "Sand Sorcerer"? Names like "Powder Playground" are generic. "Ember & Ore"? I like "Powder Alchemy" or "The Falling Forge". Let's go with "Powder Alchemy" — an alchemy lab of falling elements. Or "Elemental Sands". Hmm, "Powder Alchemy" captures interactions (fire, lava, acid, alchemy vibe). Title: "012 — Powder Alchemy".

Plan the code:

Element list with IDs: 0 EMPTY 1 WALL — dark gray, static, indestructible (except void) 2 SAND — yellow powder 3 WATER — blue liquid 4 SALT — white powder, dissolves in water 5 OIL — dark amber liquid, flammable, floats on water 6 FIRE — bright, short life 7 SMOKE — gray gas 8 STEAM — light blue gas, condenses 9 WOOD — brown solid, flammable 10 LAVA — orange-red hot liquid 11 STONE — gray solid (from cooled lava / lava+water) 12 ACID — green liquid, dissolves 13 GUNPOWDER — dark powder, explosive burn 14 PLANT — green solid, grows with water, flammable 15 ICE — pale solid, melts near heat, static 16 CLONE — emits a copied element 17 VOID — black hole eater 18 EMBER? skip 18 FUNGUS? skip

That's 18 — plenty.

Densities: water 5, oil 3 (floats), lava 8, acid 6, sand 10, salt 10, gunpowder 12 → powders sink through liquids; liquids: denser sinks below lighter (water under oil).

Fire behavior: life decrement; when 0 → empty (or smoke chance). Each frame: chance to ignite flammable neighbors (wood, oil, gunpowder, plant) with element-specific probability; heat neighbors: ice→water melt; water→steam (small chance when adjacent to fire/lava); gunpowder ignites violently (turns to fire with bigger radius: when igniting gunpowder cell, also ignite all gunpowder in 1-cell radius and spawn smoke; give fire bigger life → looks explosive). Fire moves: rises: try up/diag-up into empty; also random horizontal jitter; cannot exist long in water (fire adjacent to water → extinguished to steam? simple: if neighbor water, die to steam chance).

Lava behavior: liquid movement (slow, dispersion 2); interactions with neighbors each frame (check 4 neighbors): if water → both: water→steam, lava→stone? Powder toy: lava+water → stone + steam. I'll do: the lava cell → STONE, water cell → STEAM (with chance, e.g., 50% per contact frame) — creates crusty stone around lava pools in water. Nice.

• ignites adjacent flammables like fire.
• melts ice.
• evaporates? no.
• Emits embers: small chance to spawn fire above if empty above (bubbling).

Acid: liquid movement; dissolve: check 4 neighbors; if neighbor in dissolvable set (SAND, STONE, SALT, GUNPOWDER, OIL, WOOD, PLANT, ICE) with small chance (per material), destroy neighbor → EMPTY and acid dies with chance (consumed) or produces smoke. Acid not consume WALL/CLONE/VOID/LAVA.

Salt: powder movement; if neighbor WATER, chance to dissolve → EMPTY.

Plant: static; growth: check 4 neighbors for WATER: chance to consume the water cell and grow PLANT into a random empty neighbor cell (classic vine growth, bias upward? any direction). Also flammable.

Ice: static solid; if neighbor FIRE/LAVA (or adjacent "hot"), chance → WATER.

Gunpowder: powder; ignition → fire with chain: when a gunpowder cell ignites, it becomes FIRE (life high) and ignites neighboring gunpowder instantly (chain via marking? recursion risk — just rely on fire's high ignite probability vs gunpowder=0.9 → next frame chain, looks like fast fuse — actually per-frame chain at 60fps gives ~instant visual explosion anyway since radius grows 1 cell/frame. For bigger bangs, when gunpowder ignites, also turn adjacent GUNPOWDER cells to FIRE immediately (1-cell radius instant) → 3 cells/frame growth, and produce smoke. Good enough.)

Clone: static; if no stored type (store in life channel? need target id 0-17 fits in Uint8 life array — but life used for lifetime... use separate aux Uint8Array. I'll add aux array): find first non-empty neighbor not in {CLONE, VOID, WALL}: store as target. Then each frame, for each empty neighbor, chance to spawn target (with fresh life). Rate-limit (e.g., 20% chance per empty neighbor per frame).

Void: static; each frame, destroy all neighbors not in {WALL, VOID, CLONE} (set EMPTY). Eats forever.

Smoke: gas, life decays → EMPTY; drifts with wind. Steam: gas, life decays; chance to condense → WATER (falls).

Movement implementation:

I'll write helper trySwap(i, j) that swaps type/life/aux and stamps updated for both.

Scanning: iterate y from H-1 down to 0, x direction alternates by frame parity and per-row random start? Simplest: per row, if frameParity then x ascending else descending. Also to reduce bias for liquids horizontal spread use random dir per cell: dir = (rand()<0.5)?1:-1.

Updated stamps: stamp: Uint32Array(W*H), frame increments each step. At cell processing: if stamp[i]===frame skip. When move/swap: stamp[i]=frame; stamp[j]=frame. When cell transforms in place (e.g., water→steam): stamp[i]=frame.

Painting: paint(cx,cy,r,type): circle, random density (for powders sprinkle 60%? no—solid brush fine; maybe for gas/fire spray use sparse). Fire brush: sprinkle chance 30%. Keep solid circles for solids/powders/liquids, sparse for fire/gases.

Boundary: treat out-of-bounds as WALL. Also paint an indestructible frame? Just check bounds.

Scenes (stamps):

• clear()
• sceneVolcano(): stone mountain cone at bottom center with lava chamber + chimney, water pools at sides (with wall basins), some wood trees (vertical wood with plant tops), gunpowder vein inside mountain? fun.
• sceneGarden(): soil of sand, water pond, plant seeds, wood trellis, ice cubes.
• sceneLab(): wall containers: one with acid, one with oil above water, gunpowder keg (wood box filled with gunpowder), torch of fire above oil, salt shaker, clone block with water above, void pit.

Implement scene drawing with rect/circle/line helpers.

Rendering & post:

• ImageData buf WH4.
• palette: base colors per element; per-cell shade noise: shade = hash(i)*k multiply. Fire/lava: animate brightness with time noise: col = base*(0.85+0.3sin(tspeed + hash*τ)). Also lava glows: output color HDR? To make bloom pop, fire/lava cells can exceed 1.0? DataTexture is 8-bit. Instead use a separate "emissive" overlay? Simplest: use FloatType DataTexture (THREE.DataTexture with FloatType, RGBA) — we can write >1 values for hot elements → bloom threshold picks them. Composer renders HDR through UnrealBloom fine (renderer with HalfFloat frame buffers? EffectComposer default uses HalfFloatType since r152ish I think—actually since r154 default renderTarget type is HalfFloat). I'll use FloatType DataTexture + custom shader; hot elements multiply 1.5-3.
• Shader plane: vertex passes uv; fragment: sample simTex (NEAREST), apply slight edge AO (darken pixels adjacent to empty? needs neighbor samples — 4 taps, cheap and adds depth), heat boost already in tex; vignette; grain; subtle scanline? no.
• Post: EffectComposer: RenderPass → UnrealBloomPass (strength ~0.7, radius 0.6, threshold ~0.75) → OutputPass.

Camera: OrthographicCamera fitted to plane with margin; zoom via wheel (cam.zoom), pan via right-drag / space+drag / two-finger? keep: right-drag or middle-drag pans; wheel zooms to cursor. Clamp zoom [1, 12] and pan within bounds-ish. Also on mobile: pinch? skip pinch (complex); touch paints.

Pointer painting: left button paints selected element; shift or right? right is pan... Provide "Erase" as element (EMPTY brush) — typical. Also alt-click = sample element (pipette) — nice touch.

HUD stats: fps, active cell count, element name. Top-left overlay.

Sound: WebAudio; master; nodes: crackle (fire) via ScriptProcessor? No—use scheduled short noise bursts via setInterval-ish in rAF: each frame, if fireCount>threshold and random, create tiny noise burst (bufferSource from pre-made noise buffer) with bandpass, short decay; rate ∝ fire fraction. Lava bubble: lowpass sine blips w/ random pitch; steam hiss: continuous noise source with gain ∝ steam count (smooth via setTargetAtTime). Ambient drone: two detuned sines + slow LFO, very quiet. Toggle button starts ctx. Keep modest (~80 lines).

Counts: compute per-step counts by element into Uint32 array during main loop (cheap: count during scan). Use for audio + stats.

lil-gui: previous demos used lil-gui; here custom UI is more apt. I'll do fully custom HTML UI to look like a proper powder game: bottom element bar with color chips, top bar with title/controls, right side small panel for brush size/wind/scenes. Keep tidy and responsive.

CDN check: use unpkg three@0.160.1? Previous demos presumably used specific versions. Let me check what 011 used to stay consistent and reachable.

Then write file, quick sanity checks (node? can't run browser; at least validate JS syntax via node --check after extracting module script? We can extract the content and run node --check. Imports of 'three' would fail at runtime but --check only parses syntax. Good idea.) Also verify CDN URLs with curl.

Let me check 011's import map for the exact URLs.

The conventions: three@0.160.0 from jsdelivr, import maps with three/addons.

Now let me create demo 012: "Powder Alchemy" — a falling-sand alchemy lab with 18 elements, CPU cellular automaton at 480x270, HDR float texture rendering with bloom, synthesized audio, scenes, pan/zoom, etc.

Let me write the full file. This will be a large file (~1200+ lines). Let me carefully architect it.

Key components:

1. HTML/CSS UI:

   • Top bar: title, stats (FPS, cells), buttons: sound, pause, step, clear, snapshot, gravity flip, scenes select.
   • Bottom bar: element palette buttons (with color swatches + names + hotkeys), brush size slider.
   • Hint overlay.

2. Simulation:

   • W=480, H=270. Arrays: type U8, life U8, aux U8 (clone target / variation), stamp U32.
   • Random: Math.random or fast LCG. For per-cell randomness, a fast PRNG helps (mulberry32). I'll use a simple xorshift for speed.
   • Element table with properties: category (EMPTY, POWDER, LIQUID, GAS, SOLID, SPECIAL), density, flammability, colors (array of shade variants?), glow.
   • step(): alternate row scan order; dispatch behaviors.
   • Painting, scenes.

3. Rendering:

   • Float32Array pixels WH4 → THREE.DataTexture(FloatType), NearestFilter.
   • Fullscreen-ish plane with custom ShaderMaterial: edge shading (neighbor sampling), vignette, grain. Since we draw HDR values for fire/lava, bloom will pick up.
   • EffectComposer + RenderPass + UnrealBloomPass + OutputPass.
   • Ortho camera with zoom/pan.

4. Audio: WebAudio synth — crackle, hiss, bubbles, drone. Toggle.

5. Interactions: pointer paint (left), erase element, pipette (alt), pan (right/middle-drag or space), wheel zoom to cursor, hotkeys 1..9,0 etc, space = pause? Space also used for pan... use P for pause, Space hold for pan. [ ] for brush size. Keep simple and document in hint.

Let me be careful about performance in the sim loop. 480*270 = 129,600 cells. Bottom-up scan. Behavior functions inlined via switch. Should run at 60fps in JS easily (a few ms).

Fire rendering: flicker via time-based hash: in the pixel-writing loop, for FIRE: brightness = 1.2 + 0.8*noise(time, i). Since we rewrite the entire ImageData every frame anyway, animation is free.

Colors as [r,g,b] base; multiply by shade noise per cell: shadeMul = 0.82 + 0.36*hash(i). Precompute hash per cell once in a Float32Array noise (129600 floats) — one-time cost.

HDR boost: for FIRE → rgb * (1.5..2.5 flicker); LAVA → *1.4 with pulse; EMBER? no. CLONE sparkle? small.

Edge shading in shader: sample neighbors from simTex; but simTex holds color not height. For AO, need occupancy: encode occupancy in alpha channel! Set alpha=1 for solid-ish occupied, 0 for empty, partial for gas? Then shader: edge = neighbors alpha difference → darken/outline. Fire/smoke shouldn't cast edges: alpha for gas/fire = 0. Powders/liquids/solids = 1. That gives a nice "material has body" look: darken the occupied pixel near empty boundary slightly (inner bevel). Let me do: occ = a of center; emptyNeighbors = count of 4-neighbors with a<0.5; shade = 1 - 0.10*emptyNeighbors*occ; plus a subtle top-highlight: if neighbor above empty and center occupied → lighten slightly (like rim light from above): gives 3D-ish piles.

Also empty background: don't render pure black — render a very subtle lab backdrop: vertical gradient + faint grid + vignette, behind particles. In shader: if alpha small → background color (deep blue-violet gradient with subtle noise).

Bloom: UnrealBloomPass(res, strength=0.55, radius=0.5, threshold=0.8). Since fire/lava pixels are >1.0, they bloom; background ~0.05 won't.

Snapshot: render composer then toDataURL; download link.

Scenes — implement drawing helpers:

• rect(x0,y0,x1,y1,t), disc(cx,cy,r,t), line? maybe hline/vline enough.
• sceneVolcano:
  • ground: stone layer bottom rows y in [H-10,H): stone;
  • volcano: cone of stone centered cx=W/2 from y=H-10 up to peakY=H-140, slope. Build via for each y, halfWidth = (y-peakY)*0.55; draw stone at edges only (shell) with thickness 3; fill inner chamber with LAVA up to some level; chimney opening at top.
  • Simpler: draw filled triangle of stone, then carve inner triangle of lava, then carve small opening column from peak down into lava → eruption when lava... lava doesn't erupt by itself; add fire at chimney → ignition & embers. Add gunpowder pocket inside for a boom. Fun.
  • water basins at left/right: wall U-shape with water.
  • trees: at base: vertical WOOD trunk h=18 with PLANT blob on top, few of them.
• sceneGarden:
  • soil: sand fill bottom 30 rows with slight slope; pond: basin in middle with water; plant seeds sprinkled on soil; a few wood posts; ice cubes on side; salt pile.
• sceneLab:
  • three wall tanks: tank1 acid with stone pellets above (drop in), tank2 oil + water separated, tank3 gunpowder with wood lid and fire above? maybe gunpowder keg: wood box filled gunpowder, fuse line of gunpowder out the top; a torch (wall bracket + fire) user can drop. Also CLONE block with water above dripping; VOID pit at bottom right.

Scenes don't need perfection; they just stamp starting layouts.

Random horizontal spread for liquids: dispersion factor per element (water 5, acid 5, oil 3, lava 1-2): try moving dir*k for k=1..disp while dest empty-or-gas; standard: pick dir random ±1; step cells while passable, up to disp; move to furthest. Simple loop.

Density swaps: powders sink through liquids: if below is liquid && density(below)<density(self) → swap. Liquids: if below is liquid with lower density → swap (oil over water). Gases: rise: above is liquid? gas bubbles up through liquid: swap if above is liquid (always, gas density lowest). Nice visual: steam bubbling through water.

Fire in water: if any neighbor WATER → die (chance 0.5) → STEAM.

Lava cooling on contact with water described. Also lava + ICE → water + stone-ish? If lava neighbor ICE: ice→WATER and lava chance→STONE? ok add small.

Acid fumes: small chance to emit SMOKE above.

Plant growth: for each PLANT cell: if any neighbor WATER: chance 0.02 → turn that water cell to EMPTY and a random empty neighbor (of the plant) → PLANT. Limit: also direct growth into water cell itself → plant replaces water? Powder toy: PLANT grows by converting adjacent water to plant? Actually it grows into empty absorbing water. I'll do: absorb water neighbor (→EMPTY), grow into random empty 8-neighbor. Also vine growth along? fine.

Wood ignition: neighbor FIRE/LAVA → chance 0.02/frame ignite → becomes FIRE. Oil: 0.2. Gunpowder: 0.9 + burst. Plant: 0.05. Also fire heats water → steam: neighbor WATER chance 0.05 → STEAM (and fire loses life faster).

Fire itself: life init 20-60 (frames). Each frame life--. Movement: try up (EMPTY or GAS), diag up, sideways jitter; stamp. On death: 30% → SMOKE else EMPTY. Fire below water? if neighbor water → life-=3.

Smoke: life 60-200; rise; wander with wind; fade → EMPTY. Steam: life 40-120; rise; chance 0.005 → condense WATER.

Clone: aux = target (0 = unset). Scan 4-neighbors: if aux==0 && neighbor is clonable (not EMPTY/WALL/CLONE/VOID) → aux=type. If aux>0: for each empty 4-neighbor: chance 0.1 → spawn aux (fresh life default). Note: spawning FIRE from clone → fun torch.

Void: for each 8-neighbor not in {WALL, VOID, CLONE}: → EMPTY. (Maybe also small chance to keep, no—eat all.)

Wall: nothing. Stone: nothing (static). Ice: melt check. Wood: ignite check. These static checks are cheap.

Also SAND + LAVA → glass? skip (no glass element... could add GLASS! Lava+Sand chance → GLASS (transparent-ish cyan-white static). Nice alchemical touch. Add GLASS id 18, static, renders pale cyan with low alpha-ish (still alpha=1 but pale color; maybe alpha 0.55 so background shows through → semi-transparent glass! shader: alpha<1 blends with bg). Let's do alpha=0.6, color pale cyan. Pretty.)

So elements final (19): 0 EMPTY 1 WALL 2 SAND 3 WATER 4 SALT 5 OIL 6 FIRE 7 SMOKE 8 STEAM 9 WOOD 10 LAVA 11 STONE 12 ACID 13 GUNPOWDER 14 PLANT 15 ICE 16 CLONE 17 VOID 18 GLASS

Palette UI: buttons with emoji-ish icons? Use colored dot + name + hotkey number. Group order: Eraser, Wall, Stone, Wood, Plant, Ice, Glass, Sand, Salt, Gunpowder, Water, Oil, Acid, Lava, Fire, Steam?, Smoke?, Clone, Void. Steam/Smoke as paintable too (fun). That's 19 buttons — fit bottom bar with wrap. Include ERASE (paints EMPTY). 20 tools total.

Hotkeys: digits 1-9 then shift? Just assign: 1..9 for first 9, 0 for 10th... simpler: no hotkeys beyond a few: E=erase, B=wall... skip extensive hotkeys; add keys 1-9/0 mapped to a curated quick list: sand, water, wall, wood, fire, lava, oil, acid, gunpowder, erase. Fine.

Brush sizes: 1..24 slider (radius). Plus "spray" density for gas/fire fixed.

Wind slider: -5..5 affects gas horizontal drift and fire lean.

Gravity flip button: gdir = 1 or -1 (invert). Implementation: in movement code use dy = gdir; "below" = y+gdir. Gases move opposite. Scan order should follow gravity: scan from the side towards which things fall, i.e., if gdir=1 scan y bottom-up; if -1 scan top-down. Generalize: for gy in loop... write loop as for (let n=0;n<H;n++){ const y = gdir===1 ? H-1-n : n; ...}. Falling direction = gdir. Gases rise = -gdir. OK.

Speed: steps per frame slider 1..3? At 480x270, 1 step 60fps fine; allow 2x for faster sim. Add slider "Speed" 1..3.

Now the audio engine:

Master toggle button 🔊/🔇.

Stats: count per element computed in step loop: reset counts each step, increment when... counting during scan: counts[type[i]]++ per cell — 129k increments, fine.

FPS meter: EMA of dt.

Now camera/rendering:

• plane size: W x H world units (aspect 16:9). OrthographicCamera with frustum sized to view; simplest: use a fullscreen quad approach with a separate ortho camera covering exactly the plane, then implement zoom/pan by scaling/translating the plane? Easier: PerspectiveCamera? Let me use OrthographicCamera with left/right/top/bottom set so the plane (W×H at origin centered) fits with margin 20 units; zoom via camera.zoom, pan via camera.position.x/y. Standard.
• Pointer→world→grid: worldX = (ndc.x * (frustumWidth/2)) / zoom + cam.x ... compute via unproject: vector.set(ndcX, ndcY, 0).unproject(camera) → world coords → grid: gx = floor(worldX + W/2), gy = floor(H/2 - worldY). Works for any zoom/pan.

Painting: pointerdown(left) begin stroke, pointermove paint line between last & current (interpolate steps = distance) to avoid gaps at fast moves. pointerup end. Right/middle drag → pan. Wheel → zoom at cursor: adjust zoom & position so world point under cursor stays: standard: before = unproject(cursor); zoom *= factor; updateProjectionMatrix; after = unproject(cursor); cam.position += (before-after).

Prevent context menu.

Resize: renderer.setSize, composer.setSize, camera frustum = planeFit(aspect): keep plane height-fit with margin: halfH = H/2 + 24; halfW = halfH*aspect; if halfW < W/2+24 then halfW = W/2+24, halfH = halfW/aspect.

The shader plane is W×H exactly; outside the plane → background? Renderer clear color dark; plane edges... make plane slightly larger than W×H and extend edge in shader (clamp uv, draw bg beyond [0,1] too). Simpler: make the plane huge (e.g., 4000×4000) and in the shader compute simUV = (vUv - 0.5) * planeSize/W ... hmm. Alternative: keep plane W×H; in shader, outside [0,1] uv region render the same bg gradient (extend infinitely? uv beyond plane isn't rendered since plane is only W×H). Zoom out beyond plane → outside is clear color (flat #05060a). Acceptable: set clear color to match bg bottom color so it blends. Also add a CSS radial gradient background on body behind canvas for aesthetics. And restrict min zoom to fit view. Good enough: clamp camera position/zoom so view never goes too far outside plane bounds (allow slight overhang).

Simplest robust: make plane 1600×900 (big), shader computes sim region in center [0..W,0..H] mapping: simUV = vUv*planeSize... let me just do: plane W×H, camera pan clamped to keep view inside [−W/2−m, W/2+m]. With m=60 and clear color ≈ bg color, fine. Also draw a subtle frame/border around the sim area? A 1px glowing border looks classy: in shader, if near uv edge (within 1.5px) draw frame color. Yes! Nice: a thin frame like a picture/petri dish. Border outside uv [0,1] can't be drawn by plane; draw border inside at uv edges.

Frame: dist to edge in pixels: e = min(uv.x*W, (1-uv.x)W, uv.yH, (1-uv.y)*H); frameGlow = smoothstep(2.0, 0.0, e) * frameColor — subtle.

Grain: hash(uv*resolution + t) * 0.03 add.

Background: inside plane, empty cells: gradient by uv.y: mix(#0b0e1a, #05060c, uv.y) + faint vignette + barely-visible grid: grid = max over lines spacing 32px alpha 0.03.

Bloom threshold 0.8 → bg ~0.04 no bloom; fire 2.0 blooms; lava 1.3 blooms lightly.

OutputPass handles tone mapping/sRGB (r160 has OutputPass). renderer.toneMapping = ACESFilmicToneMapping? With OutputPass it applies renderer.toneMapping. Set ACESFilmic + exposure 1.1.

DataTexture: RGBA FloatType, NearestFilter, no mipmaps, needsUpdate each frame after writing pixels. 4802704 floats = 518k floats = 2MB write per frame — fine.

Row flip: ImageData row 0 = top; DataTexture uv (0,0) = bottom-left with flipY default false? THREE.DataTexture default flipY=false, and texture row 0 is the BOTTOM row when flipY=false in WebGL UNPACK... Actually WebGL texImage2D uploads rows starting from bottom unless UNPACK_FLIP_Y. With flipY=false, first row in memory = bottom row of texture (v=0). Simplest: write pixels with y flipped: pixel row for grid y is (H-1-y)... or set texture.flipY = true? DataTexture supports flipY=true (uses UNPACK_FLIP_Y_PIXEL). I'll set tex.flipY = true and write grid row y → image row y (y=0 top). Wait careful: with flipY=true, memory row 0 becomes TOP (v=1..). vUv (0,0) bottom-left. Plane geometry standard: uv (0,0) at bottom-left. Grid y=H-1 is bottom row. So image row index r corresponds to v = (r+0.5)/H with flipY... ugh. Easiest deterministic: flipY=false (default), write pixels so that image row 0 = grid bottom row (y=H-1): for grid y in 0..H-1: imageRow = H-1-y. Then v=0 (bottom) shows grid bottom. And in shader no flip needed. I'll do that: let o = ((H-1-y)*W + x)*4.

In my sim, y=0 is TOP row (sky), y=H-1 bottom (ground) — falling = +y with gdir=1. Fine with above mapping.

Sound + stats + hint text: "Left-drag: paint · Right-drag / Space: pan · Wheel: zoom · Alt-click: pick · 1–0: quick elements · P: pause".

Pipette (alt-click): sample type at cell → select that tool (ignore EMPTY→erase?). Nice.

Pause/step, Clear (confirm? just clear).

Snapshot: composer.render(); canvas.toDataURL('image/png'); download via a.click(). Include bloom: render then capture.

Edge case: renderer preserveDrawingBuffer not needed if we render right before toDataURL in same task.

Now, writing the behaviors carefully to avoid bugs:

Constants & helpers:

type:Uint8Array, life:Uint8Array, aux:Uint8Array, stamp:Uint32Array (init 0), frame starts 1.

rnd: mulberry32 seeded; rand() float, randInt(n).

Movement core:

We handle swaps explicitly:

• powder into liquid (density greater) → swap
• liquid into gas → swap
• gas into liquid → swap
• gas into gas? no.

tryMove(x,y,nx,ny): bounds check; i=idx(x,y), j=idx(nx,ny); if stamp[j]===frame → still allow? If dest was updated this frame, skip (avoid chains conflicts) — yes skip to be safe.

swapCells(i,j): swap type/life/aux; stamp both = frame.

Behavior powder (x,y,i,t):

Powders don't move horizontally otherwise.

Behavior liquid (x,y,i,t,disp):

Gas behavior (smoke/steam): rise = -gdir.

Gas swap with liquid: gas below water, rising → swap → bubble up.

FIRE behavior:

Base fire life: 25+randInt(35).

LAVA behavior: liquid disp 2; per frame also:

Movement like liquid with disp 2, plus glow.

ACID: liquid disp 4; per frame: pick one random 4-neighbor (or check all 4 with low prob): if dissolvable (SAND .2, STONE .05, SALT .5, GUNPOWDER .3, OIL .25, WOOD .12, PLANT .3, ICE .3, GLASS 0 (acid-proof glass, nice)) → rand<prob: neighbor→EMPTY; self: rand<0.35 → EMPTY(consumed) else maybe emit SMOKE above (0.05). Don't dissolve WALL/CLONE/VOID/LAVA/WATER? Acid into water just mixes (no).

SALT: powder; per frame: for 4-neighbors WATER → chance 0.08: self→EMPTY (dissolved), maybe water stays. Also salt+water→ slight... keep simple.

PLANT: static; growth: if any 4-neighbor WATER && rand<0.03: water→EMPTY; pick random empty 8-neighbor → PLANT. Fire ignition handled by fire side. Also plant in contact with LAVA handled there.

ICE: static; if neighbor FIRE/LAVA (check 4) → chance 0.2 → WATER. Also ICE below... fine.

GUNPOWDER: powder; ignition handled by fire/lava side. When ignited (helper igniteCell): becomes FIRE life long (40-70), plus immediately ignite all 8-neighbors that are GUNPOWDER (chain 1 cell/frame is slow; ignite neighbors directly = 3 cells/frame radius growth ≈ explosion speed at 60fps: 180 cells/sec — decent) and chance 0.3 spawn SMOKE above.

Clone: as planned; uses aux as target. Also clone rendering: pulsing magenta; when target set, tint toward target color? Render: mix magenta with target color 50% — needs type lookup in pixel loop: fine (aux read).

VOID: eat 8-neighbors except WALL/VOID/CLONE/GLASS? Glass acid-proof but void eats glass? Sure void eats everything except WALL/VOID/CLONE.

Wall: skip. Stone: skip. Glass: skip.

Counts: during scan loop count per type (for audio + HUD active cells).

Structure of step():

Note: count before stamp check (cell still exists). But a cell moved earlier this frame gets counted at destination too (stamp set, counts++ happens before stamp check → double count? A swapped cell: e.g., gas swapped with liquid — gas moved down (by liquid swapping), then later scan reaches it, counts it again? Double counting slightly off — acceptable for audio/stats. Or move counts after stamp check: then moved cells counted once (at origin, which processed them) — cells that were displaced by others (swapped without own processing) counted at their new location later... fine either way. Put counts[t]++ after stamp check for cleaner counts... but cells that were moved INTO earlier-scanned positions and stamped get skipped → not counted at all this frame — also fine. Keep counts after stamp check; simpler: skip counting precision worries.

inlineNeighbor loops: manual unrolled checks for 4-neighbors to keep speed.

Pixel rendering loop:

129,600 iterations with per-element switch — fine (~1-2ms).

Flicker: fire: f = 0.75+0.45Math.sin(time0.02 + nz*12.56) * ... combine two sines; brightness ~1.6-2.6 × orange color ramp: col = mix(yellow-white core, deep orange) by nz. Lava: base deep red-orange, pulse slow 1.2-1.6, brighter "hot spots" via nz>0.8.

Water: slight blue variation + subtle moving shimmer: 0.9+0.1sin(time.003 + y*.5 + nz6). Smoke: gray * (0.5+nz0.5), alpha 0 (no edge) but visible color ~0.25 brightness; alpha for smoke: still want visible! Alpha used for edge-AO AND bg blending: smoke should render its gray color blended over bg: give smoke alpha 0.55 (semi) — edges: alpha<0.5 threshold avoids AO on smoke but blends color. Use alpha as literal blend with bg in shader: col = mix(bg, cellCol, a). Fire alpha 0.9. Steam alpha 0.5 pale. Glass alpha 0.45. Others 1.

AO edges: use "solidity" separate from visual alpha? If glass alpha .45, neighbors see it as non-solid (threshold .5) → no AO around glass — fine.

Edge AO via 4 taps on alpha>0.55 as solid. Then shade= 1 - 0.12*emptySolidNeighbors (only when center solid). Top rim light: if above-neighbor not solid and center solid → col *= 1.12. Subtle depth.

Shader bg: gradient + grid + vignette + grain; frame border glow near edges (inside uv).

Also sim UV margins: painting at edges allowed; walls implicitly at border (treat out-of-bounds as blocked) — good.

HUD: FPS, cells count, selected element, brush size. Update every ~250ms.

Snapshot includes UI? No—canvas only. Good.

Sound design numbers — keep quiet tasteful.

Alright — also mobile: touch paints (single touch), two-finger pan? Implement basic: touchstart/move → paint. Pinch zoom skip. UI buttons must be big enough; palette scrollable horizontally on narrow screens (overflow-x auto).

Title: "Powder Alchemy". Folder: /space/demos/012-powder-alchemy/index.html.

Index page: add card at top of list: num 012, title "Powder Alchemy", description: "A falling-sand alchemy lab — paint 19 reactive elements (sand, water, oil, lava, acid, gunpowder, plants, clones & voids...) into a 130k-cell live simulation: lava quenches to stone in water, acid eats rock, plants drink ponds, gunpowder chains into fireballs. Featuring HDR glow rendering with bloom, zoom & pan, stamped starter scenes, wind & gravity controls, synthesized crackle/hiss/bubble audio and PNG snapshots."

Now write the code. I'll write it in one big file write. Let me draft carefully, mindful of syntax errors (I'll node --check after).

Some implementation details to nail:

Ortho camera fit:

Zoom: cam.zoom = clamp(zoom, 0.9, 14). Pan clamp:

Hmm: allow view center within plane half extents minus a bit: clamp cam.position.x to [-(W/2+10) + min(vw, W/2+10)?...]. Simplify: clamp x ∈ [-(W/2+8)+0? ...] Let me do:

When zoomed out (vw > W/2+12) → mx=0 → centered. Good.

Wheel zoom to cursor:

unproject with ortho works fine.

Painting pointer mapping:

Paint line interpolation between prev & current grid pos: steps = max(|dx|,|dy|); lerp.

paint(cx,cy):

Scenes functions (draw into grid):

helpers:

sceneVolcano():

Hmm careful: carving opening then lava is exposed at top of chamber → embers bubble out. Add gunpowder pocket: sDisc(cx+30, H-40, 6, GUNPOWDER) inside mountain near lava → eventual boom. // basins with water at left & right: left basin: sRect(30,H-40,34,H-9,WALL)? Build U: walls vertical at x=30 and x=110 from H-40..H-9; water fill between x=35..105, y=H-30..H-9. Right similar x=W-110..W-30. // trees: at x=140, x=W-140 (if outside basins...) place trunk sRect(x,H-26,x+2,H-9,WOOD), canopy sDisc(x+1,H-30,5,PLANT).

clear(); // soil: sand fill bottom with slope: for x, depth = 26 + 8sin(x0.05); sRect per column from H-1-depth..H-1 SAND // pond: basin center: carve sand: sDisc(cx, H-6, 34, EMPTY)? then water disc sDisc(cx, H-8, 30, WATER) but keep bottom sand rows: choose cy=H-4,r=30 → carves into ground; then water cy same r-4. // plants: sprinkle PLANT dots on soil surface y = surfaceY(x)-1 for random x positions. // wood trellis: two posts + beam: sRect(80,H-70,83,H-28,WOOD); sRect(160,...,WOOD); sRect(80,H-70,163,H-67,WOOD) // ice cubes: sRect(40,H-36,52,H-24,ICE) floating on? place on soil surface left. // salt pile: sDisc(W-60, surface, 8, SALT) // a couple of CLONE at side with water above: sRect(W-40,H-30,W-30,H-20,CLONE); sRect(W-38,H-50,W-32,H-32,WATER)

clear(); // floor: sRect(0,H-6,W-1,H-1,WALL) // tank A (acid): walls U at x=40..140, height H-80: side walls sRect(40,H-80,44,H-7,WALL), sRect(136,H-80,140,H-7,WALL); acid fill sRect(46,H-60,134,H-8,ACID); stone pellets above: few sDisc drops at y=H-100: they'll fall in and fizz. // tank B (oil/water): x=180..280: water bottom sRect(...,H-30..,WATER), oil above sRect(...,H-55..H-32,OIL) → oil sinks/floats show. // gunpowder keg: x=330..400: wood box sRect outline WOOD from H-50..H-7, fill GUNPOWDER, fuse: hLine from top to right at y=H-54: sRect(398,H-56,430,H-53,GUNPOWDER) trailing out; a WOOD torch bracket at end with FIRE cells above? Fire ignites immediately → fuse burns at start — maybe leave torch unlit: place FIRE 3 cells so it starts soon? Place small fire at fuse end: it will light. Fun: place fire. // clone tower: x=W-60: sRect(W-70,H-20,W-50,H-8,CLONE) with WATER above sRect(W-68,H-45,W-52,H-22,WATER) → drips... water falls onto clone, clone spawns water → fountain. // void pit: floor section x=300..360: replace floor with VOID at H-4..H-1? sRect(300,H-3,360,H-1,VOID) → things fall in and vanish.

Hmm, but different categories allow different swap targets. Parameterize: pass a "canSwap(dt)" decision inline instead. I'll write explicit code per behavior using low-level helpers:

For powder:

Wait — stamping rested cells wastes nothing but marks processed — good (prevents re-processing). But careful: stamping i at end when no move means later swaps into i blocked — that's fine/desirable.

But there's subtlety: powder diagonal into liquid swap — allows sideways sinking. OK.

Salt dissolve check before moving: if salt, check 4-neigh water chance dissolve → become EMPTY return.

Gunpowder: nothing special until ignited.

Liquid:

Note liquid moving through fire: water moving into fire cell — should extinguish fire: moveCell overwrites fire (fine, water wins; add steam chance? skip).

Gas:

life is Uint8: --life[i] when 0 → -1 wraps to 255! Uint8Array wrap: life[i]-1 assigned back → 255. Careful: do let l=life[i]-1; if(l<=0){...} else life[i]=l; — since life[i] is read as number 0..255, l is plain JS number; only wrapping on write. So fine as long as I write after check. Use explicit.

Fire:

become stamps so chained ones won't re-process this frame — they ignite next frame — 3 cells/frame spread. Good.

LAVA extra interactions inside liquid? Lava uses liquid() for movement but needs interactions: do interactions first in lavaCell() then call liquid movement if still lava.

Check cooled return properly.

ACID:

DISSOLVE map: SAND .18, STONE .05, SALT .5, GUNPOWDER .3, OIL .25, WOOD .12, PLANT .35, ICE .3, WATER 0? (acid dilutes: give WATER 0.02 → acid eaten by water slowly? fun: acid dissolves INTO water? skip: 0)

CLONE:

aux values: type ids 1..18 fit; 0=unset conflicts with EMPTY=0 fine.

VOID:

PLANT:

Growth too fast at 0.05/frame/plant → exponential explosion. Gate: only grow if rand<0.02 AND total... exponential still. Powder toy plants vine along surfaces. Limit: each plant cell gets aux = growth cooldown? Use aux as "children left" = 3: when grows, parent's aux-- and child aux = parent's remaining-1... caps total growth per seed to ~ (2^4)? Let me do: aux = generation budget; painted plants aux=6; child gets aux-1; only grow if aux>0. Exponential branching 2^7 = 128 cells per seed — fine, bounded. But growth also requires water neighbor — self-limiting.

WOOD: nothing (fire ignites). ICE: melt checks by fire/lava side plus ambient: if neighbor count of FIRE/LAVA... handled by them. Add: ICE adjacent to LAVA handled. Also ice in warm? skip.

SALT: dissolve handled in powder wrapper:

Counts & stats fine.

setCellRaw(j,t): type=t; life=defaultLife(t); aux= t===PLANT?6 : 0; stamp[j]=frame (spawned cells rest this frame).

defaultLife(t): FIRE 25+irand(35); SMOKE 60+irand(100); STEAM 40+irand(60); else 0.

Paint uses same via setCell but without stamp (painted cells can act immediately) — set stamp=0? paint writes type/life/aux, leaves stamp as-is (old frame) → will be processed this frame if not yet scanned; fine.

Rendering pixel loop per element — write a function renderPixels(t) with switch; to keep it fast, precompute per-cell static noise cn Float32Array once (hash of i). For fire/lava use Math.sin with cn.

Now shader:

uTime used only for grain jitter — fine (grain animated).

Wait: rim light uses aU = neighbor ABOVE in uv space = v+py → v increases upward? For the plane geometry, v=1 is top. DataTexture flipY=false with row0=bottom... earlier decided: image row0 = grid bottom row (y=H-1). So texture v=0 ↔ grid y=H-1 (bottom), v=1 ↔ grid y=0 (top). "Above" in world (grid y-1) = higher v. So aU sample (uv + py) = neighbor above. Correct as written.

Also fire should lean with wind visually? skip.

Post chain: RenderPass, UnrealBloomPass(new Vector2(w,h), 0.55, 0.5, 0.8), OutputPass.

Audio details:

Noise buffer: 2s white.

Careful: exponentialRampToValueAtTime can't start from 0 — use setValueAtTime(0.0001). fine.

HUD updates: fps ema; cellCount = sum counts; show "FPS 60 · 41,203 cells · Brush 6 · Tool: Water".

Toolbar build: TOOLS array with {id, name, color css, key}. Include ERASE as pseudo-tool id=-1 (EMPTY).

Tool click → select; re-render chips selection ring.

Scene select: with '', Volcano, Garden, Lab → on change run scene fn, reset to ''.

Clear button → clear() (confirm? no).

Gravity button label toggles ⬇/⬆.

Everything wired. Also add wheel listener passive:false preventDefault.

Pointer events: use pointerdown/move/up on renderer canvas; setPointerCapture. Right button pan: track button flags (e.buttons). pointerdown: if e.button===2 || e.button===1 → panning mode. Else painting. contextmenu preventDefault.

Alt+click pipette: on pointerdown with e.altKey → sample cell, select tool, no paint.

Cursor ring div: update in pointermove & render loop (zoom changes scale): diameter px = 2brush * pxPerUnit where pxPerUnit = canvas.clientHeight / (2baseHalfH/cam.zoom)... vertical world span visible = 2baseHalfH/zoom. So pxPerUnit = clientHeight / (2baseHalfH/zoom) = clientHeightzoom/(2baseHalfH). Store and update.

Edge: brush radius in cells; world units per cell = 1 (plane W×H, grid cell = 1 unit).

Also hide ring when pointer over UI (canvas only) — attach to canvas events, hide on pointerleave.

Initial scene: load sceneVolcano() on start so first paint is alive immediately.

Alright, also step speed slider (1-3).

Let me also double check UnrealBloomPass constructor signature: (resolution: Vector2, strength, radius, threshold). Yes.

OutputPass(): no args.

Imports:

All exist at three@0.160.0/examples/jsm/postprocessing/. Yes.

Plane: THREE.PlaneGeometry(W, H) centered at origin; ShaderMaterial with uniforms; mesh added to scene; camera ortho.

Now — write the whole file. I'll write it to /space/demos/012-powder-alchemy/index.html. mkdir first.

Let me carefully draft the JS sim section fully, then HTML/CSS, then assemble. I'll write directly into the file via write tool (large content OK).

One more check — the FLAM map (ignition chance per frame adjacent to fire): WOOD 0.02, PLANT 0.05, OIL 0.18, GUNPOWDER 0.9, SMOKE 0? maybe smoke flammable? no. GUNPOWDER also handled with burst.

DENS: SAND 10, SALT 10, GUNPOWDER 12, WATER 5, OIL 3, ACID 6, LAVA 8, gases 1 (implicit), STONE/WALL/etc static (0).

DISP (liquid dispersion): WATER 5, OIL 3, ACID 5, LAVA 2.

Categories: CATY: EMPTY→NONE, WALL→SOLID, STONE→SOLID, WOOD→SOLID, PLANT→SOLID, ICE→SOLID, GLASS→SOLID, CLONE→SOLID(spec), VOID→SOLID(spec), SAND/SALT/GUNPOWDER→POWDER, WATER/OIL/ACID/LAVA→LIQUID, SMOKE/STEAM→GAS, FIRE→FIRE.

In step switch: case POWDER-ish individually: SAND, SALT, GUNPOWDER → powder() (salt pre-check dissolve). case WATER/OIL: liquid(). ACID → acid(). LAVA → lava(). SMOKE/STEAM → gas(). FIRE → fire(). WOOD/WALL/STONE/GLASS → stamp only? They don't act; but stamp them? No need to stamp; just skip (no stamp → could be re-processed? They're processed once per scan anyway since each cell visited once per frame; stamp only matters for cells that might be visited again after moving. Static cells: skip without stamp — but then a swap INTO their cell... swaps check stamp of dest; static cells unstamped can be swapped INTO? moveCell targets only EMPTY cells so never into them. swapCell targets: powder into liquid etc. — statics never dest. OK statics skip w/o stamp. But counts: increment counts for them (count before switch). Counting before stamp-check vs after: put counts[t]++ right after EMPTY check & before stamp check — slight double count for moved cells, immaterial. Simplest.

VOID, CLONE, PLANT, ICE → their handlers. ICE handler: check neighbors FIRE/LAVA → melt. (fire side handles too; keep ICE passive — fire/lava melt it. So ICE static skip.)

FIRE life in water: fire checks neighbors WATER → l-=5. Good.

Steam condense: in gas() on death — steam → WATER chance 0.25 else EMPTY. Also steam touching ICE? skip.

Smoke above water? nothing.

Wind effect on fire movement horizontal bias: implement in fire's sideways jitter: dir biased by wind.

I think the sim is solid. Let me also add MAX frame handling: frame as Number increments forever — Uint32 stamp compare fine until wrap ~4.29e9 steps (never in practice).

Now — painting gases density: SMOKE/STEAM/FIRE sprinkle 0.35 per cell in brush circle; liquids/powders 1.0? Painting liquids solid block is fine.

Eraser: set EMPTY for all in circle (life/aux 0).

Also painting WALL over stuff overwrites — fine.

Pipette: alt+click: t=type[cell]; if t===EMPTY → select eraser; else select matching tool.

OK writing now. Also remember meta viewport, title "Powder Alchemy — Three.js Demo". Favicon: skip or inline emoji favicon via data URI (nice touch): — cheap, previous demos may not have; add simple.

Let me write the file.

CSS plan:

body { margin:0; background: #05060a; overflow:hidden; font-family: system-ui...; color:#e5e7eb; } #c (canvas) { position:fixed; inset:0; display:block; touch-action:none; } .panel base: background: rgba(13,15,24,.72); border:1px solid rgba(99,102,241,.25); backdrop-filter: blur(10px); border-radius:12px; #hud { position:fixed; top:12px; left:12px; padding:10px 14px; } h1 font-size 15px gradient text. #stats { font-size:11px; color:#9ca3af; margin-top:4px; font-variant-numeric: tabular-nums; } #topbar { position:fixed; top:12px; right:12px; display:flex; gap:6px; padding:8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; max-width: 60vw;} button.tbtn { font-size:12px; padding:6px 10px; border-radius:8px; background:rgba(30,32,48,.8); color:#c7d2fe; border:1px solid rgba(99,102,241,.25); cursor:pointer; } button.tbtn:hover { border-color:#6366f1; } button.tbtn.active { background:#4f46e5; color:white; } select same style. #toolbar { position:fixed; left:50%; transform:translateX(-50%); bottom:12px; display:flex; flex-direction:column; gap:8px; padding:10px 12px; max-width:min(96vw, 900px); } #palette { display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; } .chip { display:flex; align-items:center; gap:6px; padding:6px 9px; border-radius:999px; background:rgba(30,32,48,.8); border:1px solid rgba(255,255,255,.08); font-size:12px; color:#d1d5db; cursor:pointer; white-space:nowrap; } .chip .dot { width:10px;height:10px;border-radius:50%; background:var(--c); box-shadow:0 0 6px var(--c); } .chip.sel { border-color:#818cf8; background:rgba(79,70,229,.35); color:#fff; } .chip .k { font-size:9px; color:#6b7280; } #controls { display:flex; gap:14px; align-items:center; font-size:11px; color:#9ca3af; flex-wrap:wrap; } input[type=range] { accent-color:#6366f1; width:110px; } #hint { position:fixed; left:12px; bottom:12px; font-size:11px; color:#6b7280; max-width: 34ch; padding:8px 10px; } #cursorRing { position:fixed; border:1.5px solid rgba(199,210,254,.7); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); display:none; box-shadow:0 0 12px rgba(129,140,248,.35) inset; } media (max-width: 760px): hint display none.

Fine. Now the big JS. Let me write it out mentally-complete then dump:

Constants, PRNG, DEFs table with color + name for tools:

Tools list:

Hotkey map: key char → tool.

COL array indexed by element id (Float triples) + ALPHA array.

DIR4 = [[1,0],[-1,0],[0,1],[0,-1]]; DIR8 = 8.

Main loop:

renderPixels(now): time in ms.

Pixel loop with switch per element writing to px Float32Array. For EMPTY, write rgb 0 alpha 0 (bg handled in shader). Let me write per-case color math:

COL values as Float32Array flat [19*3].

The generic default covers WALL, STONE, SAND, SALT, GUNPOWDER, OIL, WOOD, PLANT, ACID with m variation; ACID add glow: m1.2 + slight pulse (acid glows a bit for bloom? threshold .8 — acid 0.951.2=1.14 → slight bloom. nice: acid *1.15).

Everything else fine.

updateHUD: every 200ms: 60 fps · 48,213 cells · Water · brush 6.

Ring update: place at last pointer client pos, size = 2brushpxPerUnit, display block when pointer over canvas.

Screenshot:

Sound button toggles label 🔊/🔇.

Now potential pitfalls to double check while writing:

• become() used on neighbor j must respect stamp? We check stamp[j]!==frame before transforms in most cases; become sets stamp.
• moveCell into cell whose stamp===frame prevented by callers checking stamp[j].
• In fire() movement, moving into GAS cells: swap? fire rising into smoke: just overwrite smoke (moveCell overwrites gas). Simpler: allow moveCell into EMPTY or GAS (overwrite). fine.
• gas() moving into FIRE? no.
• powder sinking swaps with liquid: swapCell swaps life/aux too — a water cell swapped upward keeps life 0 — fine.
• salt dissolve: also make SALT+WATER visual: skip.
• clone spawning FIRE: defaultLife fire ok.
• void eating: also eats falling? yes all.
• gravity flip: gdir=-1: powders fall up; scans top-down; gases sink; liquids pool on ceiling; void etc unaffected. Also scene "ground" at bottom unaffected. Fun.

Painting while paused works (cells just sit).

Resize handler: fitCamera(); renderer.setSize; composer.setSize; bloom.setSize? EffectComposer.setSize handles passes. setPixelRatio too.

Initial: fitCamera, sceneVolcano(), build palette UI, listeners, rAF.

Alright — also the updated/stamp init: Uint32Array zeros; frame starts at 1 → all cells unstamped initially. Good.

Edge: H-1-n loop with gdir=-1 → y=n (top-down). Falling direction +gdir=-1 = up. Powder: ny=y-1 top — good.

Sand into FIRE: overwrite fire (moveCell) — smothering. ok.

One more: performance of fire neighbor loop creating arrays [[x,y-gdir],...] per cell per frame → GC pressure. Avoid allocations: write inline checks or use static DIR arrays with dx/dy numbers. Use DIR4 loops with primitive destructure of a shared Int8Array pairs — iterating over a frozen array of [dx,dy] allocates nothing if array preallocated (destructuring of existing arrays doesn't allocate new ones). Preallocate DIR4 = [[1,0],[-1,0],[0,1],[0,-1]] once. Destructure const dx=D[k][0] — fine, no allocation.

For 8-neighbors: DIR8 preallocated.

OK. Let me now write the whole file content. I'll be methodical. Also ensure no stray </script> in strings (like in hint text "script"? avoid).

Also careful: in HTML, Select element for scenes styled.

After writing: extract to /tmp/check.mjs and run node --check. Then curl -I the 5 CDN URLs (importmap base + the 4 addon paths + lil-gui not used — skip lil-gui since custom UI). Then update demos index.html (insert new card after <!-- New demos are added here -->). Then final verify.

Line count target: fine whatever it ends up (~900-1100 lines).

Let me write the file now.

Now write the big file. I'll write it in one go.

************************************************************************************************************************************************************ge.

***************************************************************************************************************************ss.

The replace failed — the search text didn't match. The index.html likely has different whitespace. Let me check the exact text quickly and do the replacement with the exact match. From the earlier grep output, the file had:

Wait, in the cat output earlier it showed:

That was with escaped quotes in the JSON output. The indentation: <!-- New demos are added here --> (8 spaces) then <a class="demo-card" (10 spaces). That's exactly what I searched for... but maybe there are trailing whitespace or \r\n line endings? Let me use sed to do the insertion instead, targeting the line number, which is more robust. Quick approach with awk/sed. I must be fast — 90% time used. Let me do it with a single sed command anchored on the comment line only.