2b:null 2c:["$","title",null,{"children":"Hex edges | Sander Evers | Observable"}] 31:[] 2f:{"id":"dc66d89147a2d3fc","slug":"hex-edges","title":"Hex edges","thumbnail":"34faadbc2e0873ca89278888f2fa3e786cde4720e47cec2671403af19e2121cd","access_level":"public","create_time":"$D2020-10-10T13:21:44.180Z","update_time":"$D2020-10-17T13:44:45.223Z","view_time":null,"first_public_time":"$D2020-10-14T15:56:21.588Z","fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers","avatar_url":"https://avatars-next.observableusercontent.com/368f20f13b863df596105f72d5a25388cc1a7808dc9fa0ee74858280b5847b35","tier":"starter_2024"},"version":193,"publish_version":193,"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":4,"collection":{"id":"3704bea90b0005c7","slug":"isometric","title":"isometric","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"type":"notebook","body":{"title":"Hex edges","cells":[{"id":0,"value":"md`# Hex edges`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"md`A trick I learned from [@redblobgames](https://www.redblobgames.com/grids/edges/#corners) and [@garblefart](https://twitter.com/garblefart/status/1151802138244386816). A good way to represent the edges (white) between the tiles (green) of a hexagonal grid is to double the grid size, putting the green tiles at all-even coordinates. The white tiles in this new grid are the original edges.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"{ \n const grid = range(-7,8).flatMap(x=>range(-5,6).map(y=>[x,y,-(x+y)]));\n const hexes = g(...grid.map(xyz => translate(xyz,halfhexcube(xyz))));\n const fills = g(...grid.map(xyz => translate(xyz,fillcube(xyz))));\n const zoom = Math.pow(1.6,cam.pos)\n const project = m.ortho([],-7/zoom,7/zoom,-5/zoom,5/zoom,-1,1);\n const view = changingView(cam.pos);\n\n return svgtBox(transform(project,view,g(fills,hexes)),420,300)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"viewof ew = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"viewof cam = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"md`To find the edge between tiles A and B:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":137,"value":"function edge(tileA,tileB) {\n const [ax,ay,az] = tileA;\n const [bx,by,bz] = tileB;\n return [(ax+bx)/2, (ay+by)/2, (az+bz)/2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"md`To find tiles A and B given their edge:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"function tiles(edge) {\n const [ex,ey,ez] = edge;\n const [ax,ay] = [ex+mod2(ex), ey-mod2(ey)];\n const [bx,by] = [ex-mod2(ex), ey+mod2(ey)];\n return [[ax,ay,-(ax+ay)], [bx,by,-(bx+by)]];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"halfhexcube = xyz => {\n const line = svgt``;\n const txtAttrs = {\n 'text-anchor':'middle',\n 'style':'font-family:sans-serif; font-size:11px; dominant-baseline:middle'\n }\n const txt = svgt`${xyz.join(',')}`;\n const cube = g(hexrotate(0,line), hexrotate(2,line), hexrotate(4,line), txt);\n const edgeWidth = ew.pos;\n const hexWidth = 1 - edgeWidth;\n if (xyz[0]%2==0 && xyz[1]%2==0)\n return scale(hexWidth,cube);\n if (xyz[0]%2==0)\n return scale([hexWidth,edgeWidth,edgeWidth],cube);\n if (xyz[1]%2==0)\n return scale([edgeWidth,hexWidth,edgeWidth],cube);\n return scale([edgeWidth,edgeWidth,hexWidth],cube);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"fillcube = xyz => {\n const cube = svgt``;\n if (xyz[0]%2==0 && xyz[1]%2==0)\n return scale(1 - ew.pos,cube);\n return svgt``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"//corners = range(6).map(i=>hexrotate(i,mat=>m.mulV([],mat,[1,-1,-1,1]))(identity));\n//corners = mat => range(6).map(i=>hexrotate(i,svgtext`${[1,-1,-1]}`)(mat)).join(' ');\ncorners = svgtext(['',' ',' ',' ',' ',' ',''], ...range(6).map(i=>hexrotate(i,svgtext`${[1,-1,-1]}`)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"function hexrotate(nr,obj) {\n const once = m.mat33to44([],[0,-1,0,0,0,-1,-1,0,0]);\n return transform(...range(nr).map(()=>once),obj);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"// a view matrix for looking at the origin from startDir (t=0)\n// moving to endDir (t=1)\nchangingView = t => {\n const startDir = [1,1,1];\n const endDir = [0,0,1];\n const axis = v.cross3([],startDir,endDir);\n const endAngle = v.angleBetween3(startDir,endDir);\n const camPos = m.mulV([],m.rotationAroundAxis33([],axis,t*endAngle,true),startDir)\n return m.lookAt([],camPos,[0,0,0],[0,1,0])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"mod2 = n => Math.abs(n%2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"range = (x,y) => {\n const start= (y===undefined)?0:x;\n const end= Math.max((y===undefined)?x:y,start);\n return [...new Array(end-start).keys()].map(i=>i+start)\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"import {svgt,g,transform,translate,scale,identity,svgtBox,svgtext,m} from '@sanderevers/svg-transformations'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"v = require('https://bundle.run/@thi.ng/vectors@4.4.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"