3f:null 40:["$","title",null,{"children":"Hexagon Grid | Michelle Sharer | Observable"}] 46:[] 44:{"id":"17b62a87433e467d","slug":"hexagon-grid","title":"Hexagon Grid","thumbnail":"40ec7eced7887a6ad0dd0e6ae11914e2dbb7596840ad60f97d5f9aa321724321","access_level":"public","create_time":"$D2019-07-17T02:48:50.655Z","update_time":"$D2019-07-21T15:42:55.148Z","view_time":null,"first_public_time":"$D2019-07-17T04:01:38.481Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a8c61a0bd942bbae","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":"starter_2024","bio":"Code is art","following":false},"version":134,"publish_version":134,"role":null,"authored":false,"authors":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"bio":"Code is art","following":false}],"members":[{"type":"individual","id":"9fee62f7566ea13e","login":"michellesh","name":"Michelle Sharer","avatar_url":"https://avatars-next.observableusercontent.com/3b3457ea034b092ee6e8816f25ca63ab51d6818c09fee1007b6c5c72db95c4fc","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hexagon Grid","cells":[{"id":0,"value":"md`# Hexagon Grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html`

LED Count: ${leds.reduce((acc, length) => acc + length, 0)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof cushion = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"leds = {\n const coords = d3.range(0, RADIUS * 2 + cushion, cushion);\n const svg = d3.select('#grid');\n let leds = [];\n \n svg.selectAll('circle').remove(); // clear the svg element\n\n coords.forEach((y, row) => {\n leds.push(0);\n coords.forEach(x => {\n if (isInsideHexagon(x, y)) {\n svg.append('circle')\n .attr('fill', 'white')\n .attr('cx', x)\n .attr('cy', y)\n .attr('r', 1);\n leds[row]++;\n }\n });\n });\n \n return leds.filter(strand => strand !== 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"isInsideHexagon = (x, y) => {\n const areaOfTriangle = (x1, y1, x2, y2, x3, y3) => {\n return Math.abs((x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0);\n }\n let a, a1, a2, a3, sum;\n const isInsideTriangle = (x1, y1, x2, y2, x3, y3, x, y) => {\n a = areaOfTriangle(x1, y1, x2, y2, x3, y3);\n a1 = areaOfTriangle(x, y, x2, y2, x3, y3);\n a2 = areaOfTriangle(x1, y1, x, y, x3, y3);\n a3 = areaOfTriangle(x1, y1, x2, y2, x, y);\n sum = a1 + a2 + a3;\n return a >= sum - 1 && a <= sum + 1;\n }\n return vertices.some((p, i) => {\n const nextP = vertices[i+1] || vertices[0];\n return isInsideTriangle(RADIUS, RADIUS - 10, p.x, p.y, nextP.x, nextP.y, x, y);\n });\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"vertices = [\n { x: RADIUS + RADIUS, y: RADIUS - 10},\n { x: RADIUS/2 + RADIUS, y: RADIUS*h + RADIUS - 10},\n { x: -RADIUS/2 + RADIUS, y: RADIUS*h + RADIUS - 10},\n { x: -RADIUS + RADIUS, y: RADIUS - 10},\n { x: -RADIUS/2 + RADIUS, y: -RADIUS*h + RADIUS - 10},\n { x: RADIUS/2 + RADIUS, y: -RADIUS*h + RADIUS - 10}\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"h = (Math.sqrt(3)/2);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"RADIUS = 350","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"