The key to finding when a mouse moves into a hexagon is to divide and conquer.

First step is to find one of 4 specific areas around the hexagon to analyze.

  1. upper left and lower right hexsides
  2. upper right and lower left hexsides
  3. upper and lower hexsides
  4. hexagon centers

Second Step: is to calculate which hexagon of 2 possibles the mouse is in.


Start with hexagon map. First Step: Find the rectangle to analyze. Second Step: Determine the hexagon.

In this example, the green rectangle is selected and has a grid coordinate of (9,15) see hexgon grid

There needs to be a way of checking which side of the hexside line the mouse is in.

This means calculating crossing over a 30° line.

That can be done once we find the upper left corner (138,120). (where 2 red lines meet)
 
Then calculate the x,y distance from that corner to the mouse point (147,130)
  Δx = 147-138 => 9, Δy = 130-120 => 10.

The mouse tangent = (opposite/adjacent) = (9/10) = where the red dot is  => 0.90

The hexside tangent (60°) = (opposite/adjacent) = (1/4 hexagon width / 1/2 hexagon height) the black line   => 12/20 => 0.60

  note: actual tangent(60°) = 0.577350269

If mouse tangent > hexside tangent, the mouse is in the upper right hexagon with a coordinate adjusted by (+1,-1) = (10,14)

else the mouse is in the lower left hexagon with a coordinate adjusted by (-1,+1) = (8,16)


First Step - Find the rectangle to analyze. Calculate its coordinate on a hexagon grid.

Divide the x coordinate by the column width to get a column number. Divide the y coordinate by 1/2 hexagon height to get a row number.

       

 

horizontal spacing between hexagon centers
var horizontalSpacing = 3 * this.hexagonWidth / 4;
add distance from (0,0) center to left edge of hexagon(0,0) to start column count
var columnOffset = this.hexagonWidth / 2;

var column = Math.floor((this.gridPixel.x + columnOffset) / horizontalSpacing);
var row = Math.floor(this.gridPixel.y / halfHexagonHeight);




 


Hexsides case: Compare the remainder of the x coordinate division to see if it is less than the hexside width.
This means the mouse is in a left or right hexside. Give it a grid coordinate (2*col-1),(2*row+1)

   

 

These hexside gridPoint coordinates are a cartesian coordinate that can be used to calculate the hexside tangent 60° check rectangle

LeftEdgeOfRectangle = gridPoint.x * halfHorizontalSpacing;

TopEdgeOfRectangle = gridPoint.y * oneFourthHexagonHeight;

x for tangent check = mouse.x - LeftEdgeOfRectangle
y for tangent check = mouse.y - TopEdgeOfRectangle





Hexgond centers case: Shift the row calculation by 1/4 hexagon height

Again, compare the remainder of the x coordinate division to see if it is greater than the hexside width.
This means the mouse is in a upper or lower hexside or in the hexagon center. Give it a grid coordinate (2*col),(2*row)

 


This coordinate is called the Grid Point and is used in movement and line of sight calculations

First Step is done


Second Step - Calculate the Hexagon Point

There are 4 cases to check


1. upper left or lower right case    (x mod 4) is 3 and (y mod 4) is 3 or (x mod 4) is 1 and (y mod 4) is 1

compare the x,y remainders from above with the hexagon width and height
if the tangent of mouse ( x / y) is less than tangent of hexagon ( 1/4 width / halfheight)
the mouse is in the hexagon to the lower right, so hexagon point = grid point x + 1, grid point y + 1
(3,7) → (4,8)

compare the x,y remainders from above with the hexagon width and height
if the tangent of mouse ( x / y) is greater than tangent of hexagon ( 1/4 width / halfheight)
the mouse is in the hexagon to the upper left, so hexagon point = grid point x - 1, grid point y - 1
(5,9) → (4,8)

 


2. upper right or lower left case    (x mod 4) is 1 and (y mod 4) is 3 or (x mod 4) is 3 and (y mod 4) is 1

compare the x,y remainders from above with the hexagon width and height
if the tangent of mouse ( x / y) is less than tangent of hexagon ( 1/4 width / halfheight)
the mouse is in the hexagon to the lower left, so hexagon point = grid point x - 1, grid point y + 1
(5,7) → (4,8)

compare the x,y remainders from above with the hexagon width and height
if the tangent of mouse ( x / y) is greater than tangent of hexagon ( 1/4 width / halfheight)
the mouse is in the hexagon to the upper right, so hexagon point = grid point x + 1, grid point y - 1
(3,9) → (4,8)

 


3. upper or lower case    (x mod 4) is 0 and (y mod 4) is 2 or (x mod 4) is 2 and (y mod 4) is 0

compare the y remainder from above with the hexagon 1/4 height
if the y is greater than 1/4 hexagon height
the mouse is in the hexagon to the lower, so hexagon point = grid point x, grid point y + 2
(4,6) → (4,8)

compare the y remainder from above with the hexagon 1/4 height
if the y is less than y 1/4 hexagon height
the mouse is in the hexagon to the upper, so hexagon point = grid point x, grid point y - 2
(4,10) → (4,8)


4. hexagon center

The mouse is definitely in hexagon, so no adjustment is needed.
(4,8) → (4,8)


Second Step is done



Hexagons are identified by a cartesian coordinate.

The coordinate can be used for movement, line of sight, and zones of control calcualtions.

The wargame map hexagon numbers from board wargames are really a hexagon naming convention.

Hexagon names are calculated using the HexagonNameCalculator.