生成线的非均匀分布

Question

有关我遇到的问题的演示，请参阅 [小提琴] [已删除] 。

基本上，我正在生成一条触及正方形#block墙的线。问题是这些线似乎没有像我期望的那样分布（在添加足够的线之后）。这是我期望的输出：


这是我得到的输出：

您可以点击 add 100 按钮重新创建。我似乎无法弄清楚为什么在底部存在高浓度的线，其中线的最大长度是，但是在最小长度附近的这种低浓度。具体来说，我是如何生成线条的长度，其中min是正方形宽度的一半，最大值是从中心到角落的距离（用毕达哥拉斯定理计算）：

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

问题的症结在于我希望得到像我期望的输出，线条完全填满这个45度的部分，而不是围绕底部。

完整代码：

HTML

<div id="block"></div>
<button id="add">add</button>
<button id="add100">add 100</button>
<button id="clear">clear</button>
<label id="count">0 lines</label>

---

CSS

#block {
    width:200px;
    height:200px;
    border:1px solid black;
}
.line {
    position:absolute;
    width:1px;
    -webkit-transform-origin: 0% 0%;
    background-color:black;
}

---

JS

$('#add').click(function () {
    //generate a div with a random id
    var lineId = Math.floor(Math.random() * 32768);
    $('#block').append('<div class="line" id="line' + lineId + '"></div>');
    var curLine = $('#line' + lineId);

    $('#count').html($('#block > div').size() + " lines");

    //get properties of the block
    var xmax = parseInt($('#block').css("height"), 10); //200
    var ymax = parseInt($('#block').css("width"), 10); //200

    //(xcen, ycen) is the origin of the points
    var xcen = xmax / 2;
    var ycen = ymax / 2;
    curLine.css("left", (xcen + 9) + "px"); //9 is horizontal offset
    curLine.css("top", (ycen + 8) + "px"); //8 is vertical offset

    //the longest line would go from the origin to the corner: the hypotenuse
    var maxlen = Math.sqrt((xcen * xcen) + (ycen * ycen));

    //the shortest line would go from the origin straight up: the shortest leg
    var minlen = (xcen <= ycen) ? xcen : ycen;

    //the length of the line will be between the shortest length, and longest
    var height = getRandomInt(minlen, maxlen);
    curLine.css("height", height + "px");

    // arcsin (opposite/hypotenuse) converted to degrees
    var angle = Math.asin(xcen / height) * (180 / Math.PI);
    curLine.css('transform', 'rotate(' + angle + 'deg)');
    curLine.css('-webkit-transform', 'rotate(' + angle + 'deg)');
});

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

$('#add100').click(function () {
    for (var i = 0; i < 100; i++)
    $('#add').trigger('click');
});

$('#clear').click(function () {
    $('.line').remove();
    $('#count').html($('#block > div').size() + " lines");
});

---

Answer 1

这些可能的线段长度的分布倾向于更长的线。如果你在1和sqrt（2）之间均匀地采样一个长度，那么你的三角形底部附近会有更多的线条而不是靠近顶部的线条。

随机生成左端点：从（0，R）到（1,1）生成行，其中R是[0,1]范围内的均匀随机变量。

这个“有道理”的原因如下。假设我以这种方式绘制11个段，其左端点为（0,0），（0,0.1），（0,0.2），...，（0,0.9），（0,1）并且其右端点都是（1,1）。然后连续三角形之间的三角形面积将全部相等：WIDTH * HEIGHT / 2 = 0.1 * 1/2 = 0.05。

当将左端点随机采样为（0，R）时，其中R在[0,1]范围内是均匀的，您实际上获得了与前一段中描述的相同的行为。如果您使用相同的推理但使用原始方法（均匀采样线长度），您会发现线之间的三角形“间隙”区域不均匀分布：即，间隙在顶部附近比靠近底部更大。

如果这是你想要的，那很好。如果没有，为什么不呢？