Skip to content

Instantly share code, notes, and snippets.

@FilBot3

FilBot3/hexagons.js

Forked from zackthehuman/hexagons.js
Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save FilBot3/181fd1d6fdac0ab3eddd to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save FilBot3/181fd1d6fdac0ab3eddd to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @zackthehuman zackthehuman revised this gist Feb 20, 2012. 1 changed file with 3 additions and 5 deletions.
    8 changes: 3 additions & 5 deletions hexagons.js
    View file
    Original file line number Diff line number Diff line change
    @@ -32,8 +32,8 @@
    screenX,
    screenY;

    x = eventInfo.offsetX;
    y = eventInfo.offsetY;
    x = eventInfo.offsetX || eventInfo.layerX;
    y = eventInfo.offsetY || eventInfo.layerY;


    hexY = Math.floor(y / (hexHeight + sideLength));
    @@ -42,9 +42,7 @@
    screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
    screenY = hexY * (hexHeight + sideLength);

    // Clear canvas
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBoard(ctx, boardWidth, boardHeight);

  2. @zackthehuman zackthehuman revised this gist Feb 20, 2012. 2 changed files with 111 additions and 101 deletions.
    116 changes: 15 additions & 101 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,104 +1,18 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Hexagonal Map</title>
    <style type="text/css">
    canvas { border:0; }
    </style>
    </head>
    <body>
    <canvas id="hexmap" width="624" height="624"></canvas>
    <script type="text/javascript">
    (function(){
    var canvas = document.getElementById('hexmap');

    var hexHeight,
    hexRadius,
    hexRectangleHeight,
    hexRectangleWidth,
    hexagonAngle = 0.523598776, // 30 degrees in radians
    sideLength = 36;

    hexHeight = Math.sin(hexagonAngle) * sideLength;
    hexRadius = Math.cos(hexagonAngle) * sideLength;
    hexRectangleHeight = sideLength + 2 * hexHeight;
    hexRectangleWidth = 2 * hexRadius;

    if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = "#000000";
    ctx.strokeStyle = "#CCCCCC";
    ctx.lineWidth = 1;

    drawBoard(ctx);

    canvas.addEventListener("mousemove", function(eventInfo) {
    var x,
    y,
    hexX,
    hexY,
    screenX,
    screenY;

    x = eventInfo.offsetX;
    y = eventInfo.offsetY;


    hexY = Math.floor(y / (hexHeight + sideLength));
    hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);

    screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
    screenY = hexY * (hexHeight + sideLength);

    // Clear canvas
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 640, 640);

    drawBoard(ctx);

    ctx.fillStyle = "#000000";
    drawHexagon(ctx, screenX, screenY, true);
    });
    }

    function drawBoard(canvasContext) {
    var i,
    j;

    // Draw board
    for(i = 0; i < 10; ++i) {
    for(j = 0; j < 11; ++j) {
    drawHexagon(
    ctx,
    i * hexRectangleWidth + ((j % 2) * hexRadius),
    j * (sideLength + hexHeight),
    false
    );
    }
    }
    }

    function drawHexagon(canvasContext, x, y, fill) {
    var fill = fill || false;

    canvasContext.beginPath();
    canvasContext.moveTo(x + hexRadius, y);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight + sideLength);
    canvasContext.lineTo(x + hexRadius, y + hexRectangleHeight);
    canvasContext.lineTo(x, y + sideLength + hexHeight);
    canvasContext.lineTo(x, y + hexHeight);
    canvasContext.closePath();

    if(fill) {
    canvasContext.fill();
    } else {
    canvasContext.stroke();
    }
    }

    })();
    </script>
    </body>
    <head>
    <meta charset="utf-8" />
    <title>Canvas Hexagonal Map</title>
    <style type="text/css">
    canvas {
    border:0;
    display:block;
    margin:0 auto;
    }
    </style>
    </head>
    <body>
    <canvas id="hexmap" width="660" height="624"></canvas>
    <script src="hexagons.js"></script>
    </body>
    </html>
    96 changes: 96 additions & 0 deletions hexagons.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,96 @@
    (function(){
    var canvas = document.getElementById('hexmap');

    var hexHeight,
    hexRadius,
    hexRectangleHeight,
    hexRectangleWidth,
    hexagonAngle = 0.523598776, // 30 degrees in radians
    sideLength = 36,
    boardWidth = 10,
    boardHeight = 10;

    hexHeight = Math.sin(hexagonAngle) * sideLength;
    hexRadius = Math.cos(hexagonAngle) * sideLength;
    hexRectangleHeight = sideLength + 2 * hexHeight;
    hexRectangleWidth = 2 * hexRadius;

    if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = "#000000";
    ctx.strokeStyle = "#CCCCCC";
    ctx.lineWidth = 1;

    drawBoard(ctx, boardWidth, boardHeight);

    canvas.addEventListener("mousemove", function(eventInfo) {
    var x,
    y,
    hexX,
    hexY,
    screenX,
    screenY;

    x = eventInfo.offsetX;
    y = eventInfo.offsetY;


    hexY = Math.floor(y / (hexHeight + sideLength));
    hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);

    screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
    screenY = hexY * (hexHeight + sideLength);

    // Clear canvas
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    drawBoard(ctx, boardWidth, boardHeight);

    // Check if the mouse's coords are on the board
    if(hexX >= 0 && hexX < boardWidth) {
    if(hexY >= 0 && hexY < boardHeight) {
    ctx.fillStyle = "#000000";
    drawHexagon(ctx, screenX, screenY, true);
    }
    }
    });
    }

    function drawBoard(canvasContext, width, height) {
    var i,
    j;

    for(i = 0; i < width; ++i) {
    for(j = 0; j < height; ++j) {
    drawHexagon(
    ctx,
    i * hexRectangleWidth + ((j % 2) * hexRadius),
    j * (sideLength + hexHeight),
    false
    );
    }
    }
    }

    function drawHexagon(canvasContext, x, y, fill) {
    var fill = fill || false;

    canvasContext.beginPath();
    canvasContext.moveTo(x + hexRadius, y);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight + sideLength);
    canvasContext.lineTo(x + hexRadius, y + hexRectangleHeight);
    canvasContext.lineTo(x, y + sideLength + hexHeight);
    canvasContext.lineTo(x, y + hexHeight);
    canvasContext.closePath();

    if(fill) {
    canvasContext.fill();
    } else {
    canvasContext.stroke();
    }
    }

    })();
  3. @zackthehuman zackthehuman revised this gist Feb 20, 2012. 1 changed file with 24 additions and 17 deletions.
    41 changes: 24 additions & 17 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -28,16 +28,18 @@
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = "#000000";
    ctx.strokeStyle = "#CCCCCC";
    ctx.lineWidth = 1;

    drawBoard(ctx);

    canvas.addEventListener("mousemove", function(eventInfo) {
    var x,
    y,
    hexX,
    hexY,
    screenX,
    screenY,
    i,
    j;
    screenY;

    x = eventInfo.offsetX;
    y = eventInfo.offsetY;
    @@ -52,26 +54,31 @@
    // Clear canvas
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 640, 640);
    ctx.fillStyle = "#CCCCCC";

    // Draw board
    for(i = 0; i < 10; ++i) {
    for(j = 0; j < 11; ++j) {
    drawHexagon(
    ctx,
    i * hexRectangleWidth + ((j % 2) * hexRadius),
    j * (sideLength + hexHeight),
    false
    );
    }
    }

    ctx.fillStyle = "#000000";
    drawBoard(ctx);

    ctx.fillStyle = "#000000";
    drawHexagon(ctx, screenX, screenY, true);
    });
    }

    function drawBoard(canvasContext) {
    var i,
    j;

    // Draw board
    for(i = 0; i < 10; ++i) {
    for(j = 0; j < 11; ++j) {
    drawHexagon(
    ctx,
    i * hexRectangleWidth + ((j % 2) * hexRadius),
    j * (sideLength + hexHeight),
    false
    );
    }
    }
    }

    function drawHexagon(canvasContext, x, y, fill) {
    var fill = fill || false;

  4. @zackthehuman zackthehuman created this gist Feb 20, 2012.
    97 changes: 97 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,97 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Canvas Hexagonal Map</title>
    <style type="text/css">
    canvas { border:0; }
    </style>
    </head>
    <body>
    <canvas id="hexmap" width="624" height="624"></canvas>
    <script type="text/javascript">
    (function(){
    var canvas = document.getElementById('hexmap');

    var hexHeight,
    hexRadius,
    hexRectangleHeight,
    hexRectangleWidth,
    hexagonAngle = 0.523598776, // 30 degrees in radians
    sideLength = 36;

    hexHeight = Math.sin(hexagonAngle) * sideLength;
    hexRadius = Math.cos(hexagonAngle) * sideLength;
    hexRectangleHeight = sideLength + 2 * hexHeight;
    hexRectangleWidth = 2 * hexRadius;

    if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.fillStyle = "#000000";

    canvas.addEventListener("mousemove", function(eventInfo) {
    var x,
    y,
    hexX,
    hexY,
    screenX,
    screenY,
    i,
    j;

    x = eventInfo.offsetX;
    y = eventInfo.offsetY;


    hexY = Math.floor(y / (hexHeight + sideLength));
    hexX = Math.floor((x - (hexY % 2) * hexRadius) / hexRectangleWidth);

    screenX = hexX * hexRectangleWidth + ((hexY % 2) * hexRadius);
    screenY = hexY * (hexHeight + sideLength);

    // Clear canvas
    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 640, 640);
    ctx.fillStyle = "#CCCCCC";

    // Draw board
    for(i = 0; i < 10; ++i) {
    for(j = 0; j < 11; ++j) {
    drawHexagon(
    ctx,
    i * hexRectangleWidth + ((j % 2) * hexRadius),
    j * (sideLength + hexHeight),
    false
    );
    }
    }

    ctx.fillStyle = "#000000";

    drawHexagon(ctx, screenX, screenY, true);
    });
    }

    function drawHexagon(canvasContext, x, y, fill) {
    var fill = fill || false;

    canvasContext.beginPath();
    canvasContext.moveTo(x + hexRadius, y);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight + sideLength);
    canvasContext.lineTo(x + hexRadius, y + hexRectangleHeight);
    canvasContext.lineTo(x, y + sideLength + hexHeight);
    canvasContext.lineTo(x, y + hexHeight);
    canvasContext.closePath();

    if(fill) {
    canvasContext.fill();
    } else {
    canvasContext.stroke();
    }
    }

    })();
    </script>
    </body>
    </html>