31:T493,{ const features = Object.fromEntries(renderOptions.features.map(k => [k, true])); const {show} = renderOptions; const imageData = new ImageData(width, height); const areas = fromStride(voronoi, 4, 0); switch(show) { case 'initial': applyAreas(imageData, areas, palette); break; case 'distance': applyRange(imageData, fromStride(voronoi, 4, 1), true); break; case 'counts': applyRange(imageData, fromStride(voronoi, 4, 3), true, fromStride(voronoi, 4, 3)); break; case 'initial': applyAreas(imageData, areas, palette); break; case 'interpolated': applyAreas(imageData, areas, palette); applyColors(imageData, values, palette, fromStride(voronoi, 4, 3)); break; } if(features.edges) applyEdges(imageData, areas); const ctx = DOM.context2d(width, height, 1); ctx.canvas.style.cssText += 'max-width:100%'; ctx.putImageData(imageData, 0, 0); if(features.points) { const r = 3; ctx.beginPath(); for(const [x, y] of points) ctx.moveTo(x + r, y), ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fillStyle = '#fff'; ctx.fill(); ctx.strokeStyle = '#000'; ctx.stroke(); } return ctx.canvas; }32:T481,// Arguments: // - points: Array of sites // - bounds: Array of [left, top, right, bottom] // - options: // - x: x offset accessor. Defaults to (d => d[0]). // - y: y offset accessor. Defaults to (d => d[1]). // - value: value accessor. Defaults to (d => d[2]). // - radius: max interpolation radius. Defaults to Infinity. // - rows: processed rows per iteration. May be changed by passing to .next(). function* interpolateStepped(points, [x0, y0, x1, y1], options = {}) { const { x: fx, y: fy, value: fv, radius, rows = 1, } = options; const width = x1 - x0; const height = y1 - y0; const voronoi = getVoronoi(getPointData(points, x0, y0, {fx, fy, fv}), width, height); const values = new Float32Array(width * height); const bounds = [0, 0, width, 0]; for(let y = 0, step = rows; y < height; y += step) { bounds[1] = y; bounds[3] = Math.min(y + step, height); aggregate(voronoi, width, {radius, bounds}); const i2 = 4 * bounds[3] * width; for(let i = y * 4 * width; i < i2; i += 4) { values[i >> 2] = voronoi[i + 2] / voronoi[i + 3]; } step = (yield values) || step; } }33:[] 2f:{"title":"Discrete Sibson Interpolation","cells":[{"id":0,"value":"# Discrete Sibson Interpolation\n\nPaper: [Discrete Sibson Interpolation (Park, Linsen, Kreylos, Owens & Hamann, 2006)](https://escholarship.org/uc/item/88c9892g)\n\nCanvas 2D implementation of a [natural neighbor interpolation](https://en.wikipedia.org/wiki/Natural_neighbor_interpolation) algorithm that was designed for GPUs, so your mileage may vary. Note that performance depends on the distance between points, where a higher distance leads to lower performance due to increased kernel size.\n\n*If you find any errors in the implementation please let me know!* 🙏\n\n\n---","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"viewof options = confirm(Inputs.form({\n width: Inputs.range([100, 1200], {step: 20, label: 'Width', value: 640}),\n radius: Inputs.range([1, 1000], {step: 1, label: 'Max radius', value: 1000}),\n count: Inputs.range([2, 1000], {step: 1, label: 'Sites', value: 40}),\n relaxations: Inputs.range([0, 50], {step: 1, label: 'Relaxations', value: 0}),\n seed: Inputs.range([0, 1000], {step: 1, label: 'Seed', value: 3}),\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":857,"value":"viewof renderOptions = Inputs.form({\n steps: Inputs.range([1, 20], {step: 1, label: 'Rows per step', value: 10}),\n palette: Inputs.radio([\n 'Rainbow',\n 'Turbo',\n 'PiYG',\n 'Viridis',\n 'Spectral',\n 'Greys'\n ], {value: 'Turbo', label: 'Palette'}),\n show: Inputs.radio(['interpolated', 'initial', 'distance', 'counts'], {label: 'Show', value: 'interpolated'}),\n features: Inputs.checkbox(['edges', 'points'], {label: 'Features', value: ['points']}),\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":670,"value":"// Arguments:\n// - points: Array of sites\n// - bounds: Array of [left, top, right, bottom]\n// - options:\n// - x: x offset accessor. Defaults to (d => d[0]).\n// - y: y offset accessor. Defaults to (d => d[1]).\n// - value: value accessor. Defaults to (d => d[2]).\n// - radius: max interpolation radius. Defaults to Infinity.\nfunction interpolate(points, [x0, y0, x1, y1], options = {}) {\n const { x: fx, y: fy, value: fv, radius } = options;\n const width = x1 - x0;\n const height = y1 - y0;\n const voronoi = getVoronoi(getPointData(points, x0, y0, {fx, fy, fv}), width, height);\n aggregate(voronoi, width, {radius});\n return getValues(voronoi);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":779,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"### Low Level API","pinned":false,"hidden":false,"mode":"md"},{"id":712,"value":"function getPointData(points, x0 = 0, y0 = 0, accessors = {}) {\n const {\n fx = d => d[0],\n fy = d => d[1],\n fv = d => d[2],\n } = accessors;\n\n return Array.from(points, (d, i) => [\n fx(d, i) - x0,\n fy(d, i) - y0,\n fv(d, i)\n ]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":686,"value":"// Produce a Voronoi diagram and distance map of the values in pointData.\n// The expected format for pointData is [[x0, y0, v0], [x1, y1, v1], ...].\n// Returns a flat array of stride 4 containing [value, distance, count, sum],\n// with count and sum initialized to 0.\nfunction getVoronoi(pointData, width, height, options = {}) {\n const {\n voronoi = new Float32Array(4 * width * height),\n } = options;\n \n const tree = d3.quadtree(pointData);\n for(let y = 0; y < height; y++) {\n for(let x = 0; x < width; x++) {\n const [cx, cy, v] = tree.find(x, y);\n const i = (x + y * width) << 2;\n voronoi[i] = v;\n voronoi[i + 1] = Math.hypot(x - cx, y - cy);\n }\n }\n\n if(options.data) {\n for(let i = 2; i < voronoi.length; i += 4) {\n voronoi[i] = 0;\n voronoi[i + 1] = 0;\n }\n }\n \n return voronoi;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"function aggregate(voronoi, width, options = {}) {\n const height = voronoi.length / 4 / width;\n const {min, max, round, sqrt} = Math;\n\n const {\n radius = Infinity,\n bounds: [x0, y0, x1, y1] = [0, 0, width, height],\n } = options;\n \n for(let y = 0; y < height; y++) {\n for(let x = 0; x < width; x++) {\n const i = (x + y * width) << 2;\n const r = min(radius, voronoi[i+1]);\n const rs = r * r;\n const k0 = max(y0, round(y - r));\n const k1 = min(y1, round(y + r) + 1);\n \n for(let k = k0; k < k1; k++) {\n const rx = sqrt(rs - (k - y) ** 2);\n const j0 = (k * width + max(x0, round(x - rx))) << 2;\n const j1 = (k * width + min(x1, round(x + rx))) << 2;\n for(let j = j0; j < j1; j += 4) {\n voronoi[j + 2] += voronoi[i];\n voronoi[j + 3]++;\n }\n }\n }\n }\n\n return voronoi;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"function getValues(voronoi) {\n const values = new Float32Array(voronoi.length / 4);\n for(let i = 0; i < voronoi.length; i += 4) {\n values[i >> 2] = voronoi[i + 2] / voronoi[i + 3];\n }\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"---\n## Demo Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":568,"value":"function confirm(input, {auto: defaultAuto = true} = {}) {\n const mute = e => e.stopImmediatePropagation();\n const auto = htl.html``;\n const submit = htl.html`