31:T458,md`# Voronoi Stippling : cells visualisation Starting from Mike Bostock's notebook and following work linked in his description I tried to improve the final aspect of the picture's stippling. One of the goal of stippling is to conserve the information translated in the picture's pixels while removing a lot of the data. So I tried with the same amount of data used in Mike Bostock (only the coordinates of Voronoi points) to improve the quality of the image shown. To do so, my first idea was to recalculate Voronoi diagram and set color of the cell regarding its area. For the same amount of points I think the result is way better (especially for a relative low amount of points, like 3000). Obama could not be recognized with points stippling while this allows it ! (below Bostock's technique to compare) To avoid littles pics around Obama's head I will try to use [@mourner's idea](https://observablehq.com/@mourner/adaptive-concave-hull) (thanks [Fil](https://observablehq.com/@fil) for the tip !). And then I will merge cells that forms boundaries of the image with mourner's polygon using turf.js. `32:T64d,cell_stippling = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); yield context.canvas; var i = 0; var min = Infinity, max = 0; const vor = voronoi; var pts = vor.delaunay.points; var cells = []; for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const contained = d3.polygonContains(shapePolygon, [x2, y2]); const area = Math.abs(d3.polygonArea(cell)); if (contained) { max = Math.max(area, max); min = Math.min(area, min); } cells.push({ cell, i, area, contained, pt: [x0, y0] }); i++; } i = 0; handleContour(cells, voronoi); var color = d3.scaleSequential(d3.interpolateGreys).domain([max, min]); // .range(["black", "white"]); for (const { cell, area, contained } of cells) { if (!contained) continue; context.beginPath(); context.fillStyle = context.strokeStyle = color(area); // context.fillStyle = context.strokeStyle = `blue`; renderCell(cell, context); context.fill(), context.stroke(); i++; } // drawIsocontour(context, cells, color, 50); // context.beginPath(); // context.strokeStyle = "blue"; // context.lineWidth = 25; // // context.fillStyle = context.strokeStyle = `blue`; // renderCell(shapePolygon, context); // context.stroke(); // voronoi.delaunay.renderHull(context); // context.clip(); yield context.canvas; }33:T479,low_threshold_isocontour = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; var min = Infinity, max = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; var cells = []; for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const contained = d3.polygonContains(shapePolygon, [x2, y2]); const area = Math.abs(d3.polygonArea(cell)); if (contained) { max = Math.max(area, max); min = Math.min(area, min); } cells.push({ cell, i, area, contained, pt: [x0, y0] }); i++; } i = 0; handleContour(cells, voronoi); var color = d3.scaleSequentialSymlog(d3.interpolateGreys).domain([max, min]); drawIsocontour(context, cells, color, threshold2); context.beginPath(); context.strokeStyle = "black"; context.lineWidth = 15; renderCell(shapePolygon, context); context.stroke(); return context.canvas; }34:T47a,low_threshold_isocontour_reds = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; var min = Infinity, max = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; var cells = []; for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const contained = d3.polygonContains(shapePolygon, [x2, y2]); const area = Math.abs(d3.polygonArea(cell)); if (contained) { max = Math.max(area, max); min = Math.min(area, min); } cells.push({ cell, i, area, contained, pt: [x0, y0] }); i++; } i = 0; handleContour(cells, voronoi); var color = d3.scaleSequentialPow(d3.interpolateReds).domain([max, min]); drawIsocontour(context, cells, color, threshold2); context.beginPath(); context.strokeStyle = "black"; context.lineWidth = 15; renderCell(shapePolygon, context); context.stroke(); return context.canvas; }35:T47a,low_threshold_isocontour_hope = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; var min = Infinity, max = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; var cells = []; for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const contained = d3.polygonContains(shapePolygon, [x2, y2]); const area = Math.abs(d3.polygonArea(cell)); if (contained) { max = Math.max(area, max); min = Math.min(area, min); } cells.push({ cell, i, area, contained, pt: [x0, y0] }); i++; } i = 0; handleContour(cells, voronoi); var color = d3.scaleSequentialLog(d3.interpolateRdBu).domain([max, min]); drawIsocontour(context, cells, color, threshold2); context.beginPath(); context.strokeStyle = "black"; context.lineWidth = 15; renderCell(shapePolygon, context); context.stroke(); return context.canvas; }36:T4e7,LSD_stippling_Warm = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; const color = d3.scaleSequential(d3.interpolateWarm).domain([0, 15]); for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const len = Math.sqrt((x2 - x0) ** 2 + (y2 - y0) ** 2); // context.fillStyle = color(Math.random() * 20); // renderCell(cell, context); // context.fill(); context.beginPath(); context.moveTo(x0, y0); if (d3.polygonContains(shapePolygon, [x1, y1])) { context.lineTo(x2, y2); context.strokeStyle = color(len); } else { context.lineTo(x1, y1); context.strokeStyle = "red"; } context.closePath(); context.stroke(); i++; } context.beginPath(); context.strokeStyle = "red"; context.lineWidth = 1; // context.fillStyle = context.strokeStyle = `blue`; renderCell(shapePolygon, context); context.stroke(); return context.canvas; }37:T4fa,LSD_stippling_bold_multicolor = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; context.lineWidth = 3; const color = d3.scaleSequentialLog(d3.interpolateBlues).domain([20, 9]); for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const len = Math.sqrt((x2 - x0) ** 2 + (y2 - y0) ** 2); // context.fillStyle = color(Math.random() * 20); // renderCell(cell, context); // context.fill(); context.beginPath(); context.moveTo(x0, y0); if (d3.polygonContains(shapePolygon, [x1, y1])) { context.lineTo(x2, y2); context.strokeStyle = color(len); } else { context.lineTo(x1, y1); context.strokeStyle = "black"; } context.closePath(); context.stroke(); i++; } context.beginPath(); context.strokeStyle = "black"; // context.fillStyle = context.strokeStyle = `blue`; renderCell(shapePolygon, context); context.stroke(); return context.canvas; }38:T778,contemporary_stippling = { await visibility(); const context = DOM.context2d(width, height); context.fillStyle = "white"; context.fillRect(0, 0, width, height); context.beginPath(); var i = 0; var min = Infinity, max = 0; const vor = mutable voronoi; var pts = vor.delaunay.points; var cells = []; for (const cell of vor.cellPolygons()) { const [x1, y1] = d3.polygonCentroid(cell); const x0 = pts[i * 2], y0 = pts[i * 2 + 1]; const [x2, y2] = findExtremePoint([x0, y0], cell); const contained = d3.polygonContains(shapePolygon, [y2, x2]); const realContained = d3.polygonContains(shapePolygon, [x2, y2]); const area = Math.abs(d3.polygonArea(cell)); if (realContained) { max = Math.max(area, max); min = Math.min(area, min); } cells.push({ cell, i, area, contained, realContained, pt: [x0, y0] }); i++; } i = 0; // handleContour(cells, voronoi); var color = d3 .scaleLinear() .domain([min, max]) .range(["black", "white"]); var color2 = d3 .scaleSequential(d3.interpolateBlues) .domain([min, max]) .nice(); for (const { cell, area, contained, realContained, pt } of cells) { if (!contained && realContained) { context.fillStyle = context.strokeStyle = color2( Math.random() * (max - min) + min ); } else if (contained) { context.fillStyle = context.strokeStyle = color(area); } else continue; context.beginPath(); // context.fillStyle = context.strokeStyle = `blue`; renderCell(cell, context); context.fill(), context.stroke(); i++; } context.beginPath(); context.strokeStyle = "blue"; context.lineWidth = 25; // context.fillStyle = context.strokeStyle = `blue`; renderCell(shapePolygon, context); context.stroke(); // voronoi.delaunay.renderHull(context); // context.clip(); return context.canvas; }39:T96f,shapePolygon = { // console.log("Render shapePolygon"); yield [[0, 0], [width, 0], [width, height], [0, height], [0, 0]]; const delaunay = voronoi.delaunay; const { triangles, halfedges } = delaunay; const queue = new FlatQueue(); const onEdge = new Uint8Array(halfedges.length); const visited = new Uint8Array(points.length); function addToQueue(i) { onEdge[i] = 1; visited[triangles[i]] = 1; const p0 = points[triangles[i]]; const p1 = points[triangles[i % 3 === 2 ? i - 2 : i + 1]]; const r = circumcircles.r[i]; const x = circumcircles.x[i]; const y = circumcircles.y[i]; const [x0, y0] = p0; const [x1, y1] = p1; const area = (y - y0) * (x1 - x) - (x - x0) * (y1 - y); const cx = (x0 + x1) / 2; const cy = (y0 + y1) / 2; const d = Math.sqrt(Math.pow(cx - x, 2) + Math.pow(cy - y, 2)); // if the center of a circumcircle on the edge lies outside the advancing polygon, // or inside but less than 0.2 circumradiuses away from the edge, queue it for collapsing if (area >= 0 || d / r < 0.02) queue.push(i, -r); } for (let i = 0; i < halfedges.length; i++) { if (halfedges[i] === -1) addToQueue(i); // start with convex hull edges } const ctx = DOM.context2d(width, height); // yield draw(ctx, queue, onEdge); while (true) { const i = queue.pop(); if (i === undefined) break; const i1 = halfedges[i % 3 === 2 ? i - 2 : i + 1]; const i2 = halfedges[i % 3 === 0 ? i + 2 : i - 1]; if (!visited[triangles[i1]] && i1 !== -1) { addToQueue(i1); addToQueue(i2); onEdge[i] = 0; } } const t = delaunay.triangles; var borderPoints = []; for (let i = 0; i < onEdge.length; i++) { if (!onEdge[i]) continue; borderPoints.push([points[t[i]], points[t[i % 3 === 2 ? i - 2 : i + 1]]]); } function dist(a, b) { return Math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2); } function sort(points, i = 0, sorted = []) { const t = points[i]; var nxI = (i + 1) % points.length; var nxPt = points[nxI]; points.forEach((b, i) => { if (dist(t[1], nxPt[0]) > dist(t[1], b[0])) { nxPt = b; nxI = i; } }); if (!sorted.includes(nxPt[0])) { sorted.push(nxPt[0]); return sort(points, nxI, sorted); } else { sorted.push(points[0][1]); return sorted; } } yield sort(borderPoints); }3a:T754,script = { const blob = new Blob( [ ` importScripts("${await require.resolve("d3-delaunay@^5.1.1")}"); 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.random() * width); const y = points[i * 2 + 1] = ~~( Math.random() * height); if (Math.random() < data[y * width + x]) break; } } const delaunay = new d3.Delaunay(points); const voronoi = delaunay.voronoi([0, 0, width, height]); for (let k = 0; k < 40; ++k) { // 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] * 1.2; 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) * 20; 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,k}); voronoi.update(); } close(); }; ` ], { type: "text/javascript" } ); const script = URL.createObjectURL(blob); invalidation.then(() => URL.revokeObjectURL(script)); return script; }3b:[{"id":"14959f050311f400368624031a7b9e4285f35c65ca4022f618f9250d7163ef4b0a0582de20f7d9790ed76b3442b4a77ebb96b86f641c1d8466f6544325144aed","href":"https://static.observableusercontent.com/files/14959f050311f400368624031a7b9e4285f35c65ca4022f618f9250d7163ef4b0a0582de20f7d9790ed76b3442b4a77ebb96b86f641c1d8466f6544325144aed","name":"obama.png","type":"image/png","lastModified":1582626852380.108,"size":619051}] 2f:{"title":"Voronoi Stippling : cells visualisation","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"point_stippling = {\n await visibility();\n\n const context = DOM.context2d(width, height);\n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n yield context.canvas;\n\n context.beginPath();\n\n const vor = voronoi;\n var pts = voronoi.delaunay.points;\n\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n for (let i = 0, n = pts.length; i < n; i += 2) {\n const x = pts[i],\n y = pts[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 // voronoi.delaunay.renderHull(context);\n // context.clip();\n\n yield context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"md`---\n_Project developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Pierre Ripoll._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":888,"value":"md`# Other visualisations I found while experimentating.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1382,"value":"md`This one is using [d3-tricontour](https://github.com/Fil/d3-tricontour) (you can play with the threshold nubmer inside the code !`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1392,"value":"high_threshold_isocontour = {\n await visibility();\n const context = DOM.context2d(width, height);\n context.clearRect(0, 0, width, height);\n context.beginPath();\n var i = 0;\n var min = Infinity,\n max = 0;\n const vor = mutable voronoi;\n var pts = vor.delaunay.points;\n var cells = [];\n for (const cell of vor.cellPolygons()) {\n const [x1, y1] = d3.polygonCentroid(cell);\n const x0 = pts[i * 2],\n y0 = pts[i * 2 + 1];\n const [x2, y2] = findExtremePoint([x0, y0], cell);\n const contained = d3.polygonContains(shapePolygon, [x2, y2]);\n const area = Math.abs(d3.polygonArea(cell));\n if (contained) {\n max = Math.max(area, max);\n min = Math.min(area, min);\n }\n cells.push({ cell, i, area, contained, pt: [x0, y0] });\n i++;\n }\n i = 0;\n handleContour(cells, voronoi);\n var color = d3\n .scaleSequential(d3.interpolateGreys)\n .domain([max, min])\n .nice();\n drawIsocontour(context, cells, color, 200);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"md`For a threshold value of 3 (intersting for graffiti art ?)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1404,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1650,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1666,"value":"md`For a \"HOPE\" poster feeling try the Blue/Red version : `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1660,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1556,"value":"viewof threshold2 = slider({\n min: 1,\n max: 15,\n step: 2,\n value: 3,\n title: \"Threshold\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"md` Next ones are showing lines from cell points to extremes points (meaning the furthest of the cell's polygon)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":881,"value":"LSD_stippling_BW = {\n await visibility();\n const context = DOM.context2d(width, height);\n\n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n\n var i = 0;\n const vor = mutable voronoi;\n var pts = vor.delaunay.points;\n\n for (const cell of vor.cellPolygons()) {\n const [x1, y1] = d3.polygonCentroid(cell);\n const x0 = pts[i * 2],\n y0 = pts[i * 2 + 1];\n\n const [x2, y2] = findExtremePoint([x0, y0], cell);\n\n const area = Math.abs(d3.polygonArea(cell));\n\n context.beginPath();\n context.moveTo(x0, y0);\n context.lineTo(x2, y2);\n context.strokeStyle = \"black\";\n context.closePath();\n context.stroke();\n i++;\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"md`Other colors :`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1300,"value":"LSD_stippling_Cividis = {\n await visibility();\n const context = DOM.context2d(width, height);\n\n context.fillStyle = \"white\";\n context.fillRect(0, 0, width, height);\n context.beginPath();\n\n var i = 0;\n const vor = mutable voronoi;\n var pts = vor.delaunay.points;\n\n const color = d3\n .scaleSequential(d3.interpolateCividis)\n .domain([0, width / 30]);\n\n for (const cell of vor.cellPolygons()) {\n const [x1, y1] = d3.polygonCentroid(cell);\n const x0 = pts[i * 2],\n y0 = pts[i * 2 + 1];\n\n const [x2, y2] = findExtremePoint([x0, y0], cell);\n\n const len = Math.sqrt((x2 - x0) ** 2 + (y2 - y0) ** 2);\n context.strokeStyle = color(len);\n context.beginPath();\n context.moveTo(x0, y0);\n if (d3.polygonContains(shapePolygon, [x1, y1])) context.lineTo(x2, y2);\n else context.lineTo(x1, y1);\n context.closePath();\n context.stroke();\n i++;\n }\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1325,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1207,"value":"md`The next one is contemporary art-like version of Obama, cause why not ? `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"mutable voronoi = Generators.observe(next => {\n // Yield the input’s initial value.\n next([]);\n\n const worker = new Worker(script);\n console.log(\"Worker created\");\n var voronoi = null;\n var delaunay = null;\n var pts = [];\n function messaged({ data: { points, k } }) {\n // console.log(\"Message received\", k);\n\n for (let i = 0; i < points.length; i++) pts[i] = points[i];\n\n if (!delaunay) {\n delaunay = new d3.Delaunay(pts);\n voronoi = delaunay.voronoi([0, 0, width, height]);\n } else voronoi.update();\n next(voronoi);\n }\n\n invalidation.then(() => worker.terminate());\n worker.addEventListener(\"message\", messaged);\n worker.postMessage({ data, width, height, n });\n\n // When the generator is disposed, detach the event listener.\n return () => worker.terminate();\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"findExtremePoint = (pt, cell) => {\n const [x0, y0] = pt;\n var d = 0,\n x2 = 0,\n y2 = 0;\n for (let j = 0; j < cell.length; j++) {\n const dx = (cell[j][0] - x0) ** 2;\n const dy = (cell[j][1] - y0) ** 2;\n const dd = Math.sqrt(dx + dy);\n if (dd > d) {\n d = dd;\n x2 = cell[j][0];\n y2 = cell[j][1];\n }\n }\n return [x2, y2];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"handleContour = (cells, voronoi) => {\n for (let j = 0; j < cells.length; j++) {\n const { cell, contained } = cells[j];\n if (!contained) {\n cells[j].cell = intersection(cell, shapePolygon);\n cells[j].area = Math.abs(d3.polygonArea(cells[j].cell));\n if (cells[j].area <= 0) continue;\n var sumArea = 0,\n numCells = 0;\n for (let index of voronoi.neighbors(j)) {\n const neighbor = cells[index];\n if (neighbor.contained) {\n sumArea += neighbor.area;\n numCells++;\n }\n }\n\n cells[j].contained = true;\n cells[j].area = sumArea / numCells;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"drawIsocontour = (context, cells, color, thresholds = 50) => {\n const path = d3.geoPath().context(context),\n contours = d3.tricontour().thresholds(thresholds)(\n cells.filter(d => d.contained).map((d, i) => [d.pt[0], d.pt[1], d.area])\n );\n\n context.lineWidth = 1;\n context.moveTo(shapePolygon[0][0], shapePolygon[0][1]);\n for (let e of shapePolygon) context.lineTo(e[0], e[1]);\n context.clip();\n\n for (const c of contours) {\n context.strokeStyle = context.fillStyle = color(c.value);\n context.beginPath();\n\n path(c);\n\n context.fill();\n context.stroke();\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1446,"value":"mutable renderDone = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":934,"value":"md`# Convex circle algorithm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":937,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":957,"value":"points = {\n var points = [];\n const pts = voronoi.delaunay.points;\n for (let i = 0; i < pts.length / 2; i++) {\n points.push([pts[i * 2], pts[i * 2 + 1]]);\n }\n return points;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"circumcircles = {\n const delaunay = voronoi.delaunay;\n const n = delaunay.halfedges.length;\n const x = new Float64Array(n);\n const y = new Float64Array(n);\n const r = new Float64Array(n);\n\n for (let i = 0; i < n; i++) {\n const [ax, ay] = points[delaunay.triangles[i - (i % 3) + 0]];\n const [bx, by] = points[delaunay.triangles[i - (i % 3) + 1]];\n const [cx, cy] = points[delaunay.triangles[i - (i % 3) + 2]];\n\n const dx = bx - ax;\n const dy = by - ay;\n const ex = cx - ax;\n const ey = cy - ay;\n\n const bl = dx * dx + dy * dy;\n const cl = ex * ex + ey * ey;\n const d = 0.5 / (dx * ey - dy * ex);\n\n const x2 = (ey * bl - dy * cl) * d;\n const y2 = (dx * cl - ex * bl) * d;\n\n x[i] = ax + x2;\n y[i] = ay + y2;\n r[i] = Math.sqrt(x2 * x2 + y2 * y2);\n }\n\n return { x, y, r };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":968,"value":"md`# Other script/modules`","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":1687,"value":"margin = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"obama.png\")\n .image()\n .then(image => {\n const height = Math.round((width * image.height) / image.width);\n const context = DOM.context2d(width, height, 1);\n context.fillStyle = \"rgba(255,255,255,255)\";\n context.fillRect(0, 0, width, height);\n context.drawImage(\n image,\n 0,\n 0,\n image.width,\n image.height,\n margin,\n margin,\n width - 2 * margin,\n height - 2 * margin\n );\n\n const { data: rgba } = context.getImageData(0, 0, width, height);\n // return context.canvas;\n const data = new Float64Array(width * height);\n for (let i = 0, n = rgba.length / 4; i < n; ++i)\n data[i] = Math.max(0, 1 - rgba[i * 4] / 254);\n data.width = width;\n data.height = height + 1;\n return data;\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"n = 500 + Math.round((width * height) / 200)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1101,"value":"renderCell = (cell, ctx) => {\n ctx.moveTo(cell[0][0], cell[0][1]);\n for (const pt of cell) {\n ctx.lineTo(pt[0], pt[1]);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = data.height","pinned":false,"hidden":false,"mode":"ojs"},{"id":1097,"value":"intersection = (poly1, poly2) => {\n // console.log(\n // poly1[0],\n // poly1[poly1.length - 1],\n // poly2[0],\n // poly2[poly2.length - 1]\n // );\n const polyA = turf.polygon([poly1]);\n\n const polyB = turf.polygon([poly2]);\n\n const intersection = turf.intersect(polyA, polyB);\n return intersection.geometry.coordinates[0];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"import { checkbox } from \"@nitaku/checkbox\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1558,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":405,"value":"d3 = require(\"d3@5\", \"d3-delaunay@5\", \"d3-tricontour@0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1092,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":940,"value":"FlatQueue = require('flatqueue')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}