29:null 2a:["$","title",null,{"children":"Hex Grid Layout from Center | Mike Slattery | Observable"}] 2f:T6f8,// Generates an array of dot objects with their position and a fake value function generateHexDotData(podCount, separationRadius) { return d3.range(podCount).map((d, i) => { let r = ring(i) * separationRadius let xPos = 0 let yPos = 0 if (isOnSpoke(i)) { xPos = calcPosHex(i, separationRadius).x yPos = calcPosHex(i, separationRadius).y } else { let currentSpoke = i while (!isOnSpoke(currentSpoke)) currentSpoke-- let nextSpoke = i while (!isOnSpoke(nextSpoke)) nextSpoke++ let lastSpokeXPos = calcPosHex(currentSpoke, separationRadius).x let lastSpokeYPos = calcPosHex(currentSpoke, separationRadius).y let nextSpokeXPos = 0 let nextSpokeYPos = 0 if (positionAlongRing(currentSpoke) === (5 / 6)) { const idx = firstOfRing(i) - 1 nextSpokeXPos = calcPosHex(idx, separationRadius).x nextSpokeYPos = calcPosHex(idx, separationRadius).y } else { nextSpokeXPos = calcPosHex(nextSpoke, separationRadius).x nextSpokeYPos = calcPosHex(nextSpoke, separationRadius).y } let interPos = (i - currentSpoke) / (nextSpoke - currentSpoke) const hyp = Math.hypot((nextSpokeXPos - lastSpokeXPos) * interPos, (nextSpokeYPos - lastSpokeYPos) * interPos) xPos = lastSpokeXPos + (Math.cos(angle(lastSpokeXPos, lastSpokeYPos, nextSpokeXPos, nextSpokeYPos)) * hyp) yPos = lastSpokeYPos + (Math.sin(angle(lastSpokeXPos, lastSpokeYPos, nextSpokeXPos, nextSpokeYPos)) * hyp) } return { "x": xPos ? xPos : 0, "y": yPos ? yPos : 0, "value": Math.random() } }) }30:[] 2d:{"id":"c3f9e6da534b7e03","slug":"hex-grid-layout-from-center","title":"Hex Grid Layout from Center","thumbnail":"65ec8f04b3b12471641bfadf3e958e917e9789b51acf559e19119c71cde81429","access_level":"public","create_time":"$D2021-06-22T14:54:47.086Z","update_time":"$D2021-12-07T16:39:39.484Z","view_time":null,"first_public_time":"$D2021-06-25T01:07:46.952Z","has_unpublished_edits":null,"fork":{"id":"d99ec08c4746ba11","slug":"hex-grid-layout-from-center","title":"Hex Grid Layout from Center","owner":{"id":"167a7adedc130581","login":"kemper","name":"Kemper Smith"}},"stars":3,"starred":false,"owner":{"type":"team","id":"1d28085143aea7e3","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":"pro_2024"},"version":185,"publish_version":185,"role":null,"authored":false,"authors":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null}],"members":[{"type":"individual","id":"58237c9d2f2a8662","login":"slattery","name":"Mike Slattery","avatar_url":"https://avatars-next.observableusercontent.com/417cf7adb17b1f1aa6f920cec50e6d939759814f2dfea487e20afcc3e6e29449","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hex Grid Layout from Center","cells":[{"id":0,"value":"md`# Hex Grid Layout from Center`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`This hexgrid layout look like it could be a basis for nice animations. I forked [@kemper's work](/@kemper/hex-grid-layout-from-center) to add a viewof for the count, and watch the progression. I want to try generating a whole ring at a time, creating strokes, then filling each position. First serially then maybe populating from spokes first for stragglers...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"testArea = {\n const svg = d3.select(DOM.svg(width, 300))\n //TODO, add toggle for flat or pointy\n svg.append(\"g\")\n .attr(\"transform\", `translate(${width / 2},${150}) rotate(-90)`)\n .selectAll(\".pod\")\n .data(generateHexDotData(hfc_pods, hfc_radius))\n .join(\"circle\")\n .attr(\"class\", \"pod\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", hfc_size)\n .style(\"fill\", \"steelblue\")\n \n return svg.node() \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"html`

${hfc_pods} units will need ${ring(hfc_pods-1)} rings

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof hfc_pods = {\n const form = html``;\n form.p.oninput = () => form.op.value = `${form.value = form.p.valueAsNumber} points`;\n form.p.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"viewof hfc_radius = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px radius`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"viewof hfc_size = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber}px radius`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"md`\n ---\n ## Dot position calculation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Calculates the x,y position of the vertices of a hexagon\nfunction calcPosHex(i, sepRadius) {\n const x = Math.cos((Math.PI * 2) * positionAlongRing(i)) * (ring(i) * sepRadius)\n const y = Math.sin((Math.PI * 2) * positionAlongRing(i)) * (ring(i) * sepRadius)\n \n return {\"x\": x, \"y\": y}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"// Calcaulates the postion of a dot as a ratio of all the dots in its ring (e.i. a dot at the bottom vertex of a hexaon would return 0.5)\nfunction positionAlongRing(i) {\n return ((i + 1) - firstOfRing(i)) / (ring(i) * 6)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"function isOnSpoke(i) {\n return i === 0 ? true : positionAlongRing(i) % (1/6) < 0.000000001\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// Returns the index of the first new dot on a ring given an index\nfunction firstOfRing(i) {\n const c = ring(i)\n let sum = 1\n \n for (let j = 0; j < c; j++) {\n sum = sum + (j * 6)\n }\n \n return i === 0 ? 1 : sum + 1\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Calculates which ring to place a dot on based on its index\nfunction ring(i) {\n const s = Math.sqrt(9 - (12 * -i))\n const r = (-3 + s) / 6\n \n return Math.ceil(r)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"md`\n ---\n ## Helper functions\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"function angle(p1x, p1y, p2x, p2y) {\n const dy = p2y - p1y\n const dx = p2x - p1x\n const theta = Math.atan2(dy, dx)\n return theta\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"md`\n ---\n ## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"