31: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; }32:[] 2f:{"title":"Voronoi Stained Glass Portraits","cells":[{"id":481,"value":"md`# Voronoi Stained Glass Portraits`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":806,"value":"md`Also, you can change the picture used. The default is of President Obama.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":840,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = loadPictureData(url)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":842,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"viewof dataset = new View(0)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":405,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":429,"value":"margin = ({top: 0, bottom: 0, right: 0, left: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":419,"value":"voronoi = d3.voronoi().extent([[-1, -1], [width + 1, height + 1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"raphael= require( \"https://unpkg.com/raphael\" )","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"color = d3.scaleSequential(d3.interpolateRainbow)\n .domain([0, 300])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":537,"value":"d4 = require(\"d3-delaunay@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"import {createSVG, d3} from '@pstuffa/helpers'","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"import {slider, radio, select, text} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}