31:T5b4,canvas = { const n = insideNum + perimeterNum; const rawPoints = []; for (let i = 0; i < perimeterNum; i++) { let r = (height/3) let theta = i/(perimeterNum) * 2 * Math.PI; let x = width/2 + r * Math.cos(theta) let y = height/2 + r * Math.sin(theta) rawPoints.push(x) rawPoints.push(y) } for (let i=0; i < n - perimeterNum; i++) { let r = (height/4) * Math.sqrt(Math.random()) let theta = Math.random() * 2 * Math.PI; let x = width/2 + r * Math.cos(theta) let y = height/2 + r * Math.sin(theta) rawPoints.push(x) rawPoints.push(y) } const points = Float64Array.from(rawPoints) const delaunay = new d3.Delaunay(points); const context = DOM.context2d(width, height); context.lineCap = "square"; const voronoi = delaunay.voronoi([0, 0, width, height]); for (let i = 0; i < 1200; ++i) { context.clearRect(0, 0, width, height); context.beginPath(); voronoi.render(context); context.strokeStyle = "red"; context.stroke(); for (let j = 0; j < n * 2; j += 2) { const x0 = points[j], y0 = points[j + 1]; if (j > perimeterNum * 2) { const cell = voronoi.cellPolygon(j >> 1); if (cell === null) continue; const [x1, y1] = d3.polygonCentroid(cell); points[j] = x0 + (x1 - x0) * 1 points[j + 1] = y0 + (y1 - y0) * 1 } context.fillRect(x0-1,y0-1,2,2) } yield context.canvas; voronoi.update(); } }32:[] 2f:{"title":"Lloyd’s Algorithm in a circle","cells":[{"id":0,"value":"md`# Lloyd’s Algorithm in a circle\n\nI wanted the relaxing effect of [Lloyd's Algorithm](https://observablehq.com/@mbostock/lloyds-algorithm) but in a circle. I decided to try just setting up a perimeter of points for the circle that don't get relaxed (forking the example linked above). This works OK?\n\nYou could probably use a similar approach to get relaxation in any polygon... though [Voronoi Stippling](https://observablehq.com/@mbostock/voronoi-stippling) is an alternative (possibly better) approach.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"viewof insideNum = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber)}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":291,"value":"viewof perimeterNum = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${(form.value = form.i.valueAsNumber)}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"d3 = require(\"d3-delaunay@5\", \"d3-polygon@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}