Hexagonal grids for games
This is an amazing resource. Bookmarked.<p>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".<p>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:<p><pre><code>    (let [possible-neighbors
            [[     col  (dec row)]   ; Upper left
             [(inc col) (dec row)]   ; Upper right
             [(dec col)      row ]   ; Left
             [(inc col)      row ]   ; Right
             [(dec col) (inc row)]   ; Lower left
             [     col  (inc row)]]] ; Lower right
      ...)
</code></pre>
I found drawing the board unexpectedly tricky. In my first iteration I simply wrote a "draw hexagon" function that plugged in all the mathematical values, then called this function for each cell. The result looked terrible due to aliasing artifacts. Some lines were doubled and not all cells appeared the same size. In the end I precomputed integer values for the length of the vertical sides and the dy and dx for the diagonal sides, then used these integer values repeatedly to draw the board.<p>For converting pixel coordinates to hexes I used a different method[2]. If the pixel is inside the interior rectangle of a hex (the part of the hex with top and bottom removed), we know it's in that hex. Otherwise it's in the top or bottom of a hex, and I use the direct algebraic formula (y=mx+b style) for the hex tops' diagonal lines to find out if the point is above or below that line.<p>Maybe these approaches of mine would be helpful for someone whose needs are more basic, as they rely on less cleverness than the techniques in this article.<p>[1] <a href="http://toxicsli.me/hex/" rel="nofollow">http://toxicsli.me/hex/</a><p>[2] <a href="https://github.com/graue/cljs-hex/blob/master/src-cljs/locate-cell.cljs" rel="nofollow">https://github.com/graue/cljs-hex/blob/master/src-cljs/locat...</a>