2b:null 2c:["$","title",null,{"children":"Voronoi Stippling: Husband and Wife | Ben Welsh | Observable"}] 31: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; }32:[] 2f:{"id":"c64376dc5dfa4021","slug":"husband-and-wife","title":"Voronoi Stippling: Husband and Wife","thumbnail":"6e642ba532740ca5dd133bbcff5564279402d57db57237dc3149ade5752f393a","access_level":"public","create_time":"$D2018-12-03T03:56:52.848Z","update_time":"$D2018-12-21T19:12:25.678Z","view_time":null,"first_public_time":"$D2018-12-03T04:42:11.788Z","fork":{"id":"83a1ea8f8f6ba511","slug":"voronoi-stippling","title":"Voronoi Stippling","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":3,"starred":false,"owner":{"type":"team","id":"ecf037f5c1847e7a","login":"palewire","name":"Ben Welsh","avatar_url":"https://avatars-next.observableusercontent.com/09c4b14e7fedb41389efd80f902156893a0c63a226ba56a133a1e931549598bc","tier":"starter_2024"},"version":471,"publish_version":471,"role":null,"authored":false,"authors":[{"type":"individual","id":"2977b296b7b0b2fa","login":"palewire","name":"Ben Welsh","avatar_url":"https://avatars-next.observableusercontent.com/09c4b14e7fedb41389efd80f902156893a0c63a226ba56a133a1e931549598bc","tier":null}],"members":[{"type":"individual","id":"2977b296b7b0b2fa","login":"palewire","name":"Ben Welsh","avatar_url":"https://avatars-next.observableusercontent.com/09c4b14e7fedb41389efd80f902156893a0c63a226ba56a133a1e931549598bc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":410,"value":"DOM.download(serialize(portrait), \"stipple.svg\", \"Download SVG\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":456,"value":"md`### The original\n

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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":469,"value":"md`### The code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":339,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":40,"value":"n = Math.round(width * height / 40)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":448,"value":"final = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/final.jpg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"cutout = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/cutout.jpg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":449,"value":"original = \"https://gist.githubusercontent.com/palewire/56871019e84b2903f65d9b7d0cdce553/raw/original.jpg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"