30:T718,script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@3")}"); onmessage = event => { const {data: {data, width, height, n}} = event; const points = new Float64Array(n * 2); const c = new Float64Array(n * 2); const s = new Float64Array(n); // Initialize the points using rejection sampling. for (let i = 0; i < n; ++i) { for (let j = 0; j < 30; ++j) { const x = points[i * 2] = Math.floor(Math.random() * width); const y = points[i * 2 + 1] = Math.floor(Math.random() * height); if (Math.random() < data[y * width + x]) break; } } for (let k = 0; k < 80; ++k) { const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); // 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 = data[y * width + x]; i = voronoi.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); } } // Relax the diagram by moving points to the weighted centroid. // Wiggle the points a little bit so they don’t get stuck. const w = Math.pow(k + 1, -0.8) * 10; 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] = x0 + (x1 - x0) * 1.8 + (Math.random() - 0.5) * w; points[i * 2 + 1] = y0 + (y1 - y0) * 1.8 + (Math.random() - 0.5) * w; } } postMessage(points); close(); }; `], {type: "text/javascript"}); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }31:[] 2e:{"title":"Voronoi Stippling: Husband and Wife","cells":[{"id":0,"value":"md`# Voronoi Stippling: Husband and Wife\n\nA photograph of my wife and I stippled using a [Voronoi diagram](https://en.wikipedia.org/wiki/Voronoi_diagram). The code is based on [Mike Bostock's portrait of Obama](https://beta.observablehq.com/@mbostock/voronoi-stippling), but modified to export the image in SVG format. \n\nThe original photo, as well as a printed and framed version of the result, can be seen below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"portrait = new Promise(resolve => {\n const worker = new Worker(script);\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", ({data: points}) => {\n resolve(html``);\n });\n worker.postMessage({data, width, height, n});\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"DOM.download(serialize(portrait), \"stipple.svg\", \"Download SVG\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"md`### The original\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":461,"value":"md`### The result\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"md`### The code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height);\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i) data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height;\n resolve(data);\n };\n image.src = cutout;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"n = Math.round(width * height / 40)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"final = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/final.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":443,"value":"cutout = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/cutout.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":449,"value":"original = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/original.jpg\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}