2c:null 2d:["$","title",null,{"children":"Sizzle 2 | Fabian Iwand | Observable"}] 32:T622,canvas = { const img = new Image(); img.src = URL.createObjectURL(await fetch(src).then(r => r.blob())); await img.decode(); const w = img.naturalWidth * scale | 0, h = img.naturalHeight * scale | 0, xm = w - 1, ym = h - 1; const cSource = DOM.context2d(w, h, 1); cSource.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, w, h); const c = DOM.context2d(w, h, 1); c.drawImage(cSource.canvas, 0, 0); c.canvas.style.maxWidth = '100%'; const imgData = c.getImageData(0, 0, w, h); const data = new Uint32Array(imgData.data.buffer); const rng = Math.random, dir = new Uint32Array(4); let n = 0, last = Date.now(); const cmp = (i, i2) => data[i] > data[i2]; while(true) { const steps = w * h * viewof density.value | 0; const len = +viewof length.value; let i = rng() * data.length | 0; for(let j = 0; j < len; j++) { const x = i % w, y = i / w | 0; let l = 0; if(x > 0 && cmp(i, i - 1)) dir[l++] = i - 1; if(x < xm && cmp(i, i + 1)) dir[l++] = i + 1; if(y > 0 && cmp(i, i - w)) dir[l++] = i - w; if(y < ym && cmp(i, i + w)) dir[l++] = i + w; if(!l) break; const i2 = dir[rng() * l | 0]; data[i2] = data[i]; i = i2; } if(++n < steps) continue; n = 0; c.putImageData(imgData, 0, 0); c.canvas.time = Date.now() - last; last = Date.now(); if(0 < (c.globalAlpha = +viewof fade.value)) { c.drawImage(cSource.canvas, 0, 0); imgData.data.set(c.getImageData(0, 0, w, h).data); } yield c.canvas; } }33:[] 30:{"id":"a287d6c193dced71","slug":"sizzle-2","title":"Sizzle 2","thumbnail":"c2d825fb23c5a05ab6bf9b9f19e719aa502f4e6cdc3c305042955683681733e3","access_level":"public","create_time":"$D2019-12-24T12:28:22.254Z","update_time":"$D2021-09-30T11:32:15.026Z","view_time":null,"first_public_time":"$D2019-12-24T12:49:23.928Z","fork":{"id":"72c15543ff00abcb","slug":"sizzle","title":"Sizzle","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"stars":24,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":227,"publish_version":227,"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":4,"collection":{"id":"414312a67ea30ac3","slug":"generative","title":"Generative","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Sizzle 2","cells":[{"id":0,"value":"md`# Sizzle 2\n\nFlood fill meets random walk. This fork prevents darker^\\\\* colors from bleeding into lighter^\\\\* colors.\n\n^* By INT color value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"viewof density = slider({\n title: 'Intensity',\n min: 0,\n max: .25,\n precision: 3,\n format: '.1%',\n value: .065,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"viewof length = slider({\n title: 'Path length',\n min: 1,\n max: 100,\n step: 1,\n value: 10,\n display: v => `${v}px`,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"viewof fade = slider({\n title: 'Fade',\n min: 0,\n max: .5,\n precision: 2,\n format: '.0%',\n value: .08,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"viewof src = {\n const t = text({\n title: 'Source',\n description: 'CORS enabled images only. Any image URL from Unsplash or Imgur will work.',\n value: 'https://images.unsplash.com/photo-1481819613568-3701cbc70156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',\n submit: true,\n });\n t.input.style.fontSize = '.8rem';\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"viewof scale = slider({\n title: 'Size',\n min: .25,\n max: 2,\n precision: 2,\n format: '.0%',\n value: .8,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":171,"value":"//canvas.time","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"import {slider, text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"