In the last post I described how I had expected to generate lots of algorithm variants, but ended up discovering a better approach. The new system is different from the system I used when I wrote the hex grid guide. It's simpler and more modular, and I have ideas for making it even simpler. If I am able to simplify enough, I may not need to generate algorithms dynamically. In any case, the final step is to convert the algorithms in abstract format into a specific programming language.

Transforming the algorithms into code was easier than figuring out how to structure the algorithms, but it was also more tedious. For expressions, it's pretty straightforward. A syntax tree like Add(Name("x"), Int(3)) turns into x+3 in Python/C/Java/JS or (+ x 3) in Racket/Scheme/Lisp/Clojure. For statements, it's pretty straightforward too, but there are a few more differences between languages, including indentation and placement of braces. For declarations, languages start differing more, with functions, structs, classes, methods, modules, namespaces, etc. I wanted to generate code that uses each language's canonical style, including naming conventions and comments. I'll show some examples, using the distance function:

Function("cube_distance", Int, [Param("a", Cube), Param("b", Cube)],
                Subtract(Field("a", "x"), Field("b", "x"))),
                Subtract(Field("a", "y"), Field("b", "y")))),
            Subtract(Field("a", "z"), Field("b", "z")))
Python uses / for float division and // for integer division. My syntax tree does not. Instead, when I see a pattern Call(Int, Divide(a, b)) I want to output a//b instead of int(a/b). This shows up in the distance function:
def cube_distance(a, b):
    return (abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z)) // 2

Python doesn't need a separate class to hold int and float coordinates, so FractionalCube should be merged into Cube.

C++ uses / for float division and / for integer division, but it depends on the types of the operands. My syntax tree doesn't track the types of the subexpressions, so I don't know which I'll get. As a result, I end up with an unneccessary int() in the distance function:
int cube_distance(Cube a, Cube b)
    return int((abs(a.x - b.x) + abs(a.y - b.y) + abs(a.z - b.z)) / 2);
