Javascript Math.random (), возвращающий очень похожие значения

Question

Итак, у меня есть элементы, которые являются position: absolute, а затем я использую Math.random (), чтобы установить их left: #random и top: #random position.

Однако происходит очень странная вещь. Он должен быть абсолютно случайным, поэтому они должны располагаться совершенно случайно. Однако снова и снова они размещаются очень близко друг к другу. Вместо того, чтобы расстаться.

однако вы можете ясно видеть, что их позиции действительно случайны:

Вот код, который я использую для их генерации:

const Clouds = function(props) {
    const clouds = []
    for (let i = 0; i < props.cloudNum; i++) {
        const style = {
            position: 'absolute',
            height: 50 * props.cloudSize + 'px',
            top: Math.random() * 100 + '%',
            left: Math.random() * 100 + '%',
        }
        clouds.push(<Cloud key={i} style={style} />)
    }
    return <div className={props.side}>{clouds}</div>
}

существует ли временный компонент в Math.random, и поскольку они генерируются последовательно, их случайные числа похожи?

Answer 1

На самом деле, хотя они и выглядят похожими числами, но не являются (помните, что вы умножаете на 100), это означает, что ваше пространство случайных чисел изменяется от 0 до 100 (поскольку десятичные дроби на чертеже едва имеют значение, так какэто тот случай, о котором вы спрашиваете).

Имейте в виду, что, если ваше пространство составляет 100 облаков, генерирующих только 13 облаков, более чем на 50% вероятность того, что два облака занимают одно и то же положение из-за проблемы дня рождения.

https://en.wikipedia.org/wiki/Birthday_problem

Answer 2

Это совпадение, что вы получаете аналогичное значение.Попробуйте столько раз, сколько захотите, с моим фрагментом, чтобы проверить его самостоятельно.

Обратите внимание, что мои объекты намного меньше ваших, отсутствие наложения элементов дает лучшее чувство случайности.ИМХО, если вы генерируете облака (зависит от целей), может быть лучше использовать перлин-шум

const container = document.getElementById('container');

const Clouds = function() {
   
    for (let i = 0; i <10; i++) {        
         let myCloud = document.createElement("div");
        myCloud.style.height = '15px';
                myCloud.style.width = '15px';
        myCloud.style.position = 'absolute';
        myCloud.style.background =  '#fff';
        myCloud.style.border = '1px solid #ccc';
        myCloud.style.left = Math.random()*100+'%';
        myCloud.style.top = Math.random()*100+'%';
        container.appendChild(myCloud);
    }
   
}

function generate() {
 container.innerHTML = '';
 Clouds();
}

#container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: red;
}

button {
position: absolute;
z-index: 999;
}

<div id="container"></div>
<button onClick="generate()">Generate</button>

Answer 3

Временного компонента нет - он просто генерируется системой. Вот хорошая нить, объясняющая это.Случайный алгоритм зависит от механизма JavaScript (в этом потоке есть ответ V8), но функция всегда выдает число с плавающей точкой от 0 до 1 включительно.Это невероятно большое совпадение, что ваш код дал два близких числа.