tile hexagons in a grid layout
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example lookup Aug 24, 2014
test 100% coverage Aug 24, 2014
.gitignore Only append spacing on even rows. Nov 4, 2014
.travis.yml badge Aug 24, 2014
LICENSE package.json etc Aug 24, 2014
index.js Add initRow options Nov 4, 2014
package.json 2.0.2 Feb 2, 2015
readme.markdown updated docs Aug 24, 2014

readme.markdown

hex-grid

tile hexagons in a grid layout

build status

example

in the browser

view this demo on neocities

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

<!doctype html5>
<html>
  <head>
    <style>
      h1 { color: yellow; }
      body { background-color: rgb(88,20,94); }
      .hex { opacity: 0.5; }
    </style>
  </head>
  <body>
    <h1>way cool</h1>
    <div id="grid" style="position: relative">
      <img src="images/async.png" class="hex">
      <img src="images/binary.png" class="hex">
      <img src="images/browserify.png" class="hex">
      <img src="images/bug-clinic.png" class="hex">
      <img src="images/es6.png" class="hex">
      <img src="images/express.png" class="hex">
      <img src="images/functional.png" class="hex">
      <img src="images/git-it.png" class="hex">
      <img src="images/hapi.png" class="hex">
      <img src="images/koa.png" class="hex">
      <img src="images/learnyounode.png" class="hex">
      <img src="images/levelmeup.png" class="hex">
      <img src="images/lodash.png" class="hex">
      <img src="images/native.png" class="hex">
      <img src="images/nodebots.png" class="hex">
      <img src="images/nodeschool.png" class="hex">
      <img src="images/promise.png" class="hex">
      <img src="images/proto.png" class="hex">
      <img src="images/shader-school.png" class="hex">
      <img src="images/stream-adventure.png" class="hex">
      <img src="images/threejs.png" class="hex">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

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%.

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:

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

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