28:null 29:["$","title",null,{"children":"Aperture | Mike Bostock | Observable"}] 2e:T497,canvas = { const height = 600; const context = DOM.context2d(width, height); const radius = Math.min(width, height) / 2 - 2; const P = polygon(n, radius); const a = p * -Math.PI * (1 / 2 - 1 / n); context.translate(width / 2, height / 2); context.beginPath(); context.moveTo(...P[0]); for (let i = 1; i < n; ++i) { context.lineTo(...P[i]); } context.closePath(); for (let i = n - 1; i >= 0; --i) { const [p0, p1] = lineRotate(P[i], P[(i + 1) % n], a); const [p2, p3] = lineRotate(P[(i + 1) % n], P[(i + 2) % n], a); const p4 = lineLineIntersect(p0, p1, p2, p3); if (i === n - 1) context.moveTo(...p4); else context.lineTo(...p4); } context.closePath(); context.fillStyle = "#ddd"; context.fill(); context.lineWidth = 1.5; context.stroke(); context.beginPath(); for (let i = 0; i < n; ++i) { const [p0, p1] = lineRotate(P[i], P[(i + 1) % n], a); const [p2, p3] = lineRotate(P[(i + 1) % n], P[(i + 2) % n], a); context.moveTo(...p2); context.lineTo(...lineLineIntersect(p0, p1, p2, p3)); } context.lineWidth = 1; context.strokeStyle = "#555"; context.stroke(); yield context.canvas; }2f:[] 2c:{"id":"9a90a24cab8d629d","slug":"aperture","title":"Aperture","thumbnail":"4e635eba405f455235582e6f86a97fad80cb16d4ff3fa79ead40d4dedf452aad","access_level":"public","create_time":"$D2018-11-21T15:36:54.874Z","update_time":"$D2018-11-25T01:09:11.796Z","view_time":null,"first_public_time":"$D2018-11-21T16:36:03.063Z","has_unpublished_edits":null,"fork":false,"stars":14,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":109,"publish_version":109,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Aperture","cells":[{"id":0,"value":"md`# Aperture`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof n = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} sides`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viewof p = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${((form.value = form.i.valueAsNumber) * 100).toFixed()}% closed`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"function polygon(n, radius) {\n const polygon = [[0, radius]];\n for (let i = 1; i < n; ++i) {\n const angle = i / n * 2 * Math.PI;\n const x = radius * Math.sin(angle);\n const y = radius * Math.cos(angle);\n polygon.push([x, y]);\n }\n return polygon;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"function lineLineIntersect([x0, y0], [x1, y1], [x2, y2], [x3, y3]) {\n const x02 = x0 - x2, y02 = y0 - y2;\n const x10 = x1 - x0, y10 = y1 - y0;\n const x32 = x3 - x2, y32 = y3 - y2;\n const t = (x32 * y02 - y32 * x02) / (y32 * x10 - x32 * y10);\n return [x0 + t * x10, y0 + t * y10];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"function lineRotate([x0, y0], [x1, y1], angle) {\n const dx = x1 - x0, dy = y1 - y0;\n const ca = Math.cos(angle), sa = Math.sin(angle);\n return [[x0, y0], [x0 + ca * dx - sa * dy, y0 + sa * dx + ca * dy]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"