Calculate 6 vertices of randomly generated hexagon

Question

I need some help writing an equation.

I want to generate hexagons of random sizes that are still "perfect"(proportional).

The leftmost vertex will be positioned at (0,0). I want to think of the other vertices in relation to that leftmost vertex. "So much up from the left vertex, so much right from it, so much down from it..." The reason this is not so straight forward, is because I need it to be proportional.

At the moment, this is what one of my statically defined hexagons look like:

        // return {
        //  x1: (x+0), y1: (y+0),
        //  x2: (x+30), y2: (y-50),
        //  x3: (x+83), y3: (y-50),
        //  x4: (x+113), y4: y,
        //  x5: (x+83), y5: (y+50),
        //  x6: (x+30), y6: (y+50)
        // };

I'm doing this in JavaScript, but the formula is really what I'm after. Thanks for your help.

Solution

Here is what my function ended up looking like BTW:

If you want to see what I was doing this is it: http://www.sidequestsapps.com/projects/CaptoType/game.html

function drawRotatingHexagon(leftX, middleY, radius, ctx) {
    //console.log(x + ',' + y);
    var centerX = (Math.floor(leftX)+radius); // Calculate center x coord
    var centerY = middleY; // Calculate center y coord
    ctx.translate(centerX, middleY); // Center pivot inside hexagon     
    ctx.rotate(rotValue*(Math.PI/180)); // Rotate           
    ctx.translate(-centerX, -middleY); // Un-Translate  
    for (var c=1; c<=3;c++) { // How many layers to draw
        ctx.beginPath();
        ctx.moveTo (centerX+radius*Math.cos(0), centerY+radius*Math.sin(0));          
        for (var i=1; i<=6;i++) {
            ctx.lineTo(centerX+radius*Math.cos(i*Math.PI/3),
                       centerY+radius*Math.sin(i*Math.PI/3));
        }
        ctx.stroke(); 
    }
};

markE · Accepted Answer · 2014-09-20T16:58:09.373

A hexagon is a regular polygon and has these properties:

it has 6 vertices,
each vertex is exactly the same distance from the centerpoint (the distance is known as its radius),

Here's an example of a function that will draw a non-rotated hexagon with a specified radius and with its leftmost vertex at a specified point:

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

// draw your original hexagon
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(30,-50);
ctx.lineTo(83,-50);
ctx.lineTo(113,0);
ctx.lineTo(83,50);
ctx.lineTo(30,50);
ctx.closePath();
ctx.lineWidth=3;
ctx.stroke();

// same hexagon using drawHexagon()
ctx.strokeStyle='red';   
ctx.lineWidth=1;
drawHexagon(0,0,113/2);

function drawHexagon(leftX,middleY,radius){
  var centerX=leftX+radius;
  var centerY=middleY;    
  ctx.beginPath();
  ctx.moveTo (centerX+radius*Math.cos(0), centerY+radius*Math.sin(0));          
  for (var i=1; i<=6;i++) {
    ctx.lineTo(centerX+radius*Math.cos(i*2*Math.PI/6), centerY+radius*Math.sin(i*2*Math.PI/6));
  }
  ctx.closePath();
  ctx.stroke();
}

body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}

<h4>Fn() to draw hexagon with specified radius and left-midpoint.</h4>
<canvas id="canvas" width=300 height=300></canvas>

mark, this is spot on. Exactly what I was looking for + some code to back it up! This is pretty elegant too. You're the man! — Captainlonate, Sep 20 '14 at 17:20
@Captainlonate the sin,cos are constant may be it will be better to store those 12 values to some constants to avoid unnecessary sin,cos calls to improve speed — Spektre, Sep 23 '14 at 08:22
@Spektre. Good point. I pulled drawHexagon from my existing code and there was originally an option to rotate the hexagon (requiring changing cos & sin with each call). But for axis-aligned hexagons caching the cos & sin is a good improvement. :-) — markE, Sep 23 '14 at 16:14

score 0 · Answer 2 · answered Sep 20 '14 at 07:46

then just scale the points

xi=Xi*scale;
yi=Yi*scale;

where Xi,Yi are your original points coordinates
xi,yi is you new random hexagon points
scale is the random factor > 0.0
your x0,y0 is at (0.0,0.0)
after scale is this not changed so you do not need any translation

Calculate 6 vertices of randomly generated hexagon

2 Answers2

Linked