Share Posted November 5, 2021 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 Link to comment Share on other sites More sharing options...
Share Posted November 5, 2021 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 4 Link to comment Share on other sites More sharing options...
Author Share Posted November 5, 2021 @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? Link to comment Share on other sites More sharing options...
Share Posted November 5, 2021 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. 1 Link to comment Share on other sites More sharing options...
Share Posted November 6, 2021 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now