31:T9bb,viewof game = { 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 pDpts.sort((a, b) => a[0] - b[0]); let pDpoints = new Set(pDpts); let pDhull; for (const p of pDpoints) { context.beginPath(); context.arc(p[0], p[1], radius, 0, tau); context.fill(); } let running = false; let x, y; function step() { // draw boundary context.strokeStyle = 'rgb(0,0,0,0.5)'; context.lineWidth = 0.5; context.beginPath(); for (let i = 0; i < pDhull.length; i++) { const next = pDhull[i]; context.lineTo(...next); pDpoints.delete(next); } context.lineTo(...pDhull[0]); context.stroke(); // (re)draw guess context.fillStyle = 'orange'; context.beginPath(); context.arc(x, y, 4 * radius, 0, tau); context.fill(); if (pDpoints.size >= 3) { pDhull = d3.polygonHull([...pDpoints]); requestAnimationFrame(step); } else { // redraw final boundary context.strokeStyle = 'rgb(128,0,0,1)'; context.lineWidth = 1.5; context.beginPath(); for (let i = 0; i < pDhull.length; i++) { const next = pDhull[i]; context.lineTo(...next); } context.lineTo(...pDhull[0]); context.stroke(); // draw final centroid const p = pDhull .reduce(([ax, ay], [vx, vy]) => [ax + vx, ay + vy], [0, 0]) .map(c => Math.round(c / pDhull.length)); context.fillStyle = 'red'; context.beginPath(); context.arc(p[0], p[1], 4 * radius, 0, tau); context.fill(); running = false; context.canvas.value.answer = p; context.canvas.dispatchEvent(new CustomEvent('input')); } } context.canvas.onclick = event => { const { offsetX, offsetY } = event; if (running) return; running = true; if (x === undefined && y === undefined) { x = offsetX; y = offsetY; context.canvas.value = { guess: [x, y] }; context.canvas.dispatchEvent(new CustomEvent('input')); } pDpoints = new Set(pDpts); pDhull = d3.polygonHull(pDpts); context.clearRect(0, 0, width, height); context.fillStyle = 'black'; for (const p of pDpoints) { context.beginPath(); context.arc(p[0], p[1], radius, 0, tau); context.fill(); } requestAnimationFrame(step); }; context.canvas.value = null; return context.canvas; }32:[] 2f:{"title":"Convex hull peeling guessing game","cells":[{"id":0,"value":"md`# Convex hull peeling guessing game\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 information!\n\nConsider the point configuration drawn below and suppose we repeatedly remove the points on the boundary of its convex hull. Over time, the boundary curve will migrate inwards and shrink until it disappears.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"{\n if (game === null) return md`Where will the boundary curve disappear? \n\nClick below to guess and find out!`;\n if (!game.answer) return md`You guessed (${game.guess[0]}, ${game.guess[1]})...\n\nPlease wait as the points are peeled...`;\n const {guess, answer} = game;\n const dx = guess[0]-answer[0];\n const dy = guess[1]-answer[1];\n const dist = Math.hypot(dx, dy);\n const button = html`