Designing tiles for a triangular maze

We are updating some of our examples with better art. One of the cool examples on our site is a simple implementation of Prim’s maze generation algorithm. The maze is a triangular grid, but to depict walls nicely, we use a rhombille grid to lay out the tiles.

Here is how our original example looked:

Using these two tiles:

  

It’s difficult to see how the tiles connect without showing the borders.

In designing the tiles, it’s important to remember how they can and cannot connect in a rhombille grid. The rule is small angles always connect with other small angles, and big angles always connect with other big angles. Nowhere does a big angle touch a small angle.

You can see in the original example, the borders of the maze are not very nice; you need at least a third tile to close up the gap. Here is some of the images that we used to go through the thinking:

 

 

We commissioned Dave Baxter to make the set for us. We gave him an open brief, but hinted that we liked the art of Incredipede. Dave took on the challenge, and designed five beautiful tiles:

The center of the maze is made from tiles that correspond to the original two tiles. The border of the maze has two layers, each built from one additional tile. Finally, the exterior of the maze is built from the last tile. The different sections of tiles are shown in the image below.

Here is the result:

The tiles are very detailed:

You can also see a live example of the the maze being built step by step on our example page, or see the code here.