Где ошибка в моем коде?

Question

Я пытаюсь создать три точки изменяющихся радиусов на холсте, которые НЕ касаются друг друга или перекрывают друг друга. Я использую JQuery и Raphael для кругов. Однако, когда я запускаю программу, они иногда перекрываются/касаются, но я не могу найти логическую ошибку в моем коде.

$(document).ready(function() { 

    var canvasx = 1450; 
    var canvasy = 743; 
    var paper = Raphael(0, 0, canvasx, canvasy); 
    var circles = new Array; 
    var colorarray = new Array("black", "red", "blue"); 
    var circleoffsetx = canvasx/4; 
    var circleoffsety = canvasy/4; 
    var iterations = 3; 
    var circleoverlap = false; 
    for (var i = 0; i < iterations; i++) { 
     var circlecolor = colorarray[Math.floor(Math.random() * colorarray.length)]; 
     var circlex = Math.floor((Math.random() * canvasx/2) + circleoffsetx); 
     var circley = Math.floor((Math.random() * canvasy/2) + circleoffsety); 
     var circleradius = Math.floor((Math.random() * 75) + 25); 
     if (circles.length > 0) { 
      for (var j = 0; j < circles.length; j++) { 
       var allcirclex = circles[j[0]]; 
       var allcircley = circles[j[1]]; 
       var allcircleradius = circles[j[2]]; 
       var radiussum = circleradius + allcircleradius; 
       if (Math.abs(circlex - allcirclex) <= radiussum || Math.abs(circley - allcircley) <= radiussum) { 
        iterations++; 
        circleoverlap = true; 
        console.log("OVERLAP"); 
        break; 

       } 
      } 
      if (circleoverlap === false) { 
       circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3})); 
       circles[i] = [circlex, circley, circleradius]; 
       console.log("NO OVERLAP"); 
      } 
     } 
     if (circles.length < 1) { 
      circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3})); 
      circles[i] = [circlex, circley, circleradius]; 
     } 
     console.log(circles[0]); 
    } 
}); 

Так я создаю круг и сохранение его х, у, радиус в двухмерную матрицу (кружки), а затем пытается увидеть, если новый круг будет касаться/перекрывать существующие, видя, если расстояние между окружностью x, y меньше или равна сумме радиусов. Но опять же, похоже, это не работает. Я также console.logging, если они перекрываются или нет (OVERLAP vs NO OVERLAP), и он всегда регистрирует NO OVERLAP.

Answer 1

Вот неподвижная сценарий:

$(document).ready(function() { 

    var canvasW = 1450; 
    var canvasH = 743; 
    var paper = Raphael(0, 0, canvasW, canvasH); 

    var circles = new Array(); 
    var colorArray = new Array("black", "red", "blue"); 

    var circleOffsetX = canvasW/4; 
    var circleOffsetY = canvasH/4; 
    var iterations = 3; 
    var circleOverlap; 

    // keep creating circles until done 
    while (circles.length < iterations) { 
    var circleColor = colorArray[Math.floor(Math.random() * colorArray.length)]; 
    var circleX = Math.floor((Math.random() * canvasW/2) + circleOffsetX); 
    var circleY = Math.floor((Math.random() * canvasH/2) + circleOffsetY); 
    var circleR = Math.floor((Math.random() * 75) + 25); 
    circleOverlap = false; // assume new circle doesn't overlap existing ones 
    // test against existing circles 
    for (var j = 0; j < circles.length; j++) { 
     var dx = circles[j].x - circleX; 
     var dy = circles[j].y - circleY; 
     if (Math.sqrt(dx*dx + dy*dy) <= circleR + circles[j].r + 3) { 
     circleOverlap = true; 
     break; 
     } 
    } 
    // no overlap? then add to array 
    if (!circleOverlap) circles.push({ x: circleX, y: circleY, r: circleR, c: circleColor }); 
    } 
    // create Raphael circles based on array data 
    for (var i = 0; i < circles.length; i++) { 
    circles[i] = paper.circle(circles[i].x, circles[i].y, circles[i].r).attr({ 
     "stroke": circles[i].c, 
     "stroke-width": 3 
    }); 
    } 
}); 

Я изменил несколько вещей, должны быть довольно очевидны, хотя.

Answer 2

Ваша формула для расстояния между двумя точками очень неправильная.

Если у вас есть точка (X1, Y1) и точка (X2, Y2), расстояние между ними составляет sqrt ((x2 - x1)^2 + (y2 - y1)^2). Это значение, которое вам нужно сравнить с радиусом 1 + радиус2.

Вы также не правильно читаете любой из значений из вашего массива кругов - вы должны использовать circles[j][0] и не circles[j[0]], которая всегда будет возвращать undefined, потому что J не является массив и поэтому J [0] не определен.