HOME
WARGAME RULES
MILITARY FORCE
BATTLEFIELD
PROJECTS

Drawing a Hexagon Map

Drawing a Hexagon Map

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.


 
 

   
   


javascript code to draw hexagon map

function isCenter(x,y) {
 var isCenterType = false;
  if ( x % 8 == 0 && y % 8 == 0 ) isCenterType = true;
  if ( x % 8 == 4 && y % 8 == 4 ) isCenterType = true;
 return isCenterType;
}
function drawHexagon(x,y){
 drawHexagonAtPixel((*x + ),(*y + ));
}
for (y = 16; y <= 48; y += 4 ){
 for(x = 8; x <= 24; x += 4){
  if( isCenter(x,y) ) drawHexagon( x, y);
 }
}