libhex v0.2.0

I’ve just uploaded a new version of libhex, my library for manipulating and drawing hexagonal grids. It’s available in C++, Python and JavaScript.

[docs, source, examples: C++, Python, SVG]

I’ve redesigned the SVG output interface. The crazy templates are gone. It’s now just a set of simple functions. SVG output is no longer flipped either, so it’s easier to add text.

I’ve also added routing algorithms: find best path, find movement horizon given a movement budget. Using the library for a game, you need to know where a piece can move. The hex::move namespace defines a “Topography” class which enables you to model movement costs within the grid. Then it will calculate the best path from one hex to another, or tell you how far a piece can get with a given movement budget.

As always, please, please try out libhex. Let me know how you get on.

Comment · Comments Feed · TrackBack

  1. Kristian Mandrup said,

    5 February, 2009 @ 11:43

    Hi there,

    I have been searching for a Hex grid library myself as I’m considering creating a Hex map editor. I was thinking of going for the Canvas 2D instead of SVG. Canvas2D (part of HTML 5) supports scaling, rotation etc and is already supported by most browsers, even IE (with a plugin).

    I looked into your hex.js file but couldn’t quite make sense of it. Needs some documentatin or an example that uses it.

    I need some drawing logic that builds on top of our library, to draw a grid of different sized hexagons. Then enable mouseclick detection and indicate the hexagon selected (or area of surrounding hexagons). Then enabling tile overlays of the grid map (in different layers!).

    Are your demos available? The england map looks great! Just been reading the Pro javascript techniques and stumbld upon the Canvas 2D. amazing what you can do with it. The Processing API port to Canvas 2D also looks very interesting!

    Hope to hear more from you soon ;)

    Kind regards, Kristian

  2. Kristian Mandrup said,

    5 February, 2009 @ 14:52

    I made this simple example using a canvas DOM element hexmap.

    The tiling should be refactored into a separate function amongst other things…

      function drawShape(){
        // get the canvas element using the DOM
        var canvas = document.getElementById('hexmap');
        // Make sure we don't execute when canvas isn't supported
        if (canvas.getContext){
          // use getContext to use the canvas for drawing
          var ctx = canvas.getContext('2d');
    var tileColors = ['lightgreen', 'blue', 'green'];
    var origin = {
        x: qsize, y:0
    var gsize = {
        sizex: 10, sizey:10
    var grid = {
        origin: origin,
        hexsize : size,
        size : gsize                         
    var myGrid = new HexGrid('myHexGrid');
    myGrid.draw(ctx, grid);
    var HexGrid = Class.create();
    Object.extend(hexGrid.prototype, {
        initialize: function(name) {
   = name;
        getName:    function() {
        draw:   function (ctx, grid) {
            var rows = grid.size.sizey;  
            for (j = 0; j < rows; j++) {
                drawHexRow(ctx, grid, j)    
            function drawHexRow(ctx, grid, row) {        
                drawRow(ctx, grid, row, true)   
                drawRow(ctx, grid, row, false)                      
                drawRow: function(ctx, grid, row, rowDraw, isEven) {      
                    var j = row;        
                    var size = grid.size        
                    var x = grid.origin.x;
                    var y = grid.origin.y;
                    var size = grid.hexsize
                    var hsize = size / 2;
                    var qsize = hsize /2;
                    var columns = grid.size.sizex;
                    for (i = 0; i < columns; i++) { 
                        var color = tileColors[Math.round(Math.random()*2)]
                        var tile = {
                            color: color
                        if (isEven) {
                            drawHex(ctx, x + hsize + 10 + (i*size + hsize * i), y + hsize + (j * size), size, tile);
                        } else {
                            drawHex(ctx, x + (i*size + hsize * i), y + (j * size), size, tile); 
                    drawHex: function (ctx, x, y, size, tile) {      
                          var twoseg = size / 2;
                          var oneseg = size / 4;
                          ctx.fillStyle = tile.color;
                          ctx.lineStyle = 'black';
                          ctx.moveTo(x, y);
                          ctx.lineTo(x + twoseg, y);          
                          ctx.lineTo(x + twoseg + oneseg, y + twoseg);
                          ctx.lineTo(x + twoseg, y + size);
                          ctx.lineTo(x, y + size);
                          ctx.lineTo(x - oneseg, y + twoseg);


  3. Kristian Mandrup said,

    22 May, 2009 @ 22:03

    Hi Alex,

    I have succesfully implemented a little html 5 canvas based grid editor. Unfortunately I can’t seem to get the mouse coordinate -> hex grid coordinate calculation right, no matter what I do :(

    Do you have any tips or examples I can look at?

    Kind regards,


  4. Ian said,

    26 February, 2010 @ 04:00

    Kristain: You might want to look at this Gamedev article:

Leave a Comment