Plumbin' models dynamic pressure distributed over networks as they are constructed. github 
Connect the faucet
to the spout
to let water flow.
http://plumbin.ward.wiki.org/assets/pages/plumbin-in-wiki/mosaic.html HEIGHT 330
Hover near joints to measure pressure on either side.
Challenge: Connect all faucets to spouts without adding or removing tiles. Extra credit: use all tiles.
See also Start Simple
.
The app dates back to 1985. We started this version by converting old Tiles to png in GT. Then we splatter them all over a table and hook up drag logic.
PNGReadWriter putForm: self onFileNamed: fileName
pages/plumbin-in-wiki/tiles
We recall project history. See Plumbin' by Example
pages/plumbin-in-wiki
The pressure tank has presented a conversion challenge. Eric Dobbs worked out a solution using sweet and seldom used features of css but that broke the simplicity of sliding images around. See CSS Tank
pages/plumbin-in-wiki/tanks
When installed, the browser could not fetch the tank images fast enough to keep up with the simulation. This loop preloads all 27 images in a few tenths of a second.
let iota = Array.from({length: 27}, (_,i) => i+1) let tanks = await Promise.all(iota.map(i => new Promise(resolve => { let img = new Image() img.dataset.tile = 'tank' img.onload = resolve(img) img.src = `./tanks/tank${i}.png` }) ))
http://plumbin.ward.wiki.org/assets/pages/plumbin-in-wiki/tank-test.html HEIGHT 50