28

我正在尝试提出一个迭代函数，为六边形网格生成 xyz 坐标。使用起始十六进制位置（为简单起见，例如 0,0,0），我想计算每个连续的六边形“环”的坐标，如下所示：

到目前为止，我想出的只是这个（javascript中的示例）：

var radius = 3
var xyz = [0,0,0];

// for each ring
for (var i = 0; i < radius; i++) {
    var tpRing = i*6;
    var tpVect = tpRing/3;
    // for each vector of ring
    for (var j = 0; j < 3; j++) {
        // for each tile in vector
        for(var k = 0; k < tpVect; k++) {
            xyz[0] = ???;
            xyz[1] = ???;
            xyz[2] = ???;
            console.log(xyz);
        }
    }
}

我知道每个环包含比前一个多六个点，并且每个 120° 向量包含一个从中心开始的每一步的额外点。我也知道x + y + z = 0所有的瓷砖。但是如何生成遵循以下顺序的坐标列表？

    0, 0, 0

    0,-1, 1
    1,-1, 0
    1, 0,-1
    0, 1,-1
   -1, 1, 0
   -1, 0, 1

    0,-2, 2
    1,-2, 1
    2,-2, 0
    2,-1,-1
    2, 0,-2
    1, 1,-2
    0, 2,-2
   -1, 2,-1
   -2, 2, 0
   -2, 1, 1
   -2, 0, 2
   -1,-1, 2
4

5 回答 5

20

不仅是x + y + z = 0，而且 x、y 和 z 的绝对值等于环半径的两倍。这应该足以识别每个连续环上的每个六边形：

var radius = 4;
for(var i = 0; i < radius; i++)
{
    for(var j = -i; j <= i; j++)
    for(var k = -i; k <= i; k++)
    for(var l = -i; l <= i; l++)
        if(Math.abs(j) + Math.abs(k) + Math.abs(l) == i*2 && j + k + l == 0)
            console.log(j + "," + k + "," + l);
    console.log("");
}

于 2010-01-12T13:41:55.793 回答
13

与tehMick 的解决方案的O(radius 4 )不同（以牺牲大量风格为代价），在O(radius 2 )中运行的另一种可能的解决方案是：

radius = 4
for r in range(radius):
    print "radius %d" % r
    x = 0
    y = -r
    z = +r
    print x,y,z
    for i in range(r):
        x = x+1
        z = z-1
        print x,y,z
    for i in range(r):
        y = y+1
        z = z-1
        print x,y,z
    for i in range(r):
        x = x-1
        y = y+1
        print x,y,z
    for i in range(r):
        x = x-1
        z = z+1
        print x,y,z
    for i in range(r):
        y = y-1
        z = z+1
        print x,y,z
    for i in range(r-1):
        x = x+1
        y = y-1
        print x,y,z

或者写得更简洁一点：

radius = 4
deltas = [[1,0,-1],[0,1,-1],[-1,1,0],[-1,0,1],[0,-1,1],[1,-1,0]]
for r in range(radius):
    print "radius %d" % r
    x = 0
    y = -r
    z = +r
    print x,y,z
    for j in range(6):
        if j==5:
            num_of_hexas_in_edge = r-1
        else:
            num_of_hexas_in_edge = r
        for i in range(num_of_hexas_in_edge):
            x = x+deltas[j][0]
            y = y+deltas[j][1]
            z = z+deltas[j][2]            
            print x,y,z

它的灵感来自六边形实际上位于六边形本身的外部，因此您可以找到其中 1 个点的坐标，然后通过在其 6 个边上移动来计算其他点。

于 2010-01-12T14:31:28.560 回答
6

这是一个有趣的谜题。

O(radius 2 )但（希望）比Ofri 的解决方案更具风格。 我突然想到，可以生成坐标，就好像你正在使用方向（移动）向量绕着圆环“走”一样，并且转弯相当于围绕移动向量移动零。

与Eric 的解决方案相比，该版本还具有优势，因为它从不涉及无效坐标（Eric 拒绝它们，但这个版本甚至不需要测试它们）。

# enumerate coords in rings 1..n-1; this doesn't work for the origin
for ring in range(1,4):
    # start in the upper right corner ...
    (x,y,z) = (0,-ring,ring)
    # ... moving clockwise (south-east, or +x,-z)
    move = [1,0,-1]         

    # each ring has six more coordinates than the last
    for i in range(6*ring):
        # print first to get the starting hex for this ring
        print "%d/%d: (%d,%d,%d) " % (ring,i,x,y,z)
        # then move to the next hex
        (x,y,z) = map(sum, zip((x,y,z), move))

        # when a coordinate has a zero in it, we're in a corner of
        # the ring, so we need to turn right
        if 0 in (x,y,z):
            # left shift the zero through the move vector for a
            # right turn
            i = move.index(0)
            (move[i-1],move[i]) = (move[i],move[i-1])

    print # blank line between rings

为 python 的序列切片喝彩三声。

于 2011-05-13T21:31:27.053 回答
2 

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.textAlign = "center";

const radius = 20;
const altitude = Math.sqrt(3) * radius;
const total = 3;
for (let x = -total; x <= total; x++) {
    let y1 = Math.max(-total, -x-total);
    let y2 = Math.min(total, -x+total);
    for (let y = y1; y <= y2; y++) {
        let xx = x * altitude + Math.cos(1/3*Math.PI) * y * altitude;
        let yy = y * radius * 1.5;
        xx += canvas.width/2;
        yy += canvas.height/2;
        drawHex(xx, yy, radius);
        ctx.fillText(x+","+y, xx, yy);
    }
}

function drawHex(x, y, radius){
    ctx.beginPath();
    for(let a = 0; a < Math.PI*2; a+=Math.PI/3){
        let xx = Math.sin(a) * radius + x;
        let yy = Math.cos(a) * radius + y;
        if(a == 0) ctx.moveTo(xx, yy);
        else ctx.lineTo(xx, yy);
    }
    ctx.stroke();
}
<canvas id="canvas" width=250 height=250>

于 2020-07-20T01:39:06.177 回答
1

在尝试了这两个选项之后，我选择了 Ofri 的解决方案，因为它稍微快一点，并且可以很容易地提供初始偏移值。我的代码现在看起来像这样：

var xyz = [-2,2,0];
var radius = 16;
var deltas = [[1,0,-1],[0,1,-1],[-1,1,0],[-1,0,1],[0,-1,1],[1,-1,0]];
for(var i = 0; i < radius; i++) {
        var x = xyz[0];
        var y = xyz[1]-i;
        var z = xyz[2]+i;
        for(var j = 0; j < 6; j++) {
                for(var k = 0; k < i; k++) {
                        x = x+deltas[j][0]
                        y = y+deltas[j][1]
                        z = z+deltas[j][2]
                        placeTile([x,y,z]);
                }
        }
}

该placeTile方法用于cloneNode复制预定义的 SVG 元素，执行每个图块大约需要 0.5 毫秒，这已经足够了。非常感谢 tehMick 和 Ofri 的帮助！

于 2010-01-19T12:35:51.030 回答