31:T6a9,{ const context = DOM.context2d(width, height); const radius = 1, tau = 2 * Math.PI; // sort the points once so d3.polygonHull doesn't spend too much time re-sorting pts.sort((a, b) => a[0] - b[0]); let points = new Set(pts), hull = d3.polygonHull([...points]); context.fillStyle = 'rgb(0,255,0)'; for (const p of points) { context.beginPath(); context.arc(p[0], p[1], radius, 0, tau); context.fill(); } // sort the points once so d3.polygonHull doesn't spend too much time re-sorting pDpts.sort((a, b) => a[0] - b[0]); let pDpoints = new Set(pDpts), pDhull = d3.polygonHull([...pDpoints]); context.fillStyle = 'rgb(0,0,255)'; for (const p of pDpoints) { context.beginPath(); context.arc(p[0], p[1], radius, 0, tau); context.fill(); } while (hull || pDhull) { const p = Math.random(); if (hull) { context.strokeStyle = 'rgb(0,128,0,0.25)'; context.lineWidth = 0.5; context.beginPath(); for (let i = 0; i < hull.length; i++) { const next = hull[i]; context.lineTo(...next); points.delete(next); } context.lineTo(...hull[0]); context.stroke(); hull = d3.polygonHull([...points]); } if (pDhull) { context.strokeStyle = 'rgb(0,0,128,0.25)'; context.lineWidth = 0.5; context.beginPath(); context.moveTo(pDhull[0][0], pDhull[0][1]); for (let i = 0; i < pDhull.length; i++) { const next = pDhull[i]; context.lineTo(...next); pDpoints.delete(next); } context.lineTo(...pDhull[0]); context.stroke(); pDhull = d3.polygonHull([...pDpoints]); } yield context.canvas; } }32:[] 2f:{"title":"Convex hull peeling II","cells":[{"id":0,"value":"md`# Convex hull peeling II\n\n*Inspired by Jeff Calder and Charles K Smart's preprint: [\"The Limit Shape of Convex Hull Peeling\"](https://arxiv.org/abs/1805.08278).* See [the parent notebook](https://observablehq.com/@bryangingechen/convex-hull-peeling) for more discussion.\n\nSuppose you take a bunch of [Poisson-disk-sampled](https://bost.ocks.org/mike/algorithms/) points (blue) and a bunch of points drawn from the [Poisson point process](https://en.wikipedia.org/wiki/Poisson_point_process) (green) in a region and repeatedly remove the boundaries of their convex hulls.\n\nThe following animation shows the evolution of those boundaries:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`I've tuned the intensity of the Poisson process by hand so that the speed of the evolution of the green / blue curves is roughly the same.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof polygon = polygonInput({\n value: scaledPolygon,\n title: 'Try another polygon!',\n description: 'Drag vertices to move, click on vertices to remove, click elsewhere to add vertices (the added vertex will split the red segment, if present). When ready, click the \"Rescale and submit!\" button below.',\n width: width*0.5,\n height: height*0.5,\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"buttons = {\n const W = width*0.5; const H = width*0.5;\n const reset = html`