Случайная генерация прямоугольников со случайными размерами без столкновений - PullRequest
0 голосов
/ 31 августа 2018

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

<html>
<head>
</head>
<body>

<svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="550" height="550"> 
</svg>

<script type="text/javascript">
var svgns = "http://www.w3.org/2000/svg";

function rectan()
{
for (var i = 0; i < 5; i++) {

    var x = Math.floor(Math.random() * 200) + 1  ;
        y = Math.floor(Math.random() * 200) + 1  ;
    var rect = document.createElementNS(svgns, 'rect');
    rect.setAttributeNS(null, 'x', x);
    rect.setAttributeNS(null, 'y', y);
    rect.setAttributeNS(null, 'height', '50');
    rect.setAttributeNS(null, 'width', '50');
    rect.setAttributeNS(null, 'fill', 'none');
               rect.setAttributeNS(null, 'stroke', '#010101');
    document.getElementById('svgOne').appendChild(rect);
}
}

rectan();

</script>
</body>
</html>

1 Ответ

0 голосов
/ 31 августа 2018

Есть несколько способов сделать это.

Вариант 1

  • Укажите желаемое количество прямоугольников
  • Хотя количество прямоугольников, которые вы поместили, меньше количества прямоугольников, которое вы хотите
    • Создать прямоугольник
    • Если прямоугольник сталкивается с любыми другими уже размещенными прямоугольниками, вернуть
    • Иначе, поместите прямоугольник

Дополнительные опции:

  • Если вы не можете поместить прямоугольник после 10 попыток (это может быть 100, 1000, что бы вы ни считали лучшим), выйдите из цикла, поскольку вы вряд ли сможете разместить другой прямоугольник без столкновения
  • Уменьшите максимальный размер создаваемых прямоугольников в зависимости от того, сколько раз вы пытались их разместить. Таким образом, вы заполняете меньшие промежутки прямоугольниками меньшего размера
  • Имейте функцию, которая суммирует область всех прямоугольников, чтобы проверить, заполнили ли вы свой холст

Вариант 2

  • Укажите сетку на основе максимальных размеров прямоугольника и максимальных размеров сетки, которую вы хотите сгенерировать (скажем, у вас есть холст 1000px x 1000px, а ваши максимальные размеры прямоугольника 200px x 200px, у вас будет сетка 5 х 5)
  • Для каждого элемента в сетке создайте прямоугольник произвольного размера и поместите его в x * maxRectSize, y * maxRectSize

С опцией 1 она будет более интенсивной, но вы получите более точный результат, особенно если вы сделаете необязательные дополнения.

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

Другой альтернативой может быть использование варианта 2 для создания начального холста, а затем вы можете применить вариант 1 поверх этого, чтобы заполнить пробелы.

...