Jump to content
Search Community

Spawning randomly placed SVGs with no overlap

pixelbakery test
Moderator Tag

Recommended Posts

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! Thanks238001407_ScreenShot2021-11-05at14_57_19.thumb.png.948f69d8fb603df7e54777c965124ec6.png

Link to comment
Share on other sites

Hi PixelBakery,

 

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

 

image.png

 

 

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

 

  • Like 4
Link to comment
Share on other sites

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. 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...