Вычислить 6 вершин случайно сгенерированного шестиугольника

Мне нужна помощь в написании уравнения.

Я хочу генерировать шестиугольники случайных размеров, которые все еще "идеальны"(пропорциональны).

Крайняя левая вершина будет расположена в точке (0,0). Я хочу думать о других вершинах относительно этой самой левой вершины. "Так высоко от левой вершины, так много справа от нее, так много вниз от нее..." Причина, по которой это не так просто, в том, что мне нужно, чтобы она была пропорциональной.

На данный момент вот как выглядит один из моих статически определенных шестиугольников:

        // 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)
        // };

Я делаю это в Javascript, но формула действительно то, что я после. Спасибо за вашу помощь.



Решение

Вот что моя функция в итоге выглядела как BTW:

Если вы хотите увидеть, что я делал, вот оно: 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(); 
    }
};
Источник

2 ответа

Решение

Шестиугольник является правильным многоугольником и обладает следующими свойствами:

  • имеет 6 вершин,
  • каждая вершина находится на одинаковом расстоянии от центральной точки (расстояние называется ее радиусом),

Вот пример функции, которая будет рисовать не повернутый шестиугольник с указанным радиусом и с самой левой вершиной в указанной точке:

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>

Источник

Затем просто масштабировать точки

xi=Xi*scale;
yi=Yi*scale;
  • где Xi,Yi - ваши исходные координаты точек
  • XI, YI это новые случайные точки шестиугольника
  • масштаб является случайным фактором> 0,0
  • ваш х0, у0 в (0.0,0.0)
  • после масштабирования это не изменяется, поэтому вам не нужен перевод
Источник
Другие вопросы по тегам