29:null 2a:["$","title",null,{"children":"Simple Adaptive Mosaic Effects | Claudio Esperança | Observable"}] 2f:T5f9,// // Returns an array of quadrants from building a quadtree on imagedata 'data', such // that no quadrant has size smaller than minSz and all quadrants have less than the maximum color // error 'epsilon'. // function quadrants(imgdata, epsilon, minSz, maxSz=1024) { const { data, width, height } = imgdata; const quads = []; const visit = (x0, y0, w, h) => { let { avg, maxErr } = getStat(imgdata, x0, y0, w, h); if ((Math.max(w, h) <= minSz || maxErr < epsilon) && Math.max(w, h) <= maxSz) { quads.push({ x0, y0, w, h, center: [x0 + w / 2, y0 + h / 2], avg, maxErr }); } else { if (w >= h) { let sz = 1 << ~~Math.log2(w); if (sz == w) sz /= 2; let [l, r, wl, wr] = [x0, x0 + sz, sz, w - sz]; if (h > sz) { visit(l, y0, wl, sz); visit(r, y0, wr, sz); visit(l, y0 + sz, wl, h - sz); visit(r, y0 + sz, wr, h - sz); } else { visit(l, y0, wl, h); visit(r, y0, wr, h); } } else { let sz = 1 << ~~Math.log2(h); if (sz == h) sz /= 2; let [t, b, ht, hb] = [y0, y0 + sz, sz, h - sz]; if (w > sz) { visit(x0, t, sz, ht); visit(x0, b, sz, hb); visit(x0 + sz, t, w - sz, ht); visit(x0 + sz, b, w - sz, hb); } else { visit(x0, t, w, ht); visit(x0, b, w, hb); } } } }; visit(0, 0, width, height); return quads; }30:T80b,viewof centroidal = { const { width, height, data } = imgdata; const n = quads.length; const points = new Float64Array(n * 2); quads.forEach(({ center }, i) => { points[i * 2] = center[0]; points[i * 2 + 1] = center[1]; }); const del = new d3.Delaunay(points); const vor = del.voronoi([0, 0, width, height]); const c = new Float64Array(n * 2); const s = new Float64Array(n); const getDensity = (x, y) => lumGradient[y * width + x]; const getCentroids = () => { // Compute the weighted centroid for each Voronoi cell. c.fill(0); s.fill(0); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = getDensity(x, y); i = del.find(x + 0.5, y + 0.5, i); s[i] += w; c[i * 2] += w * (x + 0.5); c[i * 2 + 1] += w * (y + 0.5); } } for (let i = 0; i < n; ++i) { const x0 = points[i * 2], y0 = points[i * 2 + 1]; const x1 = s[i] ? c[i * 2] / s[i] : x0, y1 = s[i] ? c[i * 2 + 1] / s[i] : y0; points[i * 2] = x1; points[i * 2 + 1] = y1; } }; const jitter = () => { for (let i = 0; i < n; ++i) { // This is necessary to get around a bug in voronoi when centers are aligned in a grid const x = points[i * 2], y = points[i * 2 + 1]; points[i * 2] = x + Math.random() * 0.5 - 0.25; points[i * 2 + 1] = y + Math.random() * 0.5 - 0.25; } }; let ctx = DOM.context2d(width, height, 1); ctx.canvas.value = null; ctx.strokeStyle = "black"; for (let i = 0; i < lloydIterations; i++) { getCentroids(); if (i == lloydIterations - 1) jitter(); vor.update(); ctx.clearRect(0, 0, width, height); ctx.beginPath(); vor.render(ctx); vor.renderBounds(ctx); ctx.stroke(); for (let i = 0; i < n; i++) { ctx.beginPath(); ctx.arc(points[i * 2], points[i * 2 + 1], 1, 0, Math.PI * 2); ctx.fill(); } yield ctx.canvas; } ctx.canvas.value = vor; ctx.canvas.dispatchEvent(new CustomEvent("input")); }31:T8c3,{ if (!centroidal) return "waiting"; await visibility(); const { data, width, height } = imgdata; const { erosion, blurDev, dOffset, surfScale, specConst, specExp, specColor, k } = fancyPresets[fancy]; const mySvg = svg``; const vor = centroidal; const del = centroidal.delaunay; const n = quads.length; const getColor = (i) => { const offset = i * 3; return `rgb(${avgColor[offset]},${avgColor[offset + 1]},${ avgColor[offset + 2] })`; }; const { bin, nbins } = disjointCellBinning; const group = d3 .range(nbins) .map((i) => svg``); group.forEach((g) => mySvg.append(g)); for (let i = 0; i < n; i++) { const color = getColor(i); group[bin.get(i)].append( svg`` ); } return mySvg; }32:T4e8,fancyPresets = [ { erosion: 0, blurDev: 1, dOffset: 0, surfScale: 0.5, specConst: 1, specExp: 20, specColor: "#bbb", k: [1, 1, 0, 0] }, { erosion: 3, blurDev: 2, dOffset: 0, surfScale: 1, specConst: 1, specExp: 4, specColor: "#bbb", k: [1, 1, 0, 0] }, { erosion: 3, blurDev: 2, dOffset: 0, surfScale: 40, specConst: 1, specExp: 4, specColor: "#bbb", k: [0, 1, 1, 0] }, { erosion: 0, blurDev: 2, dOffset: 0, surfScale: 40, specConst: 1, specExp: 4, specColor: "#bbb", k: [0, 1, 1, 0] }, { erosion: 2, blurDev: 1.8, dOffset: 2, surfScale: 5, specConst: 0.1, specExp: 40, specColor: "#bbb", k: [0, 1, 1, 0] }, { erosion: 0, blurDev: 1.8, dOffset: 2, surfScale: 5, specConst: 0.1, specExp: 40, specColor: "#bbb", k: [0, 1, 1, 0] }, { erosion: 0, blurDev: 1.8, dOffset: 0, surfScale: 5, specConst: 0.9, specExp: 40, specColor: "#bbb", k: [0, 1, 1, 0] }, { erosion: 0, blurDev: 1, dOffset: 0, surfScale: 1, specConst: 0.75, specExp: 5, specColor: "#bbb", k: [0, 1, 1, 0] } ]33:[{"id":"49d12f0cf6d7946d84c81ba940948f2cd7f19433d35140abbabd51e78896945ebf7d2326445f9ac3b06db4f2e3108d244ee3ed50dcdb6dc66ab4360875de5436","href":"https://static.observableusercontent.com/files/49d12f0cf6d7946d84c81ba940948f2cd7f19433d35140abbabd51e78896945ebf7d2326445f9ac3b06db4f2e3108d244ee3ed50dcdb6dc66ab4360875de5436","name":"portrait1.png","type":"image/png","lastModified":1632523664847.8,"size":1318056},{"id":"a79f6d245992d34a23033ee3132bf33bf71d07bd4143e23606824691d53a0b4ddcda6a09f45d1b0c478a7734f86a10f883bdbeb04dc477cd32a613f4d265bdf0","href":"https://static.observableusercontent.com/files/a79f6d245992d34a23033ee3132bf33bf71d07bd4143e23606824691d53a0b4ddcda6a09f45d1b0c478a7734f86a10f883bdbeb04dc477cd32a613f4d265bdf0","name":"butterfly1.png","type":"image/png","lastModified":1632523664757.694,"size":1013201},{"id":"b302c45a93076a7901cc0c2771253f1e3451bf423883c9329c65738e8f7e407645238253b50c572d46b42477db9cb3ae9d7d3ab9523eb247b63167f4dc7d1f08","href":"https://static.observableusercontent.com/files/b302c45a93076a7901cc0c2771253f1e3451bf423883c9329c65738e8f7e407645238253b50c572d46b42477db9cb3ae9d7d3ab9523eb247b63167f4dc7d1f08","name":"painting1.png","type":"image/png","lastModified":1632523664176.042,"size":983667},{"id":"8740d2b6c74625b79006dbc574b1492bf241fc6072a8390511d39152b0fe579044b3bd2add99be86380168110e53b80b95a91c7cba18210865aea6263d36aef3","href":"https://static.observableusercontent.com/files/8740d2b6c74625b79006dbc574b1492bf241fc6072a8390511d39152b0fe579044b3bd2add99be86380168110e53b80b95a91c7cba18210865aea6263d36aef3","name":"flower1.png","type":"image/png","lastModified":1632523664146.905,"size":951014},{"id":"6a0350837a3486e01d566c679d213ae5f729bacb0b0d4294c59a2dd3a032bd1cafaa8d4401dc4ceb1c41c4edbdb42189ee8bba1b26c37f17179587945a50d602","href":"https://static.observableusercontent.com/files/6a0350837a3486e01d566c679d213ae5f729bacb0b0d4294c59a2dd3a032bd1cafaa8d4401dc4ceb1c41c4edbdb42189ee8bba1b26c37f17179587945a50d602","name":"fruit1.png","type":"image/png","lastModified":1632523664062.985,"size":792188},{"id":"c701e1e54843c5df5dff704229cdfa4b31ee3c90df30da1655208dfd4303e8b6258cc614c250f768f4f4db77e77c2c530ca7b4df60def1611e152d48832dc987","href":"https://static.observableusercontent.com/files/c701e1e54843c5df5dff704229cdfa4b31ee3c90df30da1655208dfd4303e8b6258cc614c250f768f4f4db77e77c2c530ca7b4df60def1611e152d48832dc987","name":"flower2.png","type":"image/png","lastModified":1632523663921.225,"size":773373},{"id":"2aed05561330a42b43761dce73f6ae6f7b13c5fc7dfd202a6eb9de01b022c764042e1de7a7a662bb3d642d042412ac213b7ae8cf36635fa66d1f20966b0a15f5","href":"https://static.observableusercontent.com/files/2aed05561330a42b43761dce73f6ae6f7b13c5fc7dfd202a6eb9de01b022c764042e1de7a7a662bb3d642d042412ac213b7ae8cf36635fa66d1f20966b0a15f5","name":"neon.png","type":"image/png","lastModified":1632523663678.35,"size":670883},{"id":"fc2f3b04ac9445fe4032b24bb00a0cd9b8fcf0fdef38432bbde4b23cf46543112d66bb0fd311f21e821ef3356b7193113b06d1c128eba5a1a070e71ace872ce3","href":"https://static.observableusercontent.com/files/fc2f3b04ac9445fe4032b24bb00a0cd9b8fcf0fdef38432bbde4b23cf46543112d66bb0fd311f21e821ef3356b7193113b06d1c128eba5a1a070e71ace872ce3","name":"hanger.png","type":"image/png","lastModified":1632523663204.477,"size":562970},{"id":"94c71bb1f56e7ada9d824d149849d849bc888aa6ab3c7caf4fea0aaba093ff60d15b20485d792184d8a3d7da7c8f6b252dfb7a8d39c6fd00d4b25a220d1f4cb3","href":"https://static.observableusercontent.com/files/94c71bb1f56e7ada9d824d149849d849bc888aa6ab3c7caf4fea0aaba093ff60d15b20485d792184d8a3d7da7c8f6b252dfb7a8d39c6fd00d4b25a220d1f4cb3","name":"cat1.png","type":"image/png","lastModified":1632523662973.57,"size":392684},{"id":"ee3663197c5c6b032cef1646427f499977481d16b9422e8e26888de7fcf258c57f311a480aa6980e6f81305e30cdc6dc4a8ad015c0f1221a189b3e65bd69c920","href":"https://static.observableusercontent.com/files/ee3663197c5c6b032cef1646427f499977481d16b9422e8e26888de7fcf258c57f311a480aa6980e6f81305e30cdc6dc4a8ad015c0f1221a189b3e65bd69c920","name":"origami1.png","type":"image/png","lastModified":1632523662225.133,"size":256865}] 2d:{"id":"3bb8379666a78ebe","slug":"simple-adaptive-mosaic-effects","title":"Simple Adaptive Mosaic Effects","thumbnail":"28fe0c4bddc24723046aca0d1ff526a57fbeae6445f1b9896dd1b30937e0b671","access_level":"public","create_time":"$D2021-09-20T23:37:06.594Z","update_time":"$D2022-05-30T12:38:42.214Z","view_time":null,"first_public_time":"$D2021-09-24T23:09:48.393Z","has_unpublished_edits":null,"fork":false,"stars":23,"starred":false,"owner":{"type":"team","id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":"starter_2024"},"version":703,"publish_version":703,"role":null,"authored":false,"authors":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}],"members":[{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"e0d24a292dccabae","slug":"computacao-grafica","title":"Computer Graphics","owner":{"id":"e9fcee55f21948e0","login":"esperanc","name":"Claudio Esperança"}},"type":"notebook","body":{"title":"Simple Adaptive Mosaic Effects","cells":[{"id":0,"value":"# Simple Adaptive Mosaic Effects\n\nSample implementation of the paper\n\n>G. Faustino and L. de Figueiredo, *\"Simple Adaptive Mosaic Effects,\"* in Proceedings of the 25th SIBGRAPI Conference on Graphics, Patterns and Images, Natal, Rio Grande do Norte, Brazil, 2005 pp. 315-322. [doi: 10.1109/SIBGRAPI.2005.46](https://doi.ieeecomputersociety.org/10.1109/SIBGRAPI.2005.46)\n\nThe organization of this notebook follows the outline of the paper, which you should definitely read if you are into this kind of stuff. I took the liberty of using `d3.delaunay`, for creating the Voronoi diagrams. I also added a few *\"fancy\"* rendering variations using SVG and filters. \n\nThe actual implementation starts just below the following...\n\n## Portfolio","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"portfolio = {\n for (;;) {\n for (let promise of imagePromises) {\n await visibility();\n yield await promise;\n await Promises.delay(10000);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"

