2b:null 2c:["$","title",null,{"children":"Hexmod representation | Sander Evers | Observable"}] 31:T73c,grid_hexmod = { const choose_color = xyz => patt[hexmod(xyz)]?"fuchsia":"#eeeeee"; function sixth(xyz) { const m = hexmod(xyz); //return my.div(my.mod(m-1,shift)+1,r+1); const tm = my.mod(m-1,shift), td = my.div(m-1,shift); const h1 = my.div(tm+1,r+1); const h2 = my.div(my.mod(m+2*r,shift-1)+1,r+1); return h1*2+h2; } const {svg,center_text,corner_text,cc2xy,hexagon,hexaside} = hexgrid({height:350,width,unit_space:25}); const caption = `The hexmod value of each small hex, and the color of the corresponding element of the array.` const outer = html`${svg.node()}

${caption}

`; function report(xyz) { const [x,y,z]=xyz; const [ox,oy,oz] = outer.value if (ox != x || oy !=y) { outer.value=xyz; outer.dispatchEvent(new CustomEvent("input")); } } const cursor = svg.append("circle") .data([[0,0,0]]) .attr("cx",xyz=>cc2xy(xyz)[0]) .attr("cy",xyz=>cc2xy(xyz)[1]) .attr("r",12) .attr("stroke","orange").attr("stroke-width",2).attr("fill","none"); const drawCursor = () => cursor.data([outer.value]) .attr("cx",xyz=>cc2xy(xyz)[0]).attr("cy",xyz=>cc2xy(xyz)[1]); viewof model_m.addEventListener("input",drawCursor); invalidation.then(() => viewof model_m.removeEventListener("input",drawCursor)); hexagon().attr("fill",choose_color).attr("stroke","white").on("mouseover",report); center_text().text(hexmod).on("mouseover",report); hexaside(0).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(0,"black")); hexaside(2).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(2,"black")); hexaside(4).attr("stroke-width",3).attr("stroke-linecap","round").attr("stroke",bigside(4,"black")); return outer; }32:T63b,matrix_hexmod = { const unit=25; const svg = d3.create("svg") .attr("width", width) .attr("height", unit*(r+1)); const caption = `Array patt of 1-bit colors that stores the repeating pattern.` const outer = html`${svg.node()}

${caption}

`; function report(p) { const [x,y,z]=inv_hexmod(p); const [ox,oy,oz] = outer.value if (ox != x || oy !=y) { outer.value=[x,y,z]; outer.dispatchEvent(new CustomEvent("input")); } } function flip(p) { const mcc = [...patt]; mcc[p]=1-mcc[p]; mutable patt=mcc; } const boxes = svg .selectAll("rect") .data(d3.range(area)) .join("rect") .attr("x", p => my.mod(p,shift)*unit) .attr("y", p => my.div(p,shift)*unit) .attr("height", unit).attr("width",unit) .attr("fill",p=>patt[p]?"fuchsia":"#eeeeee").attr("stroke","white") .on("mouseover",report) .on("click",flip); const p = hexmod(model_m); svg.append("rect") .attr("x",my.mod(p,shift)*unit) .attr("y",my.div(p,shift)*unit) .attr("height", unit).attr("width",unit) .attr("fill","none").attr("stroke","orange").attr("stroke-width",2); const numbers = svg.selectAll("text").data(d3.range(area)).join("text") .attr("x", p => my.mod(p,shift)*unit + unit/2) .attr("y", p => my.div(p,shift)*unit + unit/2) .attr("text-anchor","middle") .style("dominant-baseline","middle") .style("font-family","sans-serif") .style("font-size","10pt") .text(p=>p) .on("mouseover",report) .on("click",flip); return outer; }33:T524,{ const {svg,center_text,corner_text,cc2xy,hexagon,hexaside} = hexgrid({height:250,width,unit_space:25}); const caption = html`Translation by (${dx},${dy},${dz}) is adding ${hexmod([dx,dy,dz])} ${tex`\pmod{${A}}`}.` const outer = html`${svg.node()}

${caption}

`; const circleF = svg.append("circle").attr("r",12) .attr("stroke","orange").attr("stroke-width",2).attr("fill","none"); const circleT = svg.append("circle").attr("r",12).attr("cx",cc2xy([dx,dy])[0]).attr("cy",cc2xy([dx,dy])[1]) .attr("stroke","blue").attr("stroke-width",2).attr("fill","none"); const drawCircles = (xyz) => { const [xF,yF] = cc2xy(xyz); const [xT,yT] = cc2xy(my.add(xyz,[dx,dy,dz])); circleF.attr("cx",xF).attr("cy",yF); circleT.attr("cx",xT).attr("cy",yT); } hexagon().attr("fill","lightgrey").attr("stroke","white").on("mouseover",drawCircles); center_text().text(hexmod).on("mouseover",drawCircles); hexaside(0).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(0,"white")); hexaside(2).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(2,"white")); hexaside(4).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(4,"white")); return outer; }34:T59c,{ const {svg,center_text,corner_text,cc2xy,hexagon,hexaside} = hexgrid({height:250,width,unit_space:25}); const caption = html`Clockwise rotation by 1/6 is multiplication by ${s} ${tex`\pmod{${A}}`}.` const outer = html`${svg.node()}

${caption}

`; const circleF = svg.append("circle").attr("r",12) .attr("stroke","orange").attr("stroke-width",2).attr("fill","none"); const circleT = svg.append("circle").attr("r",12) .attr("stroke","blue").attr("stroke-width",2).attr("fill","none"); const drawCircles = (xyz) => { const [xF,yF] = cc2xy(xyz); const [x,y,z] = xyz; // const [xr,yr,zr] = rel_coords(xyz); // const [xc,yc,zc] = center_of(small_to_big(xyz)); // const [xT,yT] = cc2xy([xc-zr,yc-xr,zc-yr]); const [xT,yT] = cc2xy([-z,-x,-y]); circleF.attr("cx",xF).attr("cy",yF); circleT.attr("cx",xT).attr("cy",yT); } hexagon().attr("fill","lightgrey").attr("stroke","white").on("mouseover",drawCircles); center_text().text(hexmod).on("mouseover",drawCircles); hexaside(0).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(0,"white")); hexaside(2).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(2,"white")); hexaside(4).attr("stroke-width",4).attr("stroke-linecap","round").attr("stroke",bigside(4,"white")); return outer; }35:[] 2f:{"id":"4ec02aa4a67ac76d","slug":"hexmod-representation","title":"Hexmod representation","thumbnail":"7473b4b7fb48c892aaebc085b5a7b20890fea12581ef64f69a2a94c90bca0dfe","access_level":"public","create_time":"$D2019-03-27T17:37:33.219Z","update_time":"$D2021-10-17T13:06:31.100Z","view_time":null,"first_public_time":"$D2019-05-06T20:24:43.830Z","fork":false,"stars":32,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":842,"publish_version":842,"role":null,"authored":false,"authors":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null}],"members":[{"type":"individual","id":"f9fc95e35699f5b9","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":{"id":"94c673724b12232b","slug":"hex","title":"hex","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"type":"notebook","body":{"title":"Hexmod representation","cells":[{"id":0,"value":"md`# Hexmod representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"md`Suppose you have assembled [small hexes into big hexes](https://observablehq.com/@sanderevers/hexagon-tiling-of-an-hexagonal-grid) and you want to represent the position of a small hex relative to the big hex it is contained in; for example, because you want to create a pattern that repeats across the big hexes. A natural choice for this would be to use its small-hex coordinates *relative to the center* of its big hex:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"{ \n function col(xyz) {\n const [i,j,k] = small_to_big(xyz);\n const orange = d3.color(\"orange\");\n orange.opacity = [0,0.4,0.8][my.mod(i-j,3)];\n return orange.toString();\n }\n function opa(xyz) {\n const [i,j,k] = small_to_big(xyz);\n const d = Math.max(i,0)+Math.max(j,0)+Math.max(k,0);\n return 1/(d*2);\n }\n const bold_center = xyz => hexmod(xyz)==0 ? \"bold\" : null;\n \n \n const {svg,center_text,corner_text,hexagon,hexaside} = hexgrid({height:300,width,unit_space:40});\n hexagon().attr(\"fill\",col).attr(\"stroke\",\"black\").attr(\"opacity\",opa);\n corner_text(5,0.4).attr(\"opacity\",opa).attr(\"font-weight\",bold_center).text(xyz => rel_coords(xyz)[0]);\n corner_text(1,0.4).attr(\"opacity\",opa).attr(\"font-weight\",bold_center).text(xyz => rel_coords(xyz)[1]);\n corner_text(3,0.4).attr(\"opacity\",opa).attr(\"font-weight\",bold_center).text(xyz => rel_coords(xyz)[2]);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"// from absolute cube coords to cube coords relative to big hex center\nfunction rel_coords(xyz) {\n const [x,y,z] = xyz;\n const ijk = small_to_big(xyz)\n const [xc,yc,zc] = center_of(ijk);\n return [x-xc,y-yc,z-zc];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"function center_of(ijk) {\n const [i,j,k] = ijk;\n //const c = my.add(my.scale([2*r+1,-r,-r-1],i), my.scale([r,r+1,-2*r-1],j));\n return [(r+1)*i - r*k, (r+1)*j - r*i, (r+1)*k - r*j];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"md`These relative cube coordinates are familiar to work with, and useful if you want to do rotation around the big hex center, mirroring across the three big hex axes, or calculation of distance to center.\n\nBut there are different choices available.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"md`## The hexmod representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`In the \\`hexmod\\` representation, the small hexes within a big hex are represented by just one integer:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"{\n const unit_space = 30;\n const bound = unit_space * (2*r+1);\n const {svg,center_text,corner_text,cc2xy,hexagon,hexaside} = hexgrid({height:bound*0.9,width:bound,unit_space});\n const chm = (val,els) => xyz => small_to_big(xyz).join('').startsWith('000')?val:els;\n \n hexagon(0.9).attr(\"fill\",chm(\"purple\",\"white\"));\n center_text().attr(\"fill\",\"white\").text(xyz=>chm(hexmod(xyz))(xyz));\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":635,"value":"md`Each hex gets a unique ${tex`m`} value (${tex`0 \\leq m < A`}), where ${tex`A = 3r^2+3r+1`} is the area of the big hex. In the examples on this page, ${tex`r=${r}`} and ${tex`A=${A}`}. There are various ways to assign the ${tex`m`} values; the one shown here is the result of the following function:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"// from absolute (or relative) cube coords to one integer\nfunction hexmod(xyz) {\n const [x,y,z]=xyz;\n const m = my.mod(y+s*x, A);\n return m;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":414,"value":"md`Here, \\`my.mod\\` is the modulo function (a.k.a. the *remainder* of integer division); ${tex`s = 3r+2`} is a constant related to the size of the big hex (called \\`shift\\` in the [other notebook](https://observablehq.com/@sanderevers/hexagon-tiling-of-an-hexagonal-grid)).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"md`A remarkable property of this \\`hexmod\\` function is that it works directly on absolute cube coordinates; we don't need to determine the containing big hex first, like \\`rel_coords\\` does. (Note the similarity to the auxiliary \\`xh\\` value in the \\`small_to_big\\` function. In \\`yh\\` and \\`zh\\`, we could also replace \\`div\\` by \\`mod\\`, yielding alternative variants for \\`hexmod\\`.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"md`The fact that \\`hexmod\\` maps the hexes to a contiguous range of numbers makes it useful for *storing* a pattern (for example, of colors) that repeats across the big hexes. The pattern is stored in an array \\`patt\\` of size ${tex`A`}; a small hex with coordinates \\`xyz\\` is then given the color \\`patt[hexmod(xyz)]\\`. Here's an interactive demo (click the squares in the array):`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":337,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"md`## Translation and rotation in hexmod representation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":439,"value":"md`The \\`hexmod\\` representation has the following nice property (which follows from the linearity of the function):\n> If we start at a position with number ${tex`m`} and move by a vector ${tex`(dx,dy,dz)`}, we end up at a position with number ${tex.block`m + \\mathrm{hexmod}(dx,dy,dz) \\pmod A`}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":703,"value":"md`For example, moving by`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"dx=2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"dy=1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":683,"value":"dz = -(dx+dy)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"md`adds ${hexmod([dx,dy,dz])}. This property also \"[wraps around](https://www.redblobgames.com/grids/hexagons/#wraparound)\" the edges of the big hexes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":672,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":461,"value":"md`A more suprising property of the \\`hexmod\\` function is this:\n\n> If we start at a position with number ${tex`m`} and do a clockwise rotation by 60º around the center of the big hex, we end up at a position with number ${tex`m \\cdot s \\pmod A`}. A counterclockwise rotation takes us to number ${tex`m \\cdot s^{-1} \\pmod A`}, where ${tex`s^{-1} = 3r^2`}.` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":481,"value":"md`In particular, since the number 1 is located in the ring of six hexes directly around the center, this ring consists of powers of ${tex`s \\pmod A`}: ${tex`s^0,s^1,s^2,s^3,s^4,s^5`}, clockwise. These can be written in terms of ${tex`r`}:\n\n${tex.block`\\begin{aligned}\n s^0 &\\equiv 1\\\\\n s^1 &\\equiv 3r+2\\\\\n s^2 &\\equiv 3r+1\\\\\n s^3 &\\equiv 3r^2+3r \\equiv -1\\\\\n s^4 &\\equiv 3r^2-1 \\equiv -s\\\\\n s^5 &\\equiv 3r^2 \\equiv -s^2\n \\end{aligned}`}`\n\n//`Rotation of ${tex`(x,y,z)`} with number ${tex`m`} by 180º yields ${tex`(-x,-y,-z)`} with number ${tex`A-m`}.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"md`For ${tex`r=${r}`}, ${tex.block`s^0, \\ldots, s^5 \\equiv 1, ${s}, ${s-1}, ${A-1}, ${A-s}, ${A-s+1}`}` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":778,"value":"{\n const unit_space = 33;\n const bound = unit_space * 3;\n const {svg,center_text,corner_text,cc2xy,hexagon,hexaside} = hexgrid({height:bound,width:bound,unit_space});\n const chm = (val,els) => xyz => {\n const [x,y,z] = xyz;\n return ((Math.abs(x)+Math.abs(y)+Math.abs(z))<=2)?val:els;\n }\n \n hexagon(0.9).attr(\"fill\",chm(\"navy\",\"white\"));\n center_text().attr(\"fill\",\"white\").text(xyz=>chm(hexmod(xyz))(xyz));\n return svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":784,"value":"md`The rotation property is not difficult to prove. In cube coordinates, clockwise [rotation](https://www.redblobgames.com/grids/hexagons/#rotation) of ${tex`x,y,z`} yields new coordinates ${tex`-z,-x,-y`}; then\n\n${tex.block`\\begin{aligned}\n&\\textrm{hexmod}(-z,-x,-y)\\\\\n=& -sz-x \\\\\n=& s(x+y)-x\\\\ \n=& (s-1)x+sy \\\\\n\\equiv& s^2 x + sy \\\\\n=& s \\cdot \\textrm{hexmod}(x,y,z)\n\\end{aligned}`}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":756,"value":"md`## Back to cube coordinates`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`To recover relative cube coordinates from ${tex`m`}, you can use:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"function inv_hexmod(m) {\n const ms = my.div(m+r,s),\n mcs = my.div(m+2*r,s-1);\n const x = ms*(r+1) + mcs*-r,\n y = m + ms*(-2*r-1) + mcs*(-r-1),\n z = -m + ms*r + mcs*(2*r+1);\n return [x,y,z];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":764,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":284,"value":"viewof model_m = Inputs.input([0,0,0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"mutable patt = d3.range(area).map(x => x<=2*r+2?1:0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":291,"value":"{ \n Inputs.bind(grid_hexmod,viewof model_m); Inputs.bind(matrix_hexmod,viewof model_m);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"import {small_to_big, bigside, area, shift} with {r} from '@sanderevers/hexagon-tiling-of-an-hexagonal-grid'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":386,"value":"r= 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"s=shift","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":412,"value":"A = area","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"import {hexgrid,my,d3} from '@sanderevers/hex-grid'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"