2c:null 2d:["$","title",null,{"children":"WIP Circle path with specific number of points | Di | Observable"}] 32:T493,shapePathD = "M23.8819 20.0069C23.6277 19.8795 22.9072 20.8292 22.7507 20.9716C22.2779 21.4027 21.7026 21.798 21.0531 21.8372C19.5508 21.9275 18.9932 20.2473 18.5753 19.0835C17.5942 16.3714 15.4843 13.6244 12.3384 15.1877C11.0127 15.8466 10.172 17.1462 9.43054 18.4037C8.96011 19.2001 8.23317 20.9633 7.16329 21.0374C5.80457 21.1315 4.98801 19.7591 5.11631 18.4891C5.26154 17.05 6.35722 16.0128 7.34479 15.1064C9.41842 13.2037 11.5743 11.6833 12.2294 8.74472C12.8991 5.73821 11.5025 2.53632 8.56559 1.56372C7.47872 1.20423 5.66742 0.207064 3.91572 2.23473C0.920709 5.70029 3.46145 5.35871 4.36272 5.32707C7.39242 5.22043 8.67932 5.80899 8.25329 7.46016C8.11536 7.99331 7.80792 8.5394 7.50537 8.91928C7.3117 9.1792 6.47017 9.99721 6.09744 10.3317C5.24783 11.0944 4.38697 11.8483 3.6051 12.686C2.1504 14.2434 1.07325 16.1294 1.00306 18.3424C0.867501 22.5919 5.2551 26.6969 9.27319 24.2818C11.1701 23.1417 11.8478 20.9462 12.9007 19.1006C13.3397 18.3304 14.1521 17.3286 15.0703 18.1062C15.832 18.7552 16.221 19.8586 16.684 20.7295C17.5716 22.3982 19.0925 23.9273 21.1128 23.5112C22.0826 23.3112 22.8967 22.639 23.414 21.7842C23.5447 21.5677 24.2829 20.2006 23.8819 20.0069Z"33:[] 30:{"id":"c3744905be74492c","slug":"circle-path-with-specific-number-of-points","title":"WIP Circle path with specific number of points","thumbnail":"2d1b0cc9d4892d58613ec2e023d85f0ca95d16e48281de59168ebdcb10a2d0a4","access_level":"public","create_time":"$D2023-08-24T03:59:53.708Z","update_time":"$D2023-08-24T05:16:01.340Z","view_time":null,"first_public_time":"$D2023-08-24T03:59:53.708Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024"},"version":222,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"WIP Circle path with specific number of points","cells":[{"id":0,"value":"# WIP Circle path with specific number of points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"I was noodling around with some ideas and this seems to work in theory but does weird things in practice. I may or may not come back to this.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":151,"value":"## Option A) Same number of points as a specific shape","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"### Enter your shape path definition here:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"Your shape looks like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"demoShape = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"### Download this circle path text containing the same number of points as your shape:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":195,"value":"viewof shouldReverseCirclePath = Inputs.checkbox([\"Reversed\"], {label: \"Path order\", value: [\"Reversed\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"circlePath = {\n const circlePathEl = svg``;\n document.body.append(circlePathEl); // for getTotalLength\n const circleLength = circlePathEl.getTotalLength();\n \n const points = [];\n for (let i = 0; i < shapeInfo.numberOfPoints; i ++) {\n const length = i / circleLength * shapeInfo.pathLength;\n const { x, y } = circlePathEl.getPointAtLength(length);\n points.push([x.toFixed(precision), y.toFixed(precision)]);\n }\n points.push(points[0]);\n\n if (shouldReverseCirclePath.includes(\"Reversed\")) {\n points.reverse();\n }\n \n circlePathEl.remove();\n \n return d3.line()(points);\n // return d3.line().curve(d3.curveNatural)(points);\n // const circleLines = points.slice(1).map(point => (`L${point[0]},${point[1]}`)).join(\" \");\n // const circlePath = `M${points[0][0]} ${points[0][1]}${circleLines}`;\n // return circlePath;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"Here's how that circle looks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"demoCircle = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"## Option B) Arbitrary number of points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":162,"value":"viewof arbitraryNumberOfPoints = Inputs.range([1, 360], {label: \"Number of points\", step: 1, value: 74})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof shouldReversePath = Inputs.checkbox([\"Reversed\"], {label: \"Path order\", value: [\"Reversed\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"circlePathOfGivenPoints = {\n const circlePathEl = svg``;\n document.body.append(circlePathEl); // for getTotalLength\n const circleLength = circlePathEl.getTotalLength();\n circlePathEl.remove();\n \n const points = [];\n for (let i = 0; i < arbitraryNumberOfPoints; i ++) {\n const { x, y } = circlePathEl.getPointAtLength(i / circleLength * arbitraryNumberOfPoints);\n points.push([x.toFixed(precision), y.toFixed(precision)]);\n }\n points.push(points[0]);\n\n if (shouldReversePath.includes(\"Reversed\")) {\n points.reverse();\n }\n \n return d3.line()(points);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"Here's how that circle looks:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"demoArbitaryPointsCircle = html`