\n## Target image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"target = html`

Load a random image

${viewof imageConfig}

...or upload your own

${viewof customImg}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"mutable image = randomImg","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"viewof customImg = {\n resetFileInput;\n return file({\n description: \"Upload an image to be processed.\",\n accept: \".jpg,.png\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"mutable resetFileInput = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":645,"value":"{\n const img = html``;\n img.src = await Files.url(customImg);\n mutable image = img;\n mutable resetFileInput = mutable resetFileInput + 1;\n return `Image ${mutable resetFileInput} Loaded`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"

\n## Quadtree subdivision","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"//\n// Obtain an ImageData object from image\n//\nimgdata = imageData(image)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof sqrtEpsilon = Inputs.range([1, 200], {\n label: `sqrt(epsilon)`,\n step: 1,\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof logMinSz = Inputs.range([1, 5], {\n label: `log2(minSz)`,\n step: 1,\n value: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"viewof logMaxSz = Inputs.range([3, 10], {\n label: `log2(maxSz)`,\n step: 1,\n value: 6\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"viewof quadDraw = Inputs.checkbox([\"centers\", \"quadrants\"], {\n label: \"Draw quadtree\",\n value: [\"centers\", \"quadrants\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"{\n const ctx = DOM.context2d(imgdata.width, imgdata.height, 1);\n const drawCenter = quadDraw.includes(\"centers\");\n const drawQuad = quadDraw.includes(\"quadrants\");\n for (let { x0, y0, w, h, center } of quads) {\n if (drawQuad) {\n ctx.beginPath();\n ctx.rect(x0, y0, w, h);\n ctx.stroke();\n }\n if (drawCenter) {\n ctx.beginPath();\n ctx.arc(center[0], center[1], 1, 0, Math.PI * 2);\n ctx.fill();\n }\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"{\n const { width, height } = imgdata;\n const ctx = DOM.context2d(width, height, 1);\n const imgdata2 = new ImageData(width, height);\n const data = imgdata2.data;\n const setPixel = (x, y, r, g, b) => {\n const offset = (y * width + x) * 4;\n data[offset] = r;\n data[offset + 1] = g;\n data[offset + 2] = b;\n data[offset + 3] = 255;\n };\n for (let { x0, y0, w, h, avg } of quads) {\n for (let x = x0; x < x0 + w; ++x) {\n for (let y = y0; y < y0 + h; ++y) {\n setPixel(x, y, ...avg);\n }\n }\n }\n ctx.putImageData(imgdata2, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"//\n// Average color and color error for a given imagedata within a given rectangle\n//\nfunction getStat(imgdata, x0, y0, w, h) {\n const {data, width, height} = imgdata;\n const getPixel = (x, y) => {\n const offset = (y * width + x) * 4;\n return data.slice(offset, offset + 3);\n };\n let sum = [0, 0, 0];\n for (let x = x0; x < x0 + w; ++x) {\n for (let y = y0; y < y0 + h; ++y) {\n const pix = getPixel(x, y);\n sum[0] += pix[0];\n sum[1] += pix[1];\n sum[2] += pix[2];\n }\n }\n const npix = w * h;\n const avg = sum.map((comp) => comp / npix);\n let maxErr = 0;\n for (let x = x0; x < x0 + w; ++x) {\n for (let y = y0; y < y0 + h; ++y) {\n const pix = getPixel(x, y);\n maxErr = Math.max(\n maxErr,\n (pix[0] - avg[0]) ** 2 + (pix[1] - avg[1]) ** 2 + (pix[2] - avg[2]) ** 2\n );\n }\n }\n return { avg, maxErr };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"quads = quadrants(imgdata, sqrtEpsilon ** 2, 1 << logMinSz, 1 << logMaxSz)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"

\n## Voronoi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"{\n const del = d3.Delaunay.from(quads.map((q) => q.center));\n const { width, height } = imgdata;\n const vor = del.voronoi([0, 0, width, height]);\n const ctx = DOM.context2d(width, height, 1);\n ctx.strokeStyle = \"black\";\n vor.render(ctx);\n vor.renderBounds(ctx);\n ctx.stroke();\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"

\n## Luminance map (B&W image)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"{\n const { width, height } = imgdata;\n const ctx = DOM.context2d(width, height, 1);\n const n = width * height;\n const imgdata2 = new ImageData(width, height);\n const data = imgdata2.data;\n for (let i = 0; i < n; i++) {\n const offset = i * 4;\n const val = Math.round(luminance[i] * 255);\n data[offset] = data[offset + 1] = data[offset + 2] = val;\n data[offset + 3] = 255;\n }\n ctx.putImageData(imgdata2, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"luminance = {\n const { width, height, data } = imgdata;\n const n = width * height;\n const lumArray = new Float64Array(n);\n for (let i = 0; i < n; i++) {\n const offset = i * 4;\n lumArray[i] =\n (data[offset] * 0.2126 +\n data[offset + 1] * 0.7152 +\n data[offset + 2] * 0.0722) /\n 255;\n }\n return lumArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"

\n## Density function (gradient of the luminance)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n const { width, height } = imgdata;\n const ctx = DOM.context2d(width, height, 1);\n const n = width * height;\n const imgdata2 = new ImageData(width, height);\n const data = imgdata2.data;\n for (let i = 0; i < n; i++) {\n const offset = i * 4;\n const val = Math.round((1 - lumGradient[i]) * 255);\n data[offset] = data[offset + 1] = data[offset + 2] = val;\n data[offset + 3] = 255;\n }\n ctx.putImageData(imgdata2, 0, 0);\n return ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"lumGradient = {\n const { width, height } = imgdata;\n const n = width * height;\n const lumGrad = new Float64Array(n);\n const getLum = (x, y) => luminance[y * width + x];\n for (let x = 0; x < width; x++) {\n let left = Math.max(0, x - 1);\n let right = Math.min(width - 1, x + 1);\n for (let y = 0; y < height; y++) {\n let up = Math.max(0, y - 1);\n let down = Math.min(height - 1, y + 1);\n lumGrad[y * width + x] = Math.sqrt(\n (getLum(right, y) - getLum(left, y)) ** 2 +\n (getLum(x, up) - getLum(x, down)) ** 2\n );\n }\n }\n return lumGrad;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"

\n## Centroidal Voronoi\n\nHere we use the ideas of Mike's [Voronoi Stippling notebook](https://observablehq.com/@mbostock/voronoi-stippling).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"viewof lloydIterations = Inputs.range([1, 100], {\n label: \"Iterations of Lloyd's algorithm\",\n value: 50,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"

\n## Rendering","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"### Using the color of the pixel at each Voronoi site","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"{\n while (!centroidal) yield \"waiting\";\n await visibility();\n const { data, width, height } = imgdata;\n const ctx = DOM.context2d(width, height, 1);\n ctx.fillStyle = \"black\";\n ctx.fillRect(0, 0, width, height);\n const vor = centroidal;\n const del = centroidal.delaunay;\n const n = del.points.length / 2;\n const getCenter = (i) => [del.points[i * 2], del.points[i * 2 + 1]];\n const getPixel = (x, y) => {\n const offset = (~~y * width + ~~x) * 4;\n const color = `rgb(${data[offset]},${data[offset + 1]},${\n data[offset + 2]\n })`;\n return d3.color(color).formatHex();\n };\n for (let i = 0; i < n; i++) {\n ctx.fillStyle = getPixel(...getCenter(i));\n ctx.beginPath();\n vor.renderCell(i, ctx);\n ctx.fill();\n }\n\n // ctx.canvas.onmousemove = (e) => {\n // let [x, y] = [e.offsetX, e.offsetY];\n // let i = del.find(x, y);\n // debug.innerHTML = `${x},${y},${i},${getPixel(\n // ...getCenter(i)\n // )}
${vor.cellPolygon(i)}`;\n // };\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"### Using the average color of each Voronoi site","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"{\n if (!centroidal) return \"waiting\";\n await visibility();\n const { data, width, height } = imgdata;\n const ctx = DOM.context2d(width, height, 1);\n const vor = centroidal;\n const del = centroidal.delaunay;\n const n = quads.length;\n const getColor = (i) => {\n const offset = i * 3;\n return `rgb(${avgColor[offset]},${avgColor[offset + 1]},${\n avgColor[offset + 2]\n })`;\n };\n for (let i = 0; i < n; i++) {\n ctx.fillStyle = getColor(i);\n ctx.beginPath();\n vor.renderCell(i, ctx);\n ctx.fill();\n }\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"avgColor = {\n if (!centroidal) return \"waiting\";\n const { data, width, height } = imgdata;\n const getPixel = (x, y) => {\n const offset = (y * width + x) * 4;\n return data.slice(offset, offset + 3);\n };\n const del = centroidal.delaunay;\n const n = quads.length;\n const count = new Uint32Array(n);\n const avg = new Float64Array(n * 3);\n for (let y = 0, i = 0; y < height; ++y) {\n for (let x = 0; x < width; ++x) {\n const [r, g, b] = getPixel(x, y);\n i = del.find(x + 0.5, y + 0.5, i);\n count[i] += 1;\n const j = i * 3;\n avg[j] += r;\n avg[j + 1] += g;\n avg[j + 2] += b;\n }\n }\n for (let i = 0; i < n; i++) {\n const j = i * 3;\n avg[j] /= count[i];\n avg[j + 1] /= count[i];\n avg[j + 2] /= count[i];\n }\n return avg;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"## Fancy rendering with Svg and filters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"viewof fancy = Inputs.radio(d3.range(fancyPresets.length), {\n label: \"Choose a set of preset filter parameters:\",\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"//\n// Computes a partition of cells of the centroidal voronoi so that no two cells in a partition are neighbors\n//\ndisjointCellBinning = {\n if (!centroidal) return \"waiting\";\n const del = centroidal.delaunay;\n const { points, halfedges, triangles } = del;\n const npoints = points.length / 2;\n const bin = new Map();\n const neighbors = d3.range(npoints).map((i) => [...del.neighbors(i)]);\n const forbiddenBins = (i) =>\n new Set(neighbors[i].filter((j) => bin.has(j)).map((j) => bin.get(j)));\n let nbins = 0;\n for (let i = 0; i < npoints; i++) {\n const f = forbiddenBins(i);\n let ibin = d3.range(nbins).findIndex((j) => !f.has(j));\n if (ibin < 0) ibin = nbins++;\n bin.set(i, ibin);\n }\n return { bin, nbins };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"imagePromises = [\n FileAttachment(\"flower2.png\").image(),\n FileAttachment(\"butterfly1.png\").image(),\n FileAttachment(\"cat1.png\").image(),\n FileAttachment(\"flower1.png\").image(),\n FileAttachment(\"fruit1.png\").image(),\n FileAttachment(\"hanger.png\").image(),\n FileAttachment(\"neon.png\").image(),\n FileAttachment(\"origami1.png\").image(),\n FileAttachment(\"painting1.png\").image(),\n FileAttachment(\"portrait1.png\").image()\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {\n image as randomImg,\n imageData,\n viewof imageConfig\n} from \"@esperanc/voronoi-mosaics\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"import { file } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"