﻿ Battle Analysis

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);  } } ```