2c:null 2d:["$","title",null,{"children":"Lloyd’s Algorithm in a circle | Grant Custer | Observable"}] 32: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(); } }33:[] 30:{"id":"f30d750211f595b0","slug":"lloyds-algorithm-in-a-circle","title":"Lloyd’s Algorithm in a circle","thumbnail":"b9d1ac2d7f3eba7abdf3cf9bc151cdf69e3ee7bf5568db6d22753e11a88f18d7","access_level":"public","create_time":"$D2021-04-13T18:22:59.707Z","update_time":"$D2021-04-13T21:59:14.080Z","view_time":null,"first_public_time":"$D2021-04-13T19:53:34.457Z","has_unpublished_edits":null,"fork":{"id":"3e35d744eb6f5df2","slug":"lloyds-algorithm","title":"Lloyd’s Algorithm","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":13,"starred":false,"owner":{"type":"team","id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":"starter_2024"},"version":314,"publish_version":314,"role":null,"authored":false,"authors":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null}],"members":[{"type":"individual","id":"a1f8c368ee3d80be","login":"grantcuster","name":"Grant Custer","avatar_url":"https://avatars-next.observableusercontent.com/10eebb9a620b6b833738fb495f94fb682bcdc3270b247a9a8aef575ed0702c48","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"d3 = require(\"d3-delaunay@5\", \"d3-polygon@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"