31:T655,{ reset; const wrapper = d3.create("div"); wrapper.append("style").html(` .inline { display: inline-block; font-weight: bold; } .inline:before { background: black; content: ""; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 2px; margin-bottom: 1px; } .original { color: #888; } .original:before { background: #ccc; } .new { color: steelblue; } .new:before { background: steelblue; } `); const svg = wrapper.append("svg").attr("width", width).attr("height", height); svg .selectAll("circle") .data(data) .join("circle") .attr("fill", (d) => (d.original ? "#ccc" : "steelblue")) .attr("r", 4) .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]); if (debug) { svg .selectAll("polygon") .data(triangles) .join("polygon") .attr("points", (d) => d) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("fill", "none"); } wrapper .append("div") .style("font-family", "sans-serif") .style("font-size", "14px") .html( `Target was

${target}

. Initial run placed

${ data.filter((d) => d.original).length }

. Second run placed remaining

${ data.filter((d) => !d.original).length }

.` ); return wrapper.node(); }32:T5ca,function poissonFinish(width, height, count, first) { const points = []; // Our first run takes us through the Poisson Disc sampler const sample = sampler( width, height, Math.sqrt(((width * height) / count) * 0.61), first || [width / 2, height / 2] ); for (let i = 0; i < count; i++) { const point = sample(); if (point) { point.original = true; points.push(point); } else { break; } } // Our second run uses a Delaunay triangulation to fill in the gaps let left = count - points.length; if (left) { // We add points at the corners and on the sides // in case two or fewer points were placed in the first pass const polygons = voronoi() .size([width, height])([ ...points, [0, 0], [0, height / 2], [0, height], [width / 2, height], [width, height], [width, height / 2], [width, 0], [width / 2, 0] ]) .triangles() .map((t) => { t.centroid = centroid(t); t.area = area(t); return t; }) .sort((a, b) => b.area - a.area); while (left) { for (let i = 0; i < left; i++) { const polygon = polygons[i]; if (polygon) { const point = polygons[i].centroid; point.original = false; points.push(point); } else { break; } } left = count - points.length; } } return points; }33:T83a,function sampler(width, height, radius = 5, first) { var k = 30, // maximum number of samples before rejection radius2 = radius * radius, R = 3 * radius2, cellSize = radius * Math.SQRT1_2, gridWidth = Math.ceil(width / cellSize), gridHeight = Math.ceil(height / cellSize), grid = new Array(gridWidth * gridHeight), queue = [], queueSize = 0, sampleSize = 0, padding = radius / 2; return function() { if (!sampleSize) return first ? sample(...first) : sample(width / 2, height / 2); // start sample in middle // Pick a random existing sample and remove it from the queue. while (queueSize) { var i = Math.random() * queueSize | 0, s = queue[i]; // Make a new candidate between [radius, 2 * radius] from the existing sample. for (var j = 0; j < k; ++j) { var a = 2 * Math.PI * Math.random(), r = Math.sqrt(Math.random() * R + radius2), x = s[0] + r * Math.cos(a), y = s[1] + r * Math.sin(a); // Reject candidates that are outside the allowed extent, // or closer than 2 * radius to any existing sample. if (padding <= x && x < width - padding && padding <= y && y < height - padding && far(x, y)) return sample(x, y); } queue[i] = queue[--queueSize]; queue.length = queueSize; } }; function far(x, y) { var i = x / cellSize | 0, j = y / cellSize | 0, i0 = Math.max(i - 2, 0), j0 = Math.max(j - 2, 0), i1 = Math.min(i + 3, gridWidth), j1 = Math.min(j + 3, gridHeight); for (j = j0; j < j1; ++j) { var o = j * gridWidth; for (i = i0; i < i1; ++i) { if (s = grid[o + i]) { var s, dx = s[0] - x, dy = s[1] - y; if (dx * dx + dy * dy < radius2) return false; } } } return true; } function sample(x, y) { var s = [x, y]; queue.push(s); grid[gridWidth * (y / cellSize | 0) + (x / cellSize | 0)] = s; ++sampleSize; ++queueSize; return s; } }34:[] 2f:{"title":"Poisson Finish","cells":[{"id":0,"value":"md`# Poisson Finish\n\nEnsures that the number of entries returned from a Poisson Disc distribution always equals the target number of entries. Works by placing new entries in the biggest triangular gaps in the initial distribution. The result is not an actual Poisson Disc distribution, but it can be helpful if you want to place a specific number of points in a rectangle.\n\n~~~js\nimport { poissonFinish } from \"@washpostgraphics/poisson-finish\"\n\ndata = poissonFinish(width, height, target)\n~~~\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"viewof reset = Inputs.button(\"Reset\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"viewof debug = Inputs.toggle({ label: \"Show triangles:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"data = {\n reset;\n\n return poissonFinish(width, height, target, [\n Math.random() * width,\n Math.random() * height\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"epsilon = 1e-6","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"triangles = voronoi()\n .size([width, height])([\n ...data.filter((d) => d.original),\n [0, 0],\n [0, height / 2],\n [0, height],\n [width / 2, height],\n [width, height],\n [width, height / 2],\n [width, 0],\n [width / 2, 0]\n ])\n .triangles()\n .map((t) => {\n t.centroid = centroid(t);\n t.area = area(t);\n return t;\n })\n .sort((a, b) => b.area - a.area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":350,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"target = 400","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"width = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":335,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"function centroid(vertices){\n let a = 0, x = 0, y = 0, l = vertices.length;\n\n for (let i = 0; i < l; i++) {\n const s = i === l - 1 ? 0 : i + 1,\n v0 = vertices[i],\n v1 = vertices[s],\n f = (v0[0] * v1[1]) - (v1[0] * v0[1]);\n\n a += f;\n x += (v0[0] + v1[0]) * f;\n y += (v0[1] + v1[1]) * f;\n }\n\n const d = a * 3;\n\n return [x / d, y / d];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"function area(vertices, signed = false){\n let a = 0;\n\n for (let i = 0, l = vertices.length; i < l; i++) {\n const v0 = vertices[i],\n v1 = vertices[i === l - 1 ? 0 : i + 1];\n\n a += v0[0] * v1[1];\n a -= v1[0] * v0[1];\n }\n\n return signed ? a / 2 : Math.abs(a / 2);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"voronoi = d3.voronoi","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"d3 = require(\"d3-voronoi@1\", \"d3-selection@3\");","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}