PixiJS - no overlapping images

[boland]

I'm new to PixiJS. What I'm trying to do is add a bunch of Sprites at random locations. I managed that and it's working.
However, I don't want images to overlap. Of course I can do a check every time I want to add an image and see if it collides with any image by looping through all children, and randomize the location again if it's colliding, but that is not really efficient.

I'm not sure what the best approach would be. I could store somehow all pixel locations that have been occupied and when I detect a collision, shift up/left/right/down until I find a free spot? Is that the best approach?

[d13]

You could create a 2D array of x/y coordinates.

Randomly choose one of those locations for each sprite.

Then keep track of which location was chosen (or splice it out of the array) so that it's not assigned again.

[boland]

You could create a 2D array of x/y coordinates.

Randomly choose one of those locations for each sprite.

Then keep track of which location was chosen (or splice it out of the array) so that it's not assigned again.

Yeah, but only coordinates is not enough, as images can be different in size. I would have to define a 2D array with all pixel points, fill them with 1's where I have a picture and then calculate if one of my pixels in my new image will clash. If it clashes, I have to move it up/down/right/left and do the checks again.

Sounds all rather complicated and I thought there might be an easier way...

[alex_h]

You could / should use a QuadTree to speed up the process of checking whether a randomly assigned image collides with an existing one.

[cokenias]

You can use d3's force layout engine to compute non-overlapping positions for your sprites. Under the hood d3 uses a quadtree to keep track of all the objects.

 

http://bl.ocks.org/mbostock/3231298