2e:null 2f:["$","title",null,{"children":"Voronoi Stained Glass Portraits | Paul Buffa | Observable"}] 34:T700,script = { const blob = new Blob([` importScripts("${await require.resolve("d3-delaunay@4")}"); onmessage = event => { const {data: {data, width, height, n}} = event; // Initialize the points using rejection sampling. const points = new Float64Array(n * 2); 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. const c = new Float64Array(n * 2); const s = new Float64Array(n); for (let y = 0, i = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { const w = data[y * width + x]; i = delaunay.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; }35:[] 32:{"id":"684ccaa730e5a70f","slug":"voronoi-stained-glass-portraits","title":"Voronoi Stained Glass Portraits","thumbnail":"182260ac0f88e6e7b3e2950764fe4ab8899dca0395f211a4e40f54b4cde58390","access_level":"public","create_time":"$D2018-08-06T18:22:45.052Z","update_time":"$D2019-10-08T01:33:42.390Z","view_time":null,"first_public_time":"$D2018-08-07T15:01:41.029Z","has_unpublished_edits":null,"fork":{"id":"83a1ea8f8f6ba511","slug":"voronoi-stippling","title":"Voronoi Stippling","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":13,"starred":false,"owner":{"type":"team","id":"d9d161ec29750ad6","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":"starter_2024"},"version":925,"publish_version":925,"role":null,"authored":false,"authors":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null}],"members":[{"type":"individual","id":"42520cea6c99d3c8","login":"pstuffa","name":"Paul Buffa","avatar_url":"https://avatars-next.observableusercontent.com/32c09bb97a2bb742225b949dcc4cf81a03dcd2b0caae97325970223a48a14b94","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":19,"collection":{"id":"4eb71736476d8aab","slug":"generative-art","title":"Generative art","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Voronoi Stained Glass Portraits","cells":[{"id":481,"value":"md`# Voronoi Stained Glass Portraits`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"md`A logical continuation of my [previous post](https://beta.observablehq.com/@pstuffa/draw-your-own-voronoi). Trying to build a stained glass portrait generator. I am still not 100% of the way there, as I would like to do some of the nested voronoi that I had done before.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":803,"value":"md`You can change the sample size here. Note, it will get slow if you really ramp this up:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"viewof n = slider({\n min: 100, \n max: 20000, \n step: 1, \n value: 10000, \n title: \"Points\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"md`Also, you can change the picture used. The default is of President Obama.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":830,"value":"viewof url = text({title: \"Image URL\", value: \"https://gist.githubusercontent.com/mbostock/35251f06084b931dd17bbf5c9e2b3ebc/raw/6e54d7a29b35688bda4fcabfc05b80f4b2c4a5c5/obama.png\", description: \"plug in your own image here!\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"withColor = {\n const context = DOM.context2d(width, height);\n (context.fillStyle = \"#fff\"), context.fillRect(0, 0, width, height);\n for (let i = 0; i < n; i++) {\n const box = raphael.pathBBox(voronoiPoints.renderCell(i));\n context.beginPath(),\n voronoiPoints.renderCell(i, context),\n (context.fillStyle = color(box.width*box.height)),\n (context.fillOpacity = .25),\n context.fill();\n }\n\n context.beginPath(),\n voronoiPoints.render(context);\n (context.strokeStyle = \"#000\"),\n (context.lineWidth = 2),\n context.stroke();\n\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"{\n const context = DOM.context2d(width, height);\n const worker = new Worker(script);\n\n function messaged({data: points}) {\n viewof dataset.value = points\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n for (let i = 0, n = points.length; i < n; i += 2) {\n const x = points[i], y = points[i + 1];\n context.moveTo(x + 1.5, y);\n context.arc(x, y, 1.5, 0, 2 * Math.PI);\n }\n context.fillStyle = \"#000\";\n context.fill();\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({data, width, height, n});\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":840,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = loadPictureData(url)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"voronoiPoints = {\n const points = pretty.map(d => [d.x, d.y]);\n const delaunay = new d4.Delaunay.from(points);\n const polygons = delaunay.voronoi([0, 0, width, height]);\n \n return polygons\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"pretty = {\n let prettyData = [];\n for (let i = 0, n = dataset.length; i < n; i += 2) {\n const x = dataset[i], y = dataset[i + 1];\n prettyData.push({x: x, y: y})\n }\n return prettyData\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"viewof dataset = new View(0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"loadPictureData = (url) => {\n const results = new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\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 = url;\n }) \n return results;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"margin = ({top: 0, bottom: 0, right: 0, left: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"randomPoints = (nPoints, minX, maxX, minY, maxY) => {\n return d3.range(nPoints).map((i) =>\n [Math.floor(Math.random() * (maxX-minX)) + minX, Math.floor(Math.random() * (maxY-minY)) + minY]\n )\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"voronoi = d3.voronoi().extent([[-1, -1], [width + 1, height + 1]])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"raphael= require( \"https://unpkg.com/raphael\" )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"color = d3.scaleSequential(d3.interpolateRainbow)\n .domain([0, 300])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"class View {\n constructor(value) {\n this._list = [];\n this._value = value;\n }\n get value() {\n return this._value;\n }\n set value(value) {\n this._value = value;\n this.dispatchEvent({type: \"input\", value});\n }\n addEventListener(type, listener) {\n if (type != \"input\" || this._list.includes(listener)) return;\n this._list = [listener].concat(this._list);\n }\n removeEventListener(type, listener) {\n if (type != \"input\") return;\n this._list = this._list.filter(l => l !== listener);\n }\n dispatchEvent(event) {\n const p = Promise.resolve(event);\n this._list.forEach(l => p.then(l));\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"d4 = require(\"d3-delaunay@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"import {createSVG, d3} from '@pstuffa/helpers'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"import {slider, radio, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"// withoutDots = {\n// const context = DOM.context2d(width, height);\n// // context.beginPath();\n// // voronoiPoints.delaunay.renderPoints(context);\n// // context.fill();\n// context.beginPath();\n// voronoiPoints.render(context);\n// context.stroke();\n// return context.canvas;\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"// Nesting Sample \n// const innerN = 5;\n// const box = raphael.pathBBox(voronoiPoints.renderCell(i))\n// const innerPoints = randomPoints(innerN, box.x, box.x + box.width, box.y, box.y + box.height);\n// const newPoints = new d4.Delaunay.from(innerPoints)\n// const newPolygons = newPoints.voronoi([0, 0, width, height]);\n// for (let j = 0; j < innerN; j++) {\n \n// context.beginPath(),\n// voronoiPoints.renderCell(i, context),\n// context.clip(),\n// newPolygons.renderCell(j, context),\n// (context.fillStyle = color(i/j)),\n// (context.fillOpacity = 1),\n// context.fill(), \n// context.stroke();\n// }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"