为什么这个random()分布看起来不对称？

Question

编辑:这是使用谷歌Chrome 36

我正在弄乱html5画布,生成随机分布在立方体内的点并将其投影到2D画布上.令人惊讶的是,结果看起来并不十分对称,我怀疑Javascript的Math.random()让我感到沮丧.

谁能告诉我为什么会这样？有可能让它看起来实际上是随机的,而不是让它变慢吗？

var ctx = canvas.getContext('2d');

for (var i = 0; i < 10000000; i++) {
    var x = Math.random()*2-1, y = Math.random()*2-1, z = 2+Math.random()*2-1;
    x = (.5 + .5*x/z) * canvas.width;
    y = (.5 + .5*y/z) * canvas.height;
    ctx.fillRect(Math.floor(x), Math.floor(y), 1, 1);
}

http://jsfiddle.net/y10tvj26/(加载需要一段时间)

Answer 1

Chrome 有一个已记录的问题，即对 Math.random() 的后续调用是相关的。在您的算法中，相关值往往会落在画布上的一条线上。对 Math.random() 的额外调用会破坏这种相关性。我还没有看到其他浏览器受到影响的报告。

只需Math.random()在每次通话时多拨打一次，您就会得到您想要的。

var ctx = canvas.getContext('2d');

function r() {
    Math.random();
    return Math.random();
}
for (var i=0; i<10000000; i++) {
    var x = r()*2-1, y = r()*2-1, z = 2+r()*2-1;
    x = (.5 + .5*(x/z)) * canvas.width;
    y = (.5 + .5*(y/z)) * canvas.height;
    ctx.fillRect(x, y, 1, 1);
}

更新于： http: //jsfiddle.net/y10tvj26/5/