How can I prevent random location overlaps

[delizade]

Hi,

I want to animate some boxes that will be appear randomly from the bottom.

But they overlaps each other sometimes. I want them positioned seperatly. Is that any mathematical way or some other way to achive that?

 

I thought that may be I can validate new positions with others' x, y, with, height values one by one and if new x and new y are in a area that belongs to other one I will get random location values again recursively.

 

thank you.

 

 

See the Pen RVJBPz by Cosmodrome (@Cosmodrome) on CodePen

[OSUblake]

2 hours ago, delizade said:

I thought that may be I can validate new positions with others' x, y, with, height values one by one and if new x and new y are in a area that belongs to other one I will get random location values again recursively.

 

If you do it that way, be careful as you may end up in infinite loop. You'll need to put some condition on finding an  available space, either based on time or number of attempts. You can try again, but call your function with a timeout so it doesn't block other code that needs to run.

setTimeout(function() {
  appear(obj)
}, 1);

 

I have some grids that might work for this. Are the heights of your elements always going to be same?

[delizade]

hi @OSUblake

thanks for your reply.

yes, box height are same. according to screen height may be it will change but overall they will use same height.

but as you can see widths are not same.

 

how "grids" works I wonder?

 

This issue became more complex than I thought. Currently I've been checking some game codes about 2D collisions. In this way I have to use some kind of recursive function usage I think. It must be easy damn

[OSUblake]

Yup. Collision detection can get seriously complicated.

 

With a grid, it's very easy to keep track of occupied cells.

 

 

That's how I check for collisions here. I'm not using any rectangles.

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

 

But I just remembered something. I have a circle packing script, and it will probably work for rectangles. Let me get back to you.

 

 

 

[delizade]

thank you @OSUblake

[OSUblake]

Hey @delizade,

 

I didn't forget about you. I'll be later today with an update, but that circle packing technique should work fine as long as you don't have thousands of elements, like this... hehe. It requires millions of hit tests to fill the screen with circles.

 

 

[delizade]

this seems awesome and above my knowledge   @OSUblake thank you for your sharing this.

[OSUblake]

Hi @delizade

 

Uhhhh.... I did forget about you. Sorry about that. 

 

But here's a nice demo for you if you're still interested. If you need any help understanding it, just let me know. I tried to make as simple as possible.

 

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

 

 

[OSUblake]

If anybody is curious about circle packing, here's a demo using canvas. It's pure brute force. Trying to optimize the number of collision checks can actually make it run slower.  On a 1200x800 screen, it has to do about 10,000,000 collision checks. It bails out after 500 consecutive collisions.

 

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