Hexagonal Grids (2013)

This is an amazing resource. Bookmarked. I recently implemented the board game Hex[1] using canvas. I didn't need most of this stuff... really only "neighbors", "hex to pixel" and "pixel to hex". Hex uses a rhombus grid, a possibility surprisingly not mentioned in this article, which makes choosing a coordinate system easier. It's simply row and column, and finding a cell's neighbors is simple, if slightly counterintuitive. From my code: (let [possible-neighbors [[ col (dec row)] ; Upper left [(inc…

That's neat. I spend my work days simulating advanced nuclear reactors that have hexagonal fuel assemblies. In my codes I've used a lot of this info. This is an excellent resource that I'll be referring people who come from the more traditional square lattice world.

A surprise to be on HN! Tech notes for the curious: I started the page in 2013 based on notes I had been collecting for ~20 years before that. I update this reference page as I come up with better visualizations and explanations. The last major update was in 2018 when I rewrote it from using d3.js to using vue.js. It greatly reduced the amount of code I was writing, and also let me make the page more interactive. I…

A surprise to see my page on HN! For those of you curious about the tech: Diagrams are in SVG. Canvas would be faster but SVG is easier for me to work with, especially for attaching mouse events to each hexagon. It also automatically scales to high dpi displays. With SVG and HTML accessed the same way, I can use the same code for updating text/samples as I do for updating diagrams. This includes interpolating values as noted by anchpop…