在JavaScript数组中分散数字

Question

我有10+数字组成的数组。 它们代表圆上的坐标-以度为单位，即每个数字都在0到359.999999...之间359.999999...

我要解决的问题是，当我在项目上通过html5 canvas api将项目绘制在圆上时，有时它们会聚在一起，从而导致项目相互吸引。

因此，我想创建一种算法，将项目均匀地分散在其初始簇位置附近。 假设（我希望这是一个可配置的选项）两个项目之间的最小距离是5度。

因此，如果初始阵列[5, 41, 97, 101, 103, 158, 201, 214, 216, 217, 320]然后我想算法拿出类似[5,41，95，100，105 ，158，201，211，216，221，320]（以粗体显示的项目被分散围绕它们的最初的“重心”那些无论是否是2个或更多个项目）。

同样必要的是，该算法将0和359识别为相距仅1个单位（度），并且也将这些项均匀地分布在周围。

有没有人创造过这样的算法或有一个好主意如何实现它？ 甚至有些一般性的想法也是值得欢迎的。 我相信我可以通过反复试验来实现这一目标，但是如果您愿意，我想听听一些有根据的猜测。

Answer 1

var val = [5, 41, 96, 101, 103, 158, 201, 214, 216, 217, 320, 1201, 1213, 1214, 1216, 1217, 1320],
    delta = Array.apply(null, { length: val.length }).map(function () { return 0 }),
    result,
    threshold = 5,
    converged = false;

document.write('val: ' + val + '<br>');
while (!converged) {
    converged = true;
    delta = delta.map(function (d, i) {
        if (i < delta.length - 1 && delta.length > 1) {
            if (val[i + 1] + delta[i + 1] - val[i] - d < threshold) {
                converged = false;
                delta[i + 1] += 1;
                return d - 1;
            }
        }
        return d;
    });
    document.write('delta: ' + delta + '<br>');
}

result = val.map(function (v, i) {
    return v + delta[i];
});
document.write('result: ' + result + '<br>');

// try to minimise difference
converged = false;
while (!converged) {
    converged = true;
    delta = delta.map(function (d, i) {
        if (i < delta.length - 2) {
            var space = val[i + 1] + delta[i + 1] - val[i] - d;
            if (d < 0 && space > threshold) {
                converged = false;
                return d + space - threshold;
            }
        }
        return d;
    });
    document.write('delta min: ' + delta + '<br>');
}

result = val.map(function (v, i) {
    return v + delta[i];
});
document.write('result: ' + result + '<br>');

代码将两个过于紧密的appapp推到了一起，每侧各有一个。 这是对称的，有时会导致推得太远的值，可以对其进行校正。

[未实现！]如果值的空间不足，则[0..360 [或多于72个元素，相差5，则while循环可能不会结束。

编辑：最小化块应迭代，直到所有值都正确。

Answer 2

要获得“均匀随机”分布，请说您有N个数字-将圆分成N个分段，然后将每个数字随机放入其分段中。

这样，您甚至不需要关心0和359仅相隔1个单位。

这是一个主意：

 var numbers = 5; var segment = 360/numbers; var result = []; for(var i = 0; i < numbers; i++) { result.push(Math.round((Math.random() + i) * segment)); } alert(result.join(',')); 

---

这是一个更加图形化的想法（想象一下将矩形折叠成圆柱体）：

 var numbers = 5; var segment = 360 / numbers; var minimum = 15; var div = document.getElementById('r'); function build() { var result = []; div.innerHTML = ''; for (var i = 0; i < numbers; i++) { var current = 0; while(current < minimum + (result[result.length - 1] || 0)) { current = Math.round((Math.random() + i) * segment); } result.push(current); var d = document.createElement('div'); d.className = 'segment'; d.style.left = (result[result.length - 2] || 0) + 'px'; d.style.width = (current - (result[result.length - 2] || 0) - 1) + 'px'; d.textContent = current; div.appendChild(d); } console.log(result.join(',')); } build(); 

 .segment { height: 100%; position: absolute; font-size: 12px; text-align: right; border-right: 1px solid black; } #r { height: 100%; width: 360px; background: #eee; } html, body { height: 100%; margin: 0; padding: 0; } button { position: absolute; right: 4px; margin: 0; } 

 <button onclick="build()">Rebuild</button> <div id="r"></div> 

Answer 3

精美打印图形的算法使用弹簧系统在顶点重叠时将顶点彼此移开。 在这里，您只处理一个维度，并且可能会迭代地调整附近的角度，直到所有节点至少相隔5度为止。

您可以通过创建辅助工作数组来处理循环值，以使元素在最大间隙之后重新排序。 这使您可以将数组视为线性值，而不必关心换行：

[2, 7, 320, 359] -> [-40, -1, 2, 7]

下面的代码执行此操作。 但是，节点的移动方式很粗糙：代码仅查看太近的一对节点。 可以通过查看两个或多个彼此之间过于靠近的节点的群集来改进代码：

function adjust(arr, dist)
{
    var offset = 0;
    var max = 360.0 + arr[0] - arr[arr.length - 1];
    var min = max;
    var mix = 0;    // index of first elment after largest gap

    // exit early if array can't be adjusted
    if (dist * arr.length > 240.0) return arr;

    // find largest gap
    for (var i = 1; i < arr.length; i++) {
        var d = arr[i] - arr[i - 1];

        if (d > max) {
            max = d;
            mix = i;
        }

        if (d < min) min = d;
    }

    var x = [];     // working array
    var adj = [];   // final, adjusted array

    // create working array on greatest gap
    for (var i = 0; i < arr.length; i++) {
        if (i + mix < arr.length) {
            x.push(arr[i + mix] - 360);
        } else {
            x.push(arr[i + mix - arr.length]);
        }
    }

    // iteratively adjust angles
    while (min < dist) {
        min = dist;

        for (var i = 1; i < x.length; i++) {
            var d = x[i] - x[i - 1];

            if (d < dist) {
                if (d < min) min = d;

                x[i - 1] -= (dist - d) / 2;
                x[i] += (dist - d) / 2;
            }
        }
    }        

    // create final array
    for (var i = 0; i < x.length; i++) {
        if (i - mix < 0) {
            adj.push(x[i - mix + x.length]);
        } else {
            adj.push(x[i - mix] + 360);
        }
    }

    return adj;
}