2b:null 2c:["$","title",null,{"children":"Hexagon tiling of a hexagonal grid with similar orientation | AttackOnTyler | Observable"}] 31:Te16,{ const {svg,center_text,corner_text,hexagon,hexaside,gridpoint,at,cc2xy} = hexgrid({...conf1,height:350,unit_space:22, width:width/2-20}); function select_col(cc) { const [i,j,k,xr,yr,zr] = small_to_big(cc); const sel_coord = [xr,yr,zr][form2.coord]; return my.mod(sel_coord,2)==0 ? "goldenrod":"grey"; } const is_center = cc => my.mod(cc[2]+shift*cc[1],area)==0; svg.append('svg:defs').append('svg:marker') .attr('id', 'end-arrow') .attr('viewBox', '0 -5 10 10') .attr('refX', 6) .attr('markerWidth', 4) .attr('markerHeight', 4) .attr('orient', 'auto') .append('svg:path') .attr('d', 'M0,-5L10,0L0,5') .attr('fill', 'black'); hexagon().attr("fill",select_col).attr("stroke","white").attr("opacity",0.4); center_text() .text(cc => is_center(cc)?cc:null); hexaside(0).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(0,"white")); hexaside(2).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(2,"white")); hexaside(4).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(4,"white")); const b1 = my.rotate(my.augment([r,r+1]),3-form2.coord); const b2 = my.rotate(my.augment([-1,shift]),3-form2.coord); svg.append("path") .attr("d",d3.line()([my.scale(b1,0.2),my.scale(b1,0.8)].map(cc2xy))) .attr("stroke-width",3) .attr("stroke","black") .style('marker-end', "url(#end-arrow)"); svg.append("path") .attr("d",d3.line()([my.scale(b2,0.1),my.scale(b2,0.9)].map(cc2xy))) .attr("stroke-width",3) .attr("stroke","black") .style('marker-end', "url(#end-arrow)"); const b1_label = my.scale(b1,0.7); b1_label[form2.coord] = b1_label[form2.coord]-1.2; const b2_label = my.scale(b2,0.7); b2_label[form2.coord] = b2_label[form2.coord]-1.2; at(b1_label).append("text").text("b1"); at(b2_label).append("text").text("b2"); // corner_text(5,0.6) // .style("font-weight",show_coord[0]?"bold":"normal") // .attr("fill",show_coord[0]?"black":"grey") // .text(cc => is_center(cc)?cc[0]:null); // corner_text(1,0.4) // .style("font-weight",show_coord[1]?"bold":"normal") // .attr("fill",show_coord[1]?"black":"grey") // .text(cc => is_center(cc)?cc[1]:null); // corner_text(3,0.6) // .style("font-weight",show_coord[2]?"bold":"normal") // .attr("fill",show_coord[2]?"black":"grey") // .text(cc => is_center(cc)?cc[2]:null); //center_text().text('x').style('font-weight','bold'); const stroke_start=my.scale(my.rotate(my.augment([1,1]),form2.coord),1/3); const stroke_end=my.scale(my.rotate(my.augment([-1,-1]),form2.coord),1/3); const text_even=my.scale(my.rotate(my.augment([-1,1]),form2.coord),1/4); const text_odd=my.scale(my.rotate(my.augment([1,-1]),form2.coord),1/4); const hl = hexgrid({...conf1,height:350,unit_space:22*(2*r+1)*0.5*Math.sqrt(3),width:width/2-20,swapxy:true}); hl.hexagon().attr("fill","white").attr("stroke","black"); hl.gridpoint.append("path") .attr("d",d3.line()([stroke_start,stroke_end].map(hl.cc2xy))) .attr("stroke-dasharray","10 7") .attr("stroke","black") hl.gp_at(text_even).append("text") .style("dominant-baseline","middle") .attr("text-anchor","middle") .text(cc=>cc[my.mod(-form2.coord-1,3)]?null:2*cc[my.mod(-form2.coord+1,3)]); hl.gp_at(text_odd).append("text") .style("dominant-baseline","middle") .attr("text-anchor","middle") .text(cc=>cc[my.mod(-form2.coord-1,3)]?null:2*cc[my.mod(-form2.coord+1,3)]-1); return html`${hl.svg.node()} ${svg.node()}`; } 32:[] 2f:{"id":"c15c58cfff14a060","slug":"hexagon-tiling-of-a-hexagonal-grid-with-similar-orientation","title":"Hexagon tiling of a hexagonal grid with similar orientation","thumbnail":"79ea1c19eeb27c018d8ea9666c7fe499f4af0929fbae82bf370e91c76e942f6e","access_level":"public","create_time":"$D2023-02-09T20:39:52.684Z","update_time":"$D2026-09-04T14:49:52.381Z","view_time":null,"first_public_time":"$D2023-02-09T20:39:52.684Z","has_unpublished_edits":null,"fork":{"id":"47e466502e507073","slug":"hexagon-tiling-of-an-hexagonal-grid","title":"Hexagon tiling of an hexagonal grid","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0846f670ba9f1587","login":"attackontyler","name":"AttackOnTyler","avatar_url":"https://avatars-next.observableusercontent.com/e32dfb59840e69935152d6cb1e37ea28bdc58dfd96cf52d4501d885c54229b4b","tier":"starter_2024"},"version":1824,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ade04bbef6337cb8","login":"attackontyler","name":"AttackOnTyler","avatar_url":"https://avatars-next.observableusercontent.com/e32dfb59840e69935152d6cb1e37ea28bdc58dfd96cf52d4501d885c54229b4b","tier":null}],"members":[{"type":"individual","id":"ade04bbef6337cb8","login":"attackontyler","name":"AttackOnTyler","avatar_url":"https://avatars-next.observableusercontent.com/e32dfb59840e69935152d6cb1e37ea28bdc58dfd96cf52d4501d885c54229b4b","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 tiling of a hexagonal grid with similar orientation","cells":[{"id":0,"value":"md`# Hexagon tiling of a hexagonal grid with similar orientation\n\nIn this notebook I will show a method for filling a hexagonal grid with larger hexagons, like so:\n\nAOT - I plan on adding the images from the original Hexagon tiling of an hexagonal grid for direct comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"{ \n function smallhex_color(xyz) {\n const [i,j,k] = small_to_big(xyz);\n const nr = my.mod(i-j,3);\n return d3.color(d3.interpolateRainbow((nr % 5)/5)).brighter(1.3);\n }\n \n const {svg,hexagon} = hexgrid({...conf1, unit_space:25, height:250});\n hexagon(0.9).attr(\"fill\",smallhex_color)\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"md`This doesn't look particularly difficult to do, at least procedurally. The centers of the big hexagons make up an evenly spaced grid, and once you've calculated those centers you can start assigning all small hexagons with distance-to-center ${tex`\\leq r`} to that specific big hexagon; one possible way to do this would be by spiraling outwards from the center.\n\nHowever, it would be nicer to have a formula which, given the coordinates of a small hex, tells you directly which big hex it belongs to. With this formula we could just color the grid in a top-to-bottom, left-to-right way, for example. More importantly, it would be suitable for visualization libraries like [D3.js](https://d3js.org/), in which you apply the same function to all data points. So, this formula is what this notebook is about.\n\nAOT - This has given me particular grief but at the very least I can have one layer programmatically generated. Even if that layer may be scuffed at the moment. More on that below...`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"md`## A grid of small hexes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"md`The small hexes can be given integer coordinates. I'll use a system of [cube coordinates](https://www.redblobgames.com/grids/hexagons/#coordinates-cube) ${tex`x,y,z`} for this, with ${tex`x+y+z=0`}. They work like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"{ \n const {svg,center_text,corner_text,hexagon} = hexgrid({...conf1,height:250,unit_space:45});\n function select_col(cc) {\n const hc = cc[form1.coord];\n return d3.color(d3.interpolatePuBuGn(0.2+my.mod(hc,8)/24));\n }\n hexagon().attr(\"fill\",select_col).attr(\"stroke\",\"grey\");\n corner_text(5,0.6)\n .attr(\"fill\",form1.coord==0?\"black\":\"grey\")\n .style(\"font-weight\",form1.coord==0?\"bold\":\"normal\")\n .text(cc => cc[0]);\n corner_text(1,0.5)\n .attr(\"fill\",form1.coord==1?\"black\":\"grey\")\n .style(\"font-weight\",form1.coord==1?\"bold\":\"normal\")\n .text(cc => cc[1]);\n corner_text(3,0.6)\n .attr(\"fill\",form1.coord==2?\"black\":\"grey\")\n .style(\"font-weight\",form1.coord==2?\"bold\":\"normal\")\n .text(cc => cc[2]);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"viewof form1 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"//What's nice about these is that they are symmetric w.r.t. 120º rotations (as is the big-hex tiling). \nmd`I'll assume we already have code that can draw a small hex with some given ${tex`x,y,z`} coordinates at the right place and in a color of our choice; see [Amit Patel's excellent guide](https://www.redblobgames.com/grids/hexagons) for how to do this.\n\nAOT - This is all still accurate and nessasary for the Hexagon tiling of a hexagonal grid with similar orientation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"md`## From small to big`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"md`In the picture at the top, you can see that the big hexes also form a grid, in much the same way as the small hexes. This second grid is wider spaced and rotated by approximately 30º with respect to the first grid. To identify a big hex, I'll refer to it by its cube coordinates ${tex`i,j,k`} in this second grid.\n\nThe function that will do the hard work is the one that maps the ${tex`x,y,z`} coordinates of a small hex to the ${tex`i,j,k`} coordinates of the big hex it belongs to. Once we have those, coloring the small hex is relatively easy. Without further ado, this function reads as follows:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"function small_to_big(xyz) {\n const [x,y,z] = xyz;\n const xh = my.div(y+shift*x, area),\n yh = my.div(z+shift*y, area),\n zh = my.div(x+shift*z, area);\n const i = my.div(1+xh-yh, 3),\n j = my.div(1+yh-zh, 3),\n k = my.div(1+zh-xh, 3);\n return [i,j,k,xh,yh,zh];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"md`Two minor remarks about this definition:\n- \\`my.div\\` is floored integer division.\n- Apart from \\`i,j,k\\`, the function also returns some intermediate results \\`xh,yh,zh\\`. This is not necessary for its primary job but we'll use it later on to visualize its inner working.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"md`But this is basically it: some linear transformation and integer division. Notice the identifiers \\`area\\` and \\`shift\\` ⏤ these are two constants related to the size of the big hexes. The *area* is the number of small hexes they consist of, and \\`shift\\` is a helper constant we'll discuss later. Both can be defined in terms of the *radius*: the [distance](https://www.redblobgames.com/grids/hexagons/#distances) between the center and the outer ring. For radius *r*, they are given by:\n\n\\`area\\` = ${tex`3r^2+3r+1\\\\`}\n\\`shift\\` = ${tex`3r+2`}\n\nIn the examples shown here we have`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"r = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"area = r>0 ? 2*r : 1;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":515,"value":"shift = 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"md`By the way, if you're not familiar with Observable, now is a good time to point out that all the cells in this notebook are *editable*: by clicking in their left margin they fold out to show their source code. (Try it on the cell with \\`r = ${r}\\` above. After changing the value, press Shift-Enter and the whole notebook will update automatically!)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":677,"value":"md`## Coloring the big hexes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"md`Using the ${tex`i,j,k`} coordinates, we can paint all the small hexes belonging to one big hex the same color. It would be nice if no two adjacent big hexes have the same color. One way to do this with just three colors is by choosing color ${tex`(i-j) \\operatorname{mod} 3`}:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function choose_color_number(xyz) {\n const [x,y,z]= xyz;\n const [i,j,k,xh,yh,zh] = small_to_big(xyz);\n return my.mod(i-j,3);\n //return x;\n //return i;\n //return yh;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"md`The numbers this function returns are shown below, all given a different color. Feel free to play around with \\`choose_color_number\\` and observe the results.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"{ \n function smallhex_color(cc) {\n const nr = choose_color_number(cc);\n return d3.color(d3.interpolateRainbow((nr % 7)/7)).brighter(1.1);\n }\n \n const {svg,center_text,corner_text,hexagon,hexaside} = hexgrid({...conf1,height:400,unit_space:25});\n hexagon(0.9).attr(\"fill\",smallhex_color)\n center_text().text(choose_color_number);\n // hexaside(0).attr(\"stroke-width\",3).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside_black(0));\n // hexaside(2).attr(\"stroke-width\",3).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside_black(2));\n // hexaside(4).attr(\"stroke-width\",3).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside_black(4));\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"md`## Some explanation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"md`The \\`small_to_big\\` function I presented here is inspired by a pixel-to-hex function that Amit Patel refers to as the \"branchless method\" on [this page](https://www.redblobgames.com/grids/hexagons/more-pixel-to-hex.html). The first part calculates the values \\`xh\\`, \\`yh\\` and \\`zh\\` for a small hex. Each of these can be visualised as a sequence of strips that cut each big hex in half:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"viewof form2 = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":947,"value":"md`On the left side, the \\`${f2.ph}\\` strips with their different values are shown schematically. In this world, the ${tex`x,y,z`} coordinates are real numbers, as is the radius ${tex`r`}; the integer value \\`${f2.ph}\\` is then simply calculated as ${tex`\\lfloor ${f2.p}/r \\rfloor`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"//md`If the small hexes would be infinitesimally small, turning the edges of the big hexes into straight lines, we could simply calculate \\`${f2.ph}\\` as ${tex`\\lfloor ${f2.p}/r \\rfloor`}. The different values for \\`${f2.ph}\\` would then also be separated by straight lines (${tex`${f2.p}=0,r,2r,\\ldots`}). But in the picture above, these lines are jagged, meaning that \\`${f2.ph}\\` is also dependent on \\`${f2.s}\\`.`\nmd`The \\`${f2.ph}\\` strips on the right side work in mostly the same way. However, the big hexes are not as nicely aligned here. They are shifted by one small hex every time, causing the strips to be jagged. It turns out that we can compensate for this by (pardon my linear algebra) switching to the coordinate system with the following basis:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"tex.block`b_1=\\begin{bmatrix} r \\\\ r+1 \\end{bmatrix}\n\\hspace{5em}\nb_2=\\begin{bmatrix} -1 \\\\ 3r+2 \\end{bmatrix}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"md`which is also shown on the right. (These vectors themselves are in ${tex`${f2.p},${f2.s}`} coordinates.) If we define \\`${f2.ph}\\` as the ${tex`b_1`} coordinate, we get`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"tex.block`\\begin{bmatrix} ${f2.ph} \\\\ \\cdot \\end{bmatrix} =\n\\begin{bmatrix} b_1 & b_2 \\end{bmatrix}^{-1}\n\\begin{bmatrix} ${f2.p} \\\\ ${f2.s} \\end{bmatrix} =\n\\frac{1}{3r^2+3r+1}\\begin{bmatrix} 3r+2 & 1 \\\\ -r-1 & r\\end{bmatrix}\n\\begin{bmatrix} ${f2.p} \\\\ ${f2.s} \\end{bmatrix}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1022,"value":"md`or in other words: \\`${f2.ph} = div(${f2.s}+shift*${f2.p},area)\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1040,"value":"md`The second part of the \\`small_to_big\\` function,`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"md`> \\`${f2.res} = div(1+${f2.ph}-${f2.sh}, 3)\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1086,"value":"md`weaves the \\`${f2.ph}\\` and \\`${f2.sh}\\` strips into the 120º zig-zags that make up the ${tex`${f2.res}`} coordinate:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1050,"value":"{ \n const {svg,center_text,corner_text,hexagon,hexaside,gridpoint,at} = hexgrid({...conf1,height:250,unit_space:22});\n function choose_color_number(xyz) {\n const ijk = small_to_big(xyz);\n return ijk[form2.coord];\n }\n function select_col(xyz) {\n return my.mod(choose_color_number(xyz),2)==0 ? \"goldenrod\":\"grey\";\n }\n const is_center = cc => my.mod(cc[2]+shift*cc[1],area)==0;\n \n hexagon().attr(\"fill\",select_col).attr(\"stroke\",\"white\").attr(\"opacity\",0.4);\n center_text().text(cc => is_center(cc)?choose_color_number(cc):null);\n hexaside(0).attr(\"stroke-width\",2).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside(0,\"white\"));\n hexaside(2).attr(\"stroke-width\",2).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside(2,\"white\"));\n hexaside(4).attr(\"stroke-width\",2).attr(\"stroke-linecap\",\"round\").attr(\"stroke\",bigside(4,\"white\"));\n\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"md`... but how this part works so nicely I cannot explain.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1660,"value":"md`## See also`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1661,"value":"md`👉 [Hexmod representation](https://observablehq.com/@sanderevers/hexmod-representation)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"appendix = md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"import {hexgrid,my,d3} from '@sanderevers/hex-grid'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"conf1 = {return {width, height:600, unit_space:40}};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"function bigside(nr,color) {\n const neighbors = [[1,0,-1],[0,1,-1],[-1,1,0],[-1,0,1],[0,-1,1],[1,-1,0]];\n const [xn,yn,zn] = neighbors[nr];\n return function(xyz) {\n const [x,y,z] = xyz;\n const [i,j,k] = small_to_big(xyz);\n const [i2,j2,k2] = small_to_big([x+xn,y+yn,z+zn]);\n const different = i-j-(i2-j2);\n return different?color:null;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"f2 = {\n const p = ['x','y','z'][form2.coord];\n const s = ['x','y','z'][my.mod(form2.coord+1,3)];\n const t = ['x','y','z'][my.mod(form2.coord+2,3)];\n const res = ['i','j','k'][form2.coord];\n const ph = p+'h';\n const sh = s+'h';\n const th = t+'h';\n const pv = cc=>cc[form2.coord];\n const sv = cc=>cc[my.mod(form2.coord+1,3)];\n const tv = cc=>cc[my.mod(form2.coord+2,3)];\n return {p,s,t,ph,sh,th,pv,sv,tv,res};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"