How do I color a hexagonal grid such that it doesn't have neighbors of the same color?

Question

I have a javascript app that generates a hex grid. Each hex is pointy topped with three variables for each of the cube coordinates (x, y & z). I also have an array with three hex sprites.

I've tried sprite = sprites[hex.x&3], which produces neat rows of hexes. I have also tried to offset the rows depending on the column via sprite = sprites[(hex.x + hex.y&3)&3] but that didn't work. I'm currently fiddling with the formula with little success.

I know for a fact that I need no less than three sprites to do this, but I can't find a way to combine the three cube coordinates to show the correct sprite on the array :(

Answer 1

In a hex grid you'll need three colors to color each hex so that it doesn't have the same color as a neighbor:

You were on the right track with your solution. Instead of adding x+y you'll want to subtract x-y. The other change is that &3 is for bit manipulation; you'll want %3 instead. However, in some languages, including Javascript, %3 can return a negative number, so you'll need to use ((___%3)+3)%3 to make it positive.

The color/sprite id you want is ((x-y)%3 + 3) % 3. I made an interactive demo to test this.