3e:null 3f:["$","title",null,{"children":"Hex edges | Luvoy | Observable"}] 45:[] 43:{"id":"af99b36638c6f0ab","slug":null,"title":"Hex edges","thumbnail":"0359fd548e4562ed7e9c62afbc051e5e18c33c5522dac9fea14538dc8bbc4fc4","access_level":"public","create_time":"$D2023-06-24T08:26:07.719Z","update_time":"$D2023-06-24T08:26:07.719Z","view_time":null,"first_public_time":"$D2023-06-24T08:26:07.719Z","has_unpublished_edits":null,"fork":{"id":"dc66d89147a2d3fc","slug":"hex-edges","title":"Hex edges","owner":{"id":"f8968868603f3a63","login":"sanderevers","name":"Sander Evers"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7571c48497ac6e2f","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":"starter_2024","bio":"","following":false},"version":193,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"c23375506cfabab8","login":"luvoy","name":"Luvoy","avatar_url":"https://avatars-next.observableusercontent.com/60944aee68bca793fee3137f720bb9737eeb2817cf7feb1e66cf91c9dc015987","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hex edges","cells":[{"id":0,"value":"md`# Hex edges`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"viewof ew = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof cam = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"md`To find the edge between tiles A and B:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`To find tiles A and B given their edge:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"mod2 = n => Math.abs(n%2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"import {form} from '@mbostock/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}} 44:"$43:body"