2c:null 2d:["$","title",null,{"children":"Cloudy Fill | Fabian Iwand | Observable"}] 32:Tb0f,canvas = { restart; const w = 800, h = 300; // Primary color channel, alpha channel, right-hand safe zone. const CC = 2, CA = 3, SAFE = 3; const indices = []; const ctx = DOM.context2d(w, h, 1); ctx.canvas.style.maxWidth = '100%'; const image = ctx.getImageData(0, 0, w, h); const levels = Array.from({length: h}) .map((v,i,a) => (i) / a.length) .map(t => lerp(200, 0, t**2) | 0); levels.forEach((lvl, y) => grow(y * w, lvl)); function select(indices) { return lerp(.5, 1, Math.random()) * indices.length | 0; } // Moves all pixels one pixel to the left. function moveLeft({data, width: w}, indices) { for(let i = 4, s = w * 4; i < data.length; i += s) { data.copyWithin(i - 4, i, i + s - 4); } for(let o = 0, l = indices.length; o < l; o++) { if(indices[o] % w) indices[o] -= 1; } } // Flood test: alpha channel is empty. function test(i0, i) { return image.data[(i * 4) + CA] === 0; } function grow(i, lvl, add = true) { image.data.set([lvl*1.9, lvl*1.2, lvl, 255], i * 4); add && indices.push(i); } function spread(i0, test, blend, add = true) { const x = i0 % w, y = i0 / w | 0; const il = i0 - 1, ir = i0 + 1, iu = i0 - w, id = i0 + w; let s = false; if(x > 0 && test(i0, il)) grow(il, blend(i0, il), add), s = true; if(x < w - 1 && test(i0, ir)) grow(ir, blend(i0, ir), add), s = true; if(y > 0 && test(i0, iu)) grow(iu, blend(i0, iu), add), s = true; if(y < h - 1 && test(i0, id)) grow(id, blend(i0, id), add), s = true; return s ? x : -1; } function blend(i0, i) { return lerp(image.data[i0 * 4 + CC], levels[i / w | 0], viewof blendDefault.value); } function bleed(steps, cmp) { const {data} = image, l = data.length / 4; const test = (i0, i) => data[i * 4 + CA] && cmp(data[i0 * 4 + CC], data[i * 4 + CC]); const blend = (i0, i) => data[i0 * 4 + CC]; for(let n = 0; n < steps; n++) { const i0 = (Math.random() * (w - SAFE) | 0) + (Math.random() * h | 0) * w; if(data[i0 * 4 + CA]) spread(i0, test, blend, false); } } function step() { const o = select(indices); const i0 = indices[o]; splice(indices, o); return spread(i0, test, blend); } // Init canvas. while(step() + SAFE < w); moveLeft(image, indices); while(true) { const s = viewof steps.value; for(let n = 0; n < s; n++) { if(step() + SAFE >= w) moveLeft(image, indices); } const bs = viewof bleedSteps.value; if(bs) { const bd = viewof bleedDir.value; bleed(bs * (1-bd), (l0, l1) => l0 < l1); bleed(bs * bd, (l0, l1) => l0 > l1); } //mutable frontSize = (indices.length / 50 | 0) * 50; ctx.putImageData(image, 0, 0); yield ctx.canvas; } }33:[] 30:{"id":"d844b1091352a810","slug":"cloudy-fill","title":"Cloudy Fill","thumbnail":"15020608f25d4e97470c6899169dee215b5ac3ba998468c8b3112e56244f0473","access_level":"public","create_time":"$D2019-06-02T13:44:03.484Z","update_time":"$D2019-06-04T21:01:59.624Z","view_time":null,"first_public_time":"$D2019-06-02T23:51:43.756Z","fork":{"id":"7c66b7bf018ed680","slug":"waterfall-fill","title":"Waterfall Fill","owner":{"id":"c8b34d926b5d440d","login":"rlesser","name":"Robert Lesser"}},"stars":32,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":665,"publish_version":665,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":8,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Cloudy Fill","cells":[{"id":0,"value":"md`\n# Cloudy Fill\n\nFlood Fill based on [Waterfall Fill](https://observablehq.com/@rlesser/waterfall-fill) (in turn based on [Randomized Flood Fill](https://observablehq.com/@mbostock/randomized-flood-fill)), but heavily rewritten. \nIntroduces \"bleed\", i.e., colors may fill into their neighbors of higher or lower brightness.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"viewof blendDefault = slider({\n title: 'Blend to default colors',\n description: 'Keeps individual colors from taking over the canvas. Higher value = lower contrast.',\n min: 0,\n max: .15,\n precision: 3,\n format: '.1%',\n value: .02,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":345,"value":"viewof steps = slider({\n title: 'Speed',\n description: 'Flood steps per draw.',\n min: 0,\n max: 10000,\n step: 10,\n value: this ? this.value : 500,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"viewof bleedSteps = slider({\n title: 'Bleed amount',\n description: 'Random flood fills across the whole canvas.',\n min: 0,\n max: 300000,\n step: 100,\n value: this ? this.value : 40000,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":505,"value":"viewof bleedDir = slider({\n title: 'Bleed direction',\n description: 'Ratio of bleed movement (0 = dark to light, 1 = light to dark).',\n min: 0,\n max: 1,\n step: .05,\n value: this ? this.value : 0.05,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":536,"value":"viewof restart = html`