npm install hex-gridtile hexagons in a grid layout

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





















We can tile the hex images in a tessellating pattern and recompute the
tesselation when the window size changes.
When the mouse hovers over a hex tile, its opacity is set to 100%.
` 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;
});
`
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 } ]
` js`
var grid = require('hex-grid')
Position an array of hexes absolutely.
Instead of an html element, each item in hexes can also be an object withwidth and height properties. If the item has a style property, it will beleft
updated with the computed 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.
Given a coordinate pair x, y, return the hex tile hex from the originalhexes array.
Given a coordinate pair x, y, return the index i of the matching tile in thehexes array.
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.
An array of arrays of [x,y] points comprising each hexagon.
This array uses the same indexes as the hexes array.
With npm do:
```
npm install hex-grid
To use this package in the browser, use browserify
or fetch a UMD build from browserify CDN.
MIT