1

I want to generate random rectangles with random dimensions without collisions. At this moment i have this, but it is with collisions and i I've lost my ideas for solution for that.

<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>
Izual10
  • 11
  • 2
  • Find a way to test if 2 rectangles overlap, then as you generate new random rectangles you can compare them to your existing ones, and if there is any overlap, dispose of it and try again. You'll need some kinda limit so it doesn't run forever :) – Davesoft Aug 31 '18 at 13:13
  • How many random rectangles you need to generate? – Observer Aug 31 '18 at 13:13
  • How many i want in a loop ;) – Izual10 Aug 31 '18 at 13:20
  • 2
    https://stackoverflow.com/questions/35435345/create-random-rectangles-with-random-colors-without-overlapping-using-javascript – Muhammad Raja Aug 31 '18 at 13:30
  • Hmm... if i use this, that dont give me as much as i need rectangles :/ I need generate for example n-rectangles :/ – Izual10 Sep 03 '18 at 10:24

1 Answers1

0

There's a couple of ways to do this.

Option 1

  • Specify the number of rectangles you want
  • While the number of rectangles you have placed is less than the number of rectangles you want
    • Generate a rectangle
    • If the rectangle collides with any other rectangles already placed, return
    • Else, place the rectangle

Optional Extras:

  • If you can't place a rectangle after 10 (could be 100, 1000, whatever you think is best) tries, exit the loop since you're unlikely to be able to place another rectangle without it colliding
  • Reduce the maximum size of rectangles that you generate based on the number of times you've tried to place one. This way you end up filling smaller gaps with smaller rectangles
  • Have a function that sums the area of all the rectangles to check if you have filled your canvas

Option 2

  • Specify a grid based on max rectangle dimensions and the max dimensions of the grid you want to generate (say you have a canvas 1000px x 1000px, and your max rectangle dimensions are 200px x 200px, you'd have a grid of 5 x 5)
  • For each item in the grid generate a randomly sized rectangle and place it at x * maxRectSize, y * maxRectSize

With option 1, it's going to be more intensive but you'll get a more refined result, especially if you do the optional extras.

With option 2, you'll just get a grid of rectangles, they won't be in random locations but it'll run real fast.

Another alternative would be to use Option 2 to generate a starting canvas, and then you could apply option 1 on top of that to fill in the gaps.

Michael Curry
  • 991
  • 8
  • 20