Tracing the edge of a hexagon pixel by pixel

0
votes

To create an animation in Javascript using an HTML5 canvas I first need to be able to describe a point by point path around a hexagonal shape. I already have the x/y coordinate of each vertex. I don't know which direction I will be travelling around the edge so any solution should be able to work in either direction.

The radius, and therefore each side, of the hexagon is 20 pixels. I need to produce a set of 20 points for each side that maps the x and y position of each pixel in that path. This is obviously easy for straight lines where each pixel increments 1 for each step and the other axis remains static. With the angled sides I am failing get the trigonometry required to plot the points.

I'm fairly positive this is trivial but would appreciate some help getting clear in my mind.

2
javascriptanimationhtml5-canvastrigonometryhexagonal-tiles
Might have better luck asking for the formula on the math site :) – Chris Baker
Yeah agreed, you never know, someone might like to bust out some javascript magic for some easy rep though. – voncox
Show us what you've tried... – Shmiddty
Is the hexagon regular? – Shmiddty

2 Answers

0
votes

You might consider Bresenhams line algorithm. It is a standard goto and easy to implement.... http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

function plotLine(p1, p2){
    var dx = p2.x - p1.x;
    var dy = p2.y - p2.y;
    var err = 0.0;
    var derr = Math.abs( dy / dx ); 

    var y = p1.y;
    for(var x = p1.x; x < p2.x; x++){
        drawPoint(new Point(x,y));
        err = err + derr;
        if(err >= 0.5 ) {
           y++;
           err = err - 1.0;
        }
    }
}

Although this might be a bad approach since it wont be anti aliased. The are line drawing algorithms that implement aliasing (Google it...) or the best be is to use the Canvases built in line drawing api and just overlay successive lines that get longer and longer.

0
votes

This code will draw equidistant dots from point x1/y1 to point x2/y2.

Works in reverse also (x2/y2 to x1/y1).

Since you have all the x/y for each vertex, you should be good to go!

Here is the code and a Fiddle: http://jsfiddle.net/m1erickson/pW4De/

    <!doctype html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

    <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
        p{font-size:24px;}
    </style>

    <script>
        $(function(){

            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");

            DrawDottedLine(300,400,7,7,7,20,"green");

            function DrawDottedLine(x1,y1,x2,y2,dotRadius,dotCount,dotColor){
              var dx=x2-x1;
              var dy=y2-y1;
              var spaceX=dx/(dotCount-1);
              var spaceY=dy/(dotCount-1);
              var newX=x1;
              var newY=y1;
              for (var i=0;i<dotCount;i++){
                      drawDot(newX,newY,dotRadius,dotColor);
                      newX+=spaceX;
                      newY+=spaceY;              
               }
               drawDot(x1,y1,3,"red");
               drawDot(x2,y2,3,"red");
            }
            function drawDot(x,y,dotRadius,dotColor){
                ctx.beginPath();
                ctx.arc(x,y, dotRadius, 0, 2 * Math.PI, false);
                ctx.fillStyle = dotColor;
                ctx.fill();              
            }           

        }); // end $(function(){});
    </script>

    </head>

    <body>

    <canvas id="canvas" width=307 height=407></canvas>

    </body>
    </html>