javascript - 如何绘制无限六 Angular 螺旋

Question

我正在尝试创建一个结构，如下面的屏幕截图所示。有没有办法在 JavaScript 中为此构建一个算法，以按时间顺序获取每个红点的 X 和 Y 坐标，以根据特定数量生成无限螺旋？

Screenshot of how it should look and work

这段代码为我生成了一个正六边形:

function hexagon(centerX, centerY) {
    var ctx = canvas.getContext('2d');
    var x = centerX + Math.cos(Math.PI * 2 / 6) * 50;
    var y = centerY + Math.sin(Math.PI * 2 / 6) * 50;

    ctx.beginPath();
    ctx.moveTo(x, y);

    for (var i = 1; i < 7; i++) {
        x = centerX + Math.cos(Math.PI * 2 / 6 * i) * 50;
        y = centerY + Math.sin(Math.PI * 2 / 6 * i) * 50;

        ctx.lineTo(x, y);
    }

    ctx.closePath();
    ctx.stroke();
}

这是到目前为止的集群功能:

function cluster(centerX, centerY, count) {
    var ctx = canvas.getContext('2d');

    for (var i = 0; i < count; i++) {
        if (i == 0) {
            var x = centerX;
            var y = centerY;
        } else {
            var x = centerX + Math.cos(-Math.PI / 2) * (100 * (Math.sqrt(3) / 2));
            var y = centerY + Math.sin(-Math.PI / 2) * (100 * (Math.sqrt(3) / 2));
        }

        hexagon(x, y);
    }
}

谢谢!

Answer 1

您的集群函数可能是这样的:

function cluster(centerX, centerY, count) {
    var x = centerX,
        y = centerY,
        angle = Math.PI / 3,
        dist = Math.sin(angle) * 100,
        i = 1,
        side = 0;

    hexagon(x, y);
    count--;
    while (count > 0) {
        for (var t = 0; t < Math.floor((side+4)/6)+(side%6==0) && count; t++) {
            y = y - dist * Math.cos(side * angle);
            x = x - dist * Math.sin(side * angle);
            hexagon(x, y);
            count--;
        }
        side++;
    }
}

function hexagon(centerX, centerY) {
    var ctx = canvas.getContext('2d');
    var x = centerX + Math.cos(Math.PI * 2 / 6) * 50;
    var y = centerY + Math.sin(Math.PI * 2 / 6) * 50;

    ctx.beginPath();
    ctx.moveTo(x, y);

    for (var i = 1; i < 7; i++) {
        x = centerX + Math.cos(Math.PI * 2 / 6 * i) * 50;
        y = centerY + Math.sin(Math.PI * 2 / 6 * i) * 50;

        ctx.lineTo(x, y);
    }

    ctx.closePath();
    ctx.stroke();
}

function cluster(centerX, centerY, count) {
    var x = centerX,
        y = centerY,
        angle = Math.PI / 3,
        dist = Math.sin(angle) * 100,
        i = 1,
        side = 0;

    hexagon(x, y);
    count--;
    while (count > 0) {
        for (var t = 0; t < Math.floor((side+4)/6)+(side%6==0) && count; t++) {
            y = y - dist * Math.cos(side * angle);
            x = x - dist * Math.sin(side * angle);
            hexagon(x, y);
            count--;
        }
        side++;
    }
}

cluster(200,230,9);

<canvas id="canvas" width="400" height="400"></canvas>