30:T40f,{ let fluidSystem = makeFluidSystem(); const c = DOM.context2d(width, height); let reset = html``; let elem = html`

${ c.canvas }

Melt David ${reset}

`; reset.addEventListener("click", () => { fluidSystem = makeFluidSystem(); }); const project = ({ x, y }) => [ ~~(x * (width / floydSteinberg.width) * (1 / scale)), ~~(y * (height / floydSteinberg.height) * (1 / scale)) ]; while (true) { c.clearRect(0, 0, width, height); c.fillStyle = "#000"; for (let p of fluidSystem.particles) { if (p.material.color === "#000") { c.fillRect(...project(p.position), 2, 2); } } c.fillStyle = "#eee"; for (let p of fluidSystem.particles) { if (p.material.color === "#eee") { c.fillRect(...project(p.position), 2, 2); } } yield elem; fluidSystem.update(0.1); } }31:T817,md`**Okay, so what is this?** Yesterday on Hacker News (forgive me), I saw [Taichi](http://taichi.graphics/), a computer graphics library. One of the demos looked a lot like [this spectacular GIF](https://www.are.na/block/2034785) that has been passed down through the generations. So I was inspired to try and recreate a similar look. I noticed that the technique used by Taichi was called MPM (did you mean NPM), so I looked it up on NPM and found [Floom](https://www.npmjs.com/package/floom-mpm), written by [Stefan Ramsen](https://github.com/onsetsu), a brilliant PhD student. Floom is cool, but unfortunately it doesn’t work off the bat, for a number of reasons, which I fixed in a fork. I’ll submit a PR, though it has diverged a bit. Anyway, the other ingredient is dithering. Luckily I’ve [already burned a lot of time understanding and implementing dithering](https://observablehq.com/@tmcw/dithering), so a [Floyd-Steinberg](https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering) dither of [David (Michelangelo)](https://en.wikipedia.org/w/index.php?title=Michellangelo%27s_David) is just a quick [import](https://observablehq.com/@observablehq/introduction-to-imports) away. From there it was just connecting things: translating white pixels to off-white particles, and black pixels to black. Understanding how Floom thinks of 'walls' in its [axis-aligned bounding box](https://en.wikipedia.org/wiki/Minimum_bounding_box#Axis-aligned_minimum_bounding_box) system, and how it deals with scale (a bit oddly). Consider it a bit of a jumping-off point if you want to explore similar space. Floom doesn’t have documentation, so you’ll (like me) need to understand it by reading it. But on the bright side, I’ve already tried to accomplish this sort of effect with 2D physics system, and they haven’t had one tenth the performance of Floom, and it’s really quite pleasant to use. You might want to consider melting your own Ancient Greeks - perhaps the Artemision Bronze, or a Venus de Milo – or some other subject matter entirely.`32:[] 2e:{"title":"David melt","cells":[{"id":0,"value":"md`# David melt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":529,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"makeFluidSystem = () => {\n var fluidSystem = new Floom.System();\n\n fluidSystem.gravity = new floom.Vector2(0, 0.2); // 0.004, 0.02\n fluidSystem.wall = new floom.AABB(\n new floom.Vector2(0, 0),\n new floom.Vector2(\n floydSteinberg.width * scale,\n floydSteinberg.height * scale\n )\n );\n\n var mat0 = fluidSystem\n .createNewMaterial()\n .setParticleMass(2)\n .setColor(\"#000\");\n var mat1 = fluidSystem\n .createNewMaterial()\n .setParticleMass(2)\n .setColor(\"#eee\");\n\n function px(x, y) {\n return x * 4 + y * data.width * 4;\n }\n\n for (let y = 0; y < data.height; y++) {\n for (let x = 0; x < data.width; x++) {\n if (!data.data[px(x, y)]) {\n var p = new Floom.Particle(x * scale, y * scale, 0, 0, mat0);\n fluidSystem.addParticle(p);\n } else {\n var p = new Floom.Particle(x * scale, y * scale, 0, 0, mat1);\n fluidSystem.addParticle(p);\n }\n }\n }\n\n return fluidSystem;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"scale = 0.25","pinned":false,"hidden":false,"mode":"ojs"},{"id":452,"value":"width = Math.min(window.innerWidth, 480)","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"height = width * (floydSteinberg.height / floydSteinberg.width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"import {floydSteinberg} from \"@tmcw/dithering\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"data = floydSteinberg\n .getContext(\"2d\")\n .getImageData(0, 0, floydSteinberg.width, floydSteinberg.height)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"floom = await import(\"@tmcw/floom-mpm@1.1.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"Floom = floom.default","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}