title: Where is the bug in my code?
body: <p>I'm trying to create three dots of varying radii on a canvas, that do NOT touch or overlap each other. I'm using Jquery and Raphael for the circles. However when I run the program, they do sometimes overlap/touch, but I can't find the logic error in my code.</p>
  
  <pre><code>$(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 &lt; 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 &gt; 0) {
              for (var j = 0; j &lt; 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) &lt;= radiussum || Math.abs(circley - allcircley) &lt;= 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 &lt; 1) {
              circles.push(paper.circle(circlex, circley, circleradius).attr({"stroke": circlecolor, "stroke-width": 3}));
              circles[i] = [circlex, circley, circleradius];
          }
          console.log(circles[0]);
      }
  });
  </code></pre>
  
  <p>So I am creating a circle and saving it's x,y,radius in a two dimensional array (circles) and then trying to see if the new circle would touch/overlap the existing ones by seeing if the distance between the circle x,y is smaller or equal to the sum of the radii. But once again, it doesn't seem to work. I am also console.logging if they overlap or not (OVERLAP vs NO OVERLAP) and it always logs NO OVERLAP.</p>