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.

- upper left and lower right hexsides
- upper right and lower left hexsides
- upper and lower hexsides
- 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

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

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

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.