2e:null 2f:["$","title",null,{"children":"Diffusion-limited aggregation | Tom MacWright | Observable"}] 34:[] 32:{"id":"3613128c9081f6e9","slug":"diffusion-limited-aggregation","title":"Diffusion-limited aggregation","thumbnail":"d4e31d6d3702941e4df9549a05da69e46820e262e05e635afc113ebea12106b9","access_level":"public","create_time":"$D2019-02-07T20:56:21.184Z","update_time":"$D2019-02-14T23:12:15.080Z","view_time":null,"first_public_time":"$D2019-02-07T21:56:59.613Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"b47c3705cfcd7c1b","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":"starter_2024"},"version":290,"publish_version":290,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null}],"members":[{"type":"individual","id":"0bf14b8d9c6eb88a","login":"tmcw","name":"Tom MacWright","avatar_url":"https://avatars-next.observableusercontent.com/669bdd774da8a1b9c1b7706ecbc1ea5136b9932c3d5e86b753aa5a098005f674","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Diffusion-limited aggregation","cells":[{"id":0,"value":"md`# Diffusion-limited aggregation\n\nBased heavily on [Michael Drzal’s bl.ock](https://bl.ocks.org/xmichaelx/39fa023f9ce1fb82d5c0). I made it because [Michael Fogleman](https://github.com/fogleman/dlaf) wrote an implementation recently that’s probably 1,000 times faster than this one. And Michael Fogleman also pointed to [dla-nd](https://github.com/markstock/dla-nd) by [Mark Stock](http://markjstock.org/dla-nd/) which is also so cool. Anyway, I made it kind of pretty and fast but otherwise didn’t invent anything. Tweak those sliders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"{\n const ctx = DOM.context2d(width, height, 1);\n ctx.canvas.style.imageRendering = \"pixelated\";\n ctx.canvas.style.width = \"100%\";\n ctx.fillStyle = \"#000\";\n const imageData = ctx.createImageData(width, height);\n\n const values = new Uint32Array(imageData.data.buffer);\n const vEmpty = hsl2Value(0, 0, 0);\n const vFloat = hsl2Value(hue, 1, .2);\n const vStuck = hsl2Value(hue, 1, contrast);\n \n while (true) {\n for (let pass = 0; pass < passes; pass++) {\n for (let i = 0; i < count; i++) {\n if (particles.stuck[i] === 0) {\n updateSingleParticle(i);\n }\n }\n }\n for (let i = 0; i < values.length; i++) {\n values[i] = vEmpty;\n }\n for (var i = 0; i < count; i++) {\n const x = particles.x[i];\n const y = particles.y[i];\n const stuck = particles.stuck[i];\n values[y * width + x] = particles.stuck[i] ? vStuck : vFloat;\n }\n ctx.putImageData(imageData, 0, 0);\n yield ctx.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof passes = slider({\n min: 1,\n max: 50,\n step: 1,\n value: 1,\n title: \"Steps per frame (speed)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof hue = slider({ min: 0, max: 360, step: 1, title: \"Hue\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"viewof contrast = slider({ min: 0, max: 1, step: 0.01, title: \"Contrast\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"viewof reset = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"field = {\n reset;\n const field = new Uint8Array(width * height);\n const fcenterX = Math.floor(width / 2);\n const fcenterY = Math.floor(height / 2);\n field[fcenterX + fcenterY * width] = 1;\n return field;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"particles = {\n reset;\n const particles = {\n x: new Uint16Array(count),\n y: new Uint16Array(count),\n stuck: new Uint8Array(count)\n };\n for (let i = 0; i < count; i++) {\n resetSingleParticle(particles, i);\n }\n return particles;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"resetSingleParticle = (particles, i) => {\n let x = Math.floor(Math.random() * width);\n let y = Math.floor(Math.random() * height);\n\n while (field[y * width + x]) {\n x = Math.floor(Math.random() * width);\n y = Math.floor(Math.random() * height);\n }\n\n particles.x[i] = x;\n particles.y[i] = y;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"function alone(i) {\n let cx = particles.x[i];\n let cy = particles.y[i];\n\n let lx = cx - 1;\n let rx = cx + 1;\n let ty = cy - 1;\n let by = cy + 1;\n\n if (\n cx <= 0 ||\n cx >= width ||\n lx <= 0 ||\n lx >= width ||\n rx <= 0 ||\n rx >= width ||\n cy <= 0 ||\n cy >= height ||\n ty <= 0 ||\n ty >= height ||\n by <= 0 ||\n by >= height\n ) {\n return true;\n }\n\n cy *= width;\n by *= width;\n ty *= width;\n\n if (field[cx + ty] || field[lx + cy] || field[rx + cy] || field[cx + by]) {\n return false;\n }\n\n if (field[lx + ty] || field[lx + by] || field[rx + ty] || field[rx + by]) {\n return false;\n }\n\n return true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"updateSingleParticle = i => {\n let x = particles.x[i];\n let y = particles.y[i];\n\n x += Math.random() > 0.5 ? 1 : -1;\n y += Math.random() > 0.5 ? 1 : -1;\n\n if (x < 0 || y < 0 || x >= width || y >= height) {\n return resetSingleParticle(particles, i);\n }\n\n particles.x[i] = x;\n particles.y[i] = y;\n\n if (!alone(i)) {\n particles.stuck[i] = 1;\n field[y * width + x] = 1;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"count = 40000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = width * 0.75","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"width = Math.floor(window.innerWidth / 2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"function hsl2Value(h, s, l) {\n const [r, g, b] = hsl2rgb(h, s, l);\n return new Uint32Array(new Uint8ClampedArray([r, g, b, 255]).buffer)[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"hsl2rgb = require(\"https://bundle.run/hsl-rgb\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"