How can I stop elements overlapping using JavaScript and the Raphael JavaScript library

Question

I’m generating multiple, random sized, circular elements using the Raphael JavaScript library but because it’s random a lot of the circular elements being generate overlap or cover each other. What I wanted to know, is there any way with JavaScript to tell if one element is in already in particular position so to avoid the overlapping? Essentially, I want to create random elements on a canvas, of a random size that don’t overlap or cover each other.

There's a couple of test files I created here to give you an idea of what I'm doing. The first one generates random objects and the second link sets them to a grid to stop the overlapping.

http://files.nicklowman.co.uk/movies/raphael_test_01/

http://files.nicklowman.co.uk/movies/raphael_test_03/

Answer 1

The easiest way is to create an object and give it a repulsive force that degrades towards zero at it's edge. As you drop these objects onto the canvas the objects will push away from each other until they reach a point of equilibrium.

Answer 2

Your examples aren't working for me, so I cannot visualize your exact scenario.

Before you "drop" an element on the canvas, you could query the positions of your other elements and do some calculations to check if the new element will overlap.

A very simple example of this concept using circle elements might look like this:

function overlap(circ1, circ2) {
    var attrs = ["cx", "cy", "r"];
    var c1 = circ1.attr(attrs);
    var c2 = circ2.attr(attrs);
    var dist = Math.sqrt(Math.pow(c1.cx - c2.cx ,2) + Math.pow(c1.cy - c2.cy, 2));
    return (dist < (c1.r + c2.r));
}
var next_drop = paper.circle(x, y, r);  
for (var i in circles) {
    if (overlap(next_drop, circles[i])) {
        // do something
    }
}

Of course calculating just where you're going to place a circle after you've determined it overlaps with others is a little more complicated.