2f:T479,{ const {width: w, height: h, data: maskData} = maskImageData, mask = new Uint8Array(maskData.length / 4), easedPalette = new Uint32Array(256), imageData = new ImageData(w, h), uint32 = new Uint32Array(imageData.data.buffer), ctx = DOM.context2d(w, h, 1); ctx.canvas.style.cssText += 'max-width:100%;background:red'; for(let i = 3; i < maskData.length; i++) mask[(i-3)/4] = maskData[i]; let raf; const update = () => { const t = timer(), coast = viewof coastLevel.value, min = .5 - viewof stepRange.value, max = .5 + viewof stepRange.value; // Update eased palette. for(let i = 0, l; i < 256; i++) { l = i/255 < coast ? 1 : easing(i/255 - coast, t); easedPalette[i] = palette[clamp(0, 255, Math.floor(smoothstep(min, max, l) * 255))]; } // Apply palette. for(let i = 0, level; i < mask.length; i++) uint32[i] = easedPalette[mask[i]]; ctx.putImageData(imageData, 0, 0); raf = requestAnimationFrame(update); }; invalidation.then(() => cancelAnimationFrame(raf)); update(); return ctx.canvas; }30:[{"id":"e2dae355b6a64e03a0bb59f33f6464c3e5f12e776d5df95c84ee3dab0ffa40ad2e84c7b09484c30a1af0bf5ce6f4adeaa46c012d9451caa724fbf73458b0c346","href":"https://static.observableusercontent.com/files/e2dae355b6a64e03a0bb59f33f6464c3e5f12e776d5df95c84ee3dab0ffa40ad2e84c7b09484c30a1af0bf5ce6f4adeaa46c012d9451caa724fbf73458b0c346","name":"image@3.png","type":"image/png","lastModified":1613353722334.796,"size":209296}] 2d:{"title":"Distance Field Waves","cells":[{"id":0,"value":"# Distance Field Waves\n\n_This notebook is an experiment that was originally created in 2021. It received some minor cleanup but has otherwise been published as is._","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"{\n const w = 978, s = w, h = 100;\n const st = 1/s, sw = w/s;\n \n const bg = `linear-gradient(0deg,${Array.from({length: 11}, (v,i) => `${color(i/10)} ${i/10*100}%`)})`;\n const path = svg``;\n const view = svg`

`;\n return new Uint32Array(rgba.buffer);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"timer = () => Date.now() / viewof duration.value % 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"viewof image = Inputs.radio(new Map(Object.entries({\n splash: FileAttachment(\"image@3.png\"), // Source: https://www.subpng.com/png-0el1v6/\n})), {label: \"Image\", key: \"splash\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1029,"value":"image.image({width: 400})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"viewof maskOptions = Inputs.form({\n invert: Inputs.toggle({label: \"Invert\", value: true}),\n limit: Inputs.number([0, 255], {step: 1, label: \"Limit\", value: 127}),\n channel: Inputs.radio([0, 1, 2, 3], {value: 0, label: \"Channel\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"viewof maskImageData = {\n const img = await image.image();\n const {width: w, height: h} = img;\n const c = DOM.context2d(w, h, 1);\n c.canvas.style.maxWidth = '400px';\n c.drawImage(img, 0, 0);\n const imgD = c.getImageData(0, 0, w, h), data = imgD.data;\n \n const mask = createSDFMask(imgD, maskOptions);\n for(let i = 0, j, a; i < mask.length; i++) {\n j = i * 4;\n a = Math.round(Math.sqrt(mask[i]) * 2);\n data[j] = 0;\n data[j+1] = 0;\n data[j+2] = 0;\n data[j+3] = a;\n } \n c.putImageData(imgD, 0, 0);\n c.canvas.value = imgD;\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":898,"value":"function createSDFMask(imageData, {channel = 3, invert = false, limit = 127, INF = 1e6} = {}) {\n const {width: w, height: h, data} = imageData;\n const grid = new Float64Array(w * h);\n const inv = invert ? v => 255 - v : v => v;\n const lim = v => v >= limit ? 255 : 0;\n \n // Adapted from https://observablehq.com/@mourner/fast-distance-transform\n for(let i = 0; i < grid.length; i++) {\n const a = lim(inv(data[4 * i + channel])) / 255;\n grid[i] = a === 1 ? 0 : a === 0 ? INF : Math.max(0, 0.5 - a) ** 2;\n }\n \n const max = Math.max(w, h),\n v = new Uint32Array(max),\n z = new Float64Array(max + 1),\n f = new Float64Array(max);\n \n for (let x = 0; x < w; x++) edt1d(grid, x, w, h, v, z, f);\n for (let y = 0; y < h; y++) edt1d(grid, y * w, 1, w, v, z, f);\n \n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"function clamp(a, b, v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"function smoothstep (min, max, value) {\n var x = Math.max(0, Math.min(1, (value-min)/(max-min)));\n return x*x*(3 - 2*x);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1072,"value":"md`---\n\n## SDF\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1076,"value":"// Source: https://observablehq.com/@mourner/fast-distance-transform#edt1d\n// Modified to accept v, z and f as arguments.\nedt1d = (grid, offset, stride, length, v, z, f, INF = 1e16) => {\n v[0] = 0;\n z[0] = -INF;\n z[1] = INF;\n for (let q = 0; q < length; q++) f[q] = grid[offset + q * stride];\n\n for (let q = 1, k = 0, s = 0; q < length; q++) {\n do {\n const r = v[k];\n s = (f[q] - f[r] + q * q - r * r) / (q - r) / 2;\n } while (s <= z[k] && --k > -1);\n\n k++;\n v[k] = q;\n z[k] = s;\n z[k + 1] = INF;\n }\n\n for (let q = 0, k = 0; q < length; q++) {\n while (z[k + 1] < q) k++;\n const r = v[k];\n grid[offset + q * stride] = f[r] + (q - r) * (q - r);\n }\n}\n","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}