30: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; } }31:[] 2e:{"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"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":110,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"//canvas.time","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"import {slider, text} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}