Division is tricky here too. Racket uses quotient instead of / when the result is going to be an integer. Like Python's output, I can look for Call(Int, Divide(a, b)) and output (quotient a b) instead of (truncate (/ a b)). Racket also supports multi-argument addition, so I could convert (+ (+ a b) c) into (+ a b c). Here's the distance function in Racket:
(define (cube-distance a b)
   (+ (abs (- (cube-x a) (cube-x b)))
      (abs (- (cube-y a) (cube-y b)))
      (abs (- (cube-z a) (cube-z b))))

The naming convention is cube-distance instead of cube_distance.

C#, Java
Declarations are different here. Instead of top-level functions, I need to make everything into a method. For now, I'm using static methods, but it might make sense to use instance methods for some of the algorithms. Here's what distance looks like in C#:
public class Cube
    static public int Distance(Cube a, Cube b)
        return (int)((Math.Abs(a.x - b.x) + Math.Abs(a.y - b.y) + Math.Abs(a.z - b.z)) / 2);

Instead of cube_distance, I should use Cube.Distance in C# and Cube.distance in Java.

The differences between languages got larger as I moved to bigger functions. The sequence and record data types translate easily: C++ arrays/structs, Python lists/records, C# arrays/classes, Racket vectors/structs. But some algorithms use sets and maps, and it's less clear what types to use there. For Racket and Haskell, I want to use a more functional style, but for C++ and Python, I use an imperative style. In the end:

  • I didn't implement the more complex algorithms. They're harder, and I decided I should prioritize getting the simple ones working across many languages and many grid types. If I had known this from the beginning, I would've used a simpler proto-algorithm approach.
  • I didn't implement the more complex approach of adapting code for each grid type. Instead, I used the simpler approach of having each grid type convert to Cube coordinates, and then use the cube algorithms. If I had known this from the beginning, I would've written the algorithms by hand instead of writing a proto-algorithm to algorithm conversion step.
  • I didn't implement all the grid types. Instead of all the variants of Cube, Axial, and Offset, I only implemented one Cube variant, one Axial variant, and two Offset variants. If I had known this from the beginning, I would've written a simpler system.
  • The code for Axial coordinates is mostly different from the code for Offset coordinates. I was expecting more code to be shared. This made think that I probably shouldn't treat these two the same.
  • I now realize that my choice of Cube/Axial isn't great. Instead of q=x, r=z I should have picked q=x, r=y! I could have switched the y and z axes on the cube diagram. If I merge Cube and Axial I'll make this change then.
  • I wrote the proto-algorithms expecting that I'd output functional style (Racket, Haskell), object-oriented style (C#, Java, Haxe), and module style (C++, Python, Javascript). Looking back, I probably should have used object-oriented style everywhere. The style differences somewhat complicated things.
  • I also wrote the proto-algorithms expecting that I'd use them on the page itself, and also convert them to code for a downloadable library. That complicated things. I should have focused on downloadable libraries.
  • The code generator for Racket mostly works but it wasn't a purely functional style (because my "proto-algorithms" are imperative). I had planned to make the standard algorithms work in a purely functional style but some of the more complex algorithms will probably be too much work to justify a separate version. Looking back, I shouldn't have spent time trying to figure out a functional style for Racket; it wasn't worth spending time on a different style for just one language.
  • I didn't implement variants in code style, such as indentation and brace placement. When I started the project it seemed like it would be cool, but it just doesn't seem important anymore.
  • I didn't implement a "pro" version of the code that would use small arrays with 2 or 3 elements instead of named fields. Thinking of them as arrays or matrices would also potentially allow SIMD or GPU instructions. Pointy vs flat variants become an index swizzle. Converting hex to pixel and pixel to hex become matrix multiplies.

It's been a fun project, and as usual there are so many more things I want to do with this, but there are so many other things I want to do too, so I want to wrap this up.

  • Should I switch to the simpler system that merges Axial and Cube together? This will require a major update to the hex grid guide. It would make my advice much simpler. Instead of "use Cube for calculations and Axial for storage" I could say "use Axial everywhere". However, I'm worried that it will annoy anyone who's using the current hex grid page, because the new system will be incompatible.
  • Should I treat pointy vs flat as an x/y switch or as a 90° rotation? I am leaning towards x/y switch. I will also have to switch q/r to keep q being "columns" and r being "rows".

What's my next step? Testing. I have unit tests for the generated code, and they all pass, but I want to test the code in a real project. What real project do I have? The hex grid page itself. I'm going to replace the hand-written hex grid code for the page with the generated code. This will give me confidence that I have the right design and set of algorithms.

What are other things I need to do before I publish? Add comments to the generated code, implement more outputs (Javascript, Typescript, Java, Objective C, Racket), add an option for overloaded operators (+ and ==) in languages where that's standard style, and figure out instance vs class methods.

That's it for now. My blog posts aren't polished but I hope they give you a "behind the scenes" view of the stuff that goes through my head and the things I try while working on these projects. I also find that trying to write down what I'm doing helps me work out the design and details, and this series of posts was no exception. By "thinking out loud" I've been able to resolve some of the issues I had been trying to figure out. I hope to have the rest of the code generator finished in a few weeks.

Labels: , , ,


Craig wrote at March 30, 2015 7:25 AM

I am enjoying your posts. Good luck!

Unknown wrote at April 11, 2015 8:28 AM


I have recently started developing a game using a hexgrid and the problem of converting mouse coordinates to a grid location has hassled me for 2 days now.

I tried working with code examples from your website unfortunately to no success (I am working with c++ and none of the information I needed was in c++).

I finally worked it out today and I thought I would share my code with you in hope that you may be able to help provide other people with good solutions.

I am aware the following code is quiet sloppy but all my testing has shown it works.

My grid layout is “odd-q” vertical layout and the following code only works for that grid type.

Note: sf::Vector2i is from the SFML library and refers to an class that holds an x and y int.

sf::Vector2i HexagonGrid::PixelToHexgrid(double x, double y) {

double w = (hex_radius*2)*0.75; //
double h = (hex_radius*2)*0.86; //So currently I have worked out height is 86% of the radius, dodgy? I don't know..

int xgrid = floor(x/w); //What column is it roughly in?
int splitx = xgrid*w; //Bring this back to a pixel coordinate, but it's now rounded to the column

if ((int)floor(x/w) & 1) //Is it an odd column?
y-=h/2; //Shift the y value upward to compensate for the odd column

double yp = ((int)y % (int)h)/h; //Percentage of way down y row 0-1 (0% to 100%)
double zigzag = abs((yp*2)-1); //Convert yp into a range of 0-2 then -1 to 1 and finally abs it so we get a wrapped result of 0 - 0.5 - 1 (same as 0)

splitx += zigzag*(w/3); //Multiply the zigzag by 1/4 of the pentagon, or with the current w, 1/3 is 1/4

if ((((int)x % (int)w)/w)<0.33) //Is the point on the join between cells
if (splitx > x) //Is the current point in the zigzag (join) larger than the pixel x?
if (xgrid & 1) //Was the old result a odd column?
y+=h/2; //Remove the shift from earlier
y-=h/2; //Add a shift because it is now odd
xgrid-=1; //Push left one because this isn't really in the next column

int ygrid = floor(y/h);

return sf::Vector2i(xgrid, ygrid);

Keep up the good work :) and thanks for the ideas on how to tackle this problem

Becareful not to let pretty diagrams draw away from the information, I found a few times your interactive diagram was absolutely amazing but the information with it was mostly just confusing and involved jumping to other parts of the page to find out what a function was

Amit wrote at April 11, 2015 8:51 AM

Thanks Chris! The algorithms (including pixel to hex) should work with any language but I'm also working on some code samples in various languages, including C++.