Spawning randomly placed SVGs with no overlap

[pixelbakery 2 Likes (Newbie)]

Hiya,

 

I'm trying to find out what the best approach to this is. I'd like to create a lander that has a bunch of svgs that spawn in random locations, but don't overlap, on page load. Once they're loaded in, they'll passively bob up and down and rotate a bit. 

 

Is this possible with GSAP, or should I keep looking? I potentially like the idea of using the 2d physics plugin to make them bump off each other, but that's deff phase two. I've attached a screenshot of the mockups to give you a better idea of what I'm after. The object in the middle has a blue roughly-cut background baked into the image and would be placed on top of everything, so no need to add collision avoidance to that part.

 

Ya'll are great! Thanks

[OSUblake 18,453 Likes (Superhero)]

Hi PixelBakery,

 

That would be incredibly difficult to do without a complex collision detection algorithm as the bounding boxes would overlap.

 

 

 

If the images didn't overlap, you could do a brute force method where you just check if the space is occupied. Here's an old demo where I do that with boxes.

 

See the Pen WjWPob by osublake (@osublake) on CodePen

 

 

And circle packing...

 

See the Pen bWJZVB by osublake (@osublake) on CodePen

 

[pixelbakery 2 Likes (Newbie)]

@OSUblake The first demo looks pretty spot on! I believe all I would need to do is remove the random size portion to use the actual svg size, correct? And obviously remove the looping animation. I'm guessing I could just add two more variables to each object for x and y, right?

[OSUblake 18,453 Likes (Superhero)]

Yeah, give it a shot, and if you get stuck, just throw it a codepen and I can take a look. But like I mentioned earlier, it won't allow overlaps so the images won't be as tightly packed as your image.

 

12 minutes ago, pixelbakery said:

I'm guessing I could just add two more variables to each object for x and y, right?

 

You can replace left and top with x and y. They would be the same thing. The object I used is just to represent the bounds of a rectangle, so the names really don't matter. 

 

[Cassie 4,843 Likes (Superhero)]

You could fake it a little by using Blakes first pen to arrange the images and then scale them slightly larger to take out some of the extra space.