Point → hex

Translating a point (e.g. screen pixel) to the corresponding hex in a grid is possible with Grid's pointToHex() method. It also works with irregularly shaped hexes.

pointToHex() accepts a second argument to indicate what to do when a point corresponds to a hex outside the grid. By default it creates the hex and returns that.

typescript

import { defineHex, Grid, rectangle } from 'honeycomb-grid'

const WideHex = defineHex({
  dimensions: { xRadius: 50, yRadius: 30 }, // wide hexes
})
const grid = new Grid(WideHex, rectangle({ width: 5, height: 5 }))

document.addEventListener('click', ({ offsetX, offsetY }) => {
  const hex = grid.pointToHex(
    { x: offsetX, y: offsetY },
    { allowOutside: false }
  )
  console.log(hex)
})

Click somewhere below

Allow outside

Point → hex ​

Point → hex