CODEWITHSUNDEEP
javascripthtmlcanvas
MattO
MattO

Reputation: 1753

Why doesn't this function detect overlapping circles?

http://jsfiddle.net/goldrunt/SeAGU/52/ Line 49 checks for "false" on isOnCircle function before creating the new object. Function is on line 32. When creating more object, the function is passing when it should not pass. 

 if (isOnCanvas(location) && !isOnCircle(location)) {
        console.log(location, isOnCanvas(location), isOnCircle(location));
        create(location);

In fact I can't get the collision detection to register true no matter what values are passed to it

(Math.pow((a.x - i.x), 2) + Math.pow((a.y - i.y), 2) <= Math.pow((a.radius + i.radius), 2))

Upvotes: 2

Views: 1237

Answers (2)

MickLH
MickLH

Reputation: 416

here I've fixed and given more descriptive variable names so you can see what's going on. EDIT: I've noticed you don't always feed a circle but sometimes a point as A, which does not have a .radius property resulting in NaN, which also screws up your comparison.

function circleTest(a,b) {
    var DistanceX = a.x - b.x;
    var DistanceY = a.y - b.y;
    var DistanceCenter = Math.sqrt(DistanceX * DistanceX + DistanceY * DistanceY);
    var CollisionDistance = b.radius;
    if (a.radius) CollisionDistance += a.radius
    return DistanceCenter <= CollisionDistance;
}

I also noticed a problem in your function called "isOnCircle" where you are using i (a number) as if it were a circle object, with the above function this can be fixed like:

function isOnCircle(a) {
    for (var i = 0; i < circles.length; i++) {
        if (circleTest(a, circles[i])) return true;
    }
    return false;
}

Upvotes: 3

MT0
MT0

Reputation: 167867

Two problems:

  • i is the numerical index you are using to iterate through the circles array but you are using it as if it was a circle object; you need to use circles[i] to get the circle at each iteration.
  • a is a point and does not have a radius (in the code below I've left a.radius in just in-case you pass in a circle rather than a point and have ORed it with 0 so you get a valid number).

Defining some additional variables (for clarity) then you can replace the isOnCircle function with this:

function isOnCircle(a) {
    var i=0,l=circles.length,x,y,d,c;
    for (; i < l; ++i) {
        c = circles[i];
        x = a.x-c.x;
        y = a.y-c.y;
        d = (a.radius||0)+c.radius;
        if (x*x+y*y <= d*d) {
            return true;
        }
    }
    return false;
}

Upvotes: 1

Related Questions