A Hex on Hexes

First thing's first in my little Cyvasse experiment: make the game board.

Here is my life experience with game programming:

• When I was 10 or so, I learned QuickBasic by making a text based game show. Which door do you want to go through? Sweet, you got mauled by a lion!
• In high school, I again used Basic to animate a 2d stick figure guy running off a cliff and getting eaten by a shark. 
• In college, I worked as part of a group creating a top down shooter in Java. This game was never playable for even a moment. It didn't even compile when we turned it in. I'm not sure how I passed that class.
• 3 years ago, I used Ruby and Gosu to make a 2d arcade style 'shoot the enemy coming from the right side of the screen' game. Not really finished, not published, but sort of playable with 3 levels.

So, when I say "first thing's first", what I mean is "I have no idea what to do first." 

I'm going to start with the game board, which is a hexagon of hexagons, each side being 7 hexagons wide. The colors alternate between white, red, and black, with each player sitting on a corner with a white hex. Each hexagon is oriented such that faces are on the top and bottom, rather than corners. 

Drawing a hex should be easy, right? Go ahead, try it. Here's my attempt, using Google Draw:

My hexes don't line up! Here's the problem: each side must be the same length, and must be parallel to the opposite side. I'm not sure how to solve this using a simple drawing app, so I've decided instead to draw each hex in code, rather than trying to use assets.

Because the hex is 13x13 between faces, I'll use a nested loop, and draw a polygon through calculated points.

If you've been paying attention, you may have noticed a few problems here. First, because my math skills are weak, not all of the faces are the same length - the top is shorter than the diagonal faces. That's fine for now, because they will at least fit together. Second, I've made a square of hexagons, rather than a hex. I'll figure that out later. But most importantly, these hexagons are all sitting on top of each other.

In a hexagonal grid, each hex shares faces diagonally as well as vertically. So I need to offset each hex vertically, depending on which column it is in. If a hex sits on an even column, it should move down a bit.

I've added edges to illustrate things more clearly.

Now I'm going to tackle the colors. Colors alternate vertically between white, black, and red, and no hex shares a face with another hex of the same color. I tried a number of schemes, but in the end I implemented a counter based on the y axis, resetting to either white or black for the top of each column.

Finally, a grid of hexes!

I'll leave it here for now.