hex-grid

tile hexagons in a grid layout


example

in the browser

view this demo on neocities

Given this html with a #grid div full of hex image badges:

`` html








way cool

` js
var grid = require('hex-grid');

var hexes = document.querySelectorAll('.hex');
var root = document.querySelector('#grid');

var g;
function scan () {
g = grid({ element: root, spacing: 4 }, hexes);
}

scan();
window.addEventListener('resize', scan);
window.addEventListener('load', scan);

var prev;
root.addEventListener('mousemove', function (ev) {
var h = g.lookup(ev.pageX, ev.pageY);
if (!h) return;
if (prev) prev.style.opacity = 0.5;
h.style.opacity = 1;
prev = h;
});
`

in node

You can use these algorithms directly in node too:

` js
var grid = require('hex-grid');

var res = grid({ width: 45*3+10 }, { width: 45, height: 60, n: 10 });
console.log(res.grid);
`

output:

`
[ { x: 0, y: 0 },
{ x: 45, y: 0 },
{ x: 90, y: 0 },
{ x: 22.5, y: 45 },
{ x: 67.5, y: 45 },
{ x: 0, y: 90 },
{ x: 45, y: 90 },
{ x: 90, y: 90 },
{ x: 22.5, y: 135 },
{ x: 67.5, y: 135 } ]
`

methods

` js
var grid = require('hex-grid')
`

var res = grid(opts, hexes)

Position an array of hexes absolutely.

Instead of an html element, each item in hexes can also be an object with
width and height properties. If the item has a style property, it will be
updated with the computed left and top positions.

The width of the container is given by opts.width or if opts is an html
element, the width will be computed.

You can set the spacing in pixels between hex elements with opts.spacing.

Instead of an array, hexes can be an object with a width, height, and n
property indicating the number of hex elements to generate.

In any case, the return value res is an array of objects with x and y
coordinates.

opts.offset.x/opts.offsetLeft and opts.offset.y/opts.offsetTop will
offset the lookup functions by an appropiate amount.

var hex = res.lookup(x, y)

Given a coordinate pair x, y, return the hex tile hex from the original
hexes array.

var i = res.lookupIndex(x, y)

Given a coordinate pair x, y, return the index i of the matching tile in the
hexes array.

properties

res.grid

An array of the top left bounding box coordinate as objects with x and y
properties for each hex tile.

This array uses the same indexes as the hexes array.

res.points

An array of arrays of [x,y] points comprising each hexagon.

This array uses the same indexes as the hexes array.

install

With npm do:

`
npm install hex-grid
``

To use this package in the browser, use browserify
or fetch a UMD build from browserify CDN.

license

MIT