Generating triangular/hexagonal coordinates (xyz)

Answer 1

Not only is x+y+z=0, but the absolute values of x, y and z are equal to twice the radius of the ring. This should be sufficient to identify every hexagon on each successive ring:

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)
                document.body.innerHTML += (j + "," + k + "," + l + "<br />");
        document.body.innerHTML += ("<br />");
    }

Output: 0,0,0

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

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

-3,0,3 -3,1,2 -3,2,1 -3,3,0 -2,-1,3 -2,3,-1 -1,-2,3 -1,3,-2 0,-3,3 0,3,-3 1,-3,2 1,2,-3 2,-3,1 2,1,-3 3,-3,0 3,-2,-1 3,-1,-2 3,0,-3

Answer 2

Another possible solution, that runs in O(radius^2), unlike the O(radius^4) of tehMick's solution (at the expense of a lot of style) is this:

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

or written a little more concisely:

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

Its inspired by the fact the hexagons are actually on the exterior of hexagon themselves, so you can find the coordinates of 1 of its points, and then calculate the others by moving on its 6 edges.

Answer 3

Ok, after trying both the options I've settled on Ofri's solution as it is a tiny bit faster and made it easy to provide an initial offset value. My code now looks like this:

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

The "placeTile" method uses cloneNode to copy a predefined svg element and it takes approx 0.5ms per tile to execute which is more than good enough. A big thanks to tehMick and Ofri for your help!

JS