Battle Analysis: Drawing a Hexagon Grid

The **hexagon map** is drawn one hexagon at a time.

The center of the hexagon is located with a hexagon grid on the screen.

The hexagon is drawn by calculating the 6 corners and drawing a line between them. See the code below.

The hexagon grid will have a certain width and height. When the hexagon width is selected, the horizontal distance between adjacent hexes is equal to the width * 3/4.

The height of a hexagon will be equal to = sqrt(3)/2 * width and vertical distance between adjacent hexes is equal to the height.

In the panel below, adjust the hexagon width and height in pixels to draw a hexagon map. The hexagon size: (width, height) will display the hexagon size. The calculated size: (√3*width /2) will show the calculated height. Using the hexagon grid coordinate, each hexagon is draw by multiplying it with the distances between hexagon centers.

```
```

function isCenter(x,y) {

var isCenterType = false;

if ( x % 4 == 0 && y % 4 == 0 ) isCenterType = true;

if ( x % 4 == 2 && y % 4 == 2 ) isCenterType = true;

return isCenterType;

}

function drawHexagon(x,y){

drawHexagonAtPixel((*x + ),(*y + ));

}

for (y = 8; y <= 24; y += 2 ){

for(x = 4; x <= 12; x += 2){

if( isCenter(x,y) ) drawHexagon( x, y);

}

}