# Problem with intersection algorithm

**URL:** https://discourse.processing.org/t/problem-with-intersection-algorithm/14634
**Category:** Coding Questions
**Created:** [October 12, 2019, 3:54pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634 "2019-10-12T15:54:57Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![braintrance](https://avatars.discourse-cdn.com/v4/letter/b/7ba0ec/32.png) [@braintrance](https://discourse.processing.org/u/braintrance)
#### Post date: [October 12, 2019, 3:54pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/1 "2019-10-12T15:54:57Z")

</div>

This code is supposed to draw 20 circles that are not intersecting, but it doesn’t.  
Where is the error in this?

```auto
var circles=[];

function setup() {
  createCanvas(600, 400);
  background(0);
  
  for(var i=0; i<20; i++) {
    
    var circle = {
      x: random(width),
      y: random(height),
      r: 36 
    }
    
    var overlapping=false;
    
    for(var j = 0; j < circles.length; j++) {
      
      var other = circles[j];
      var d = dist(circle.x, circle.y, other.x, other.y);
      
      if(d < circle.r + other.r) {
        overlapping = true;
        
      }
      
      if(!overlapping) {
        circles.push(circle);
      
      }
      
      
      
    }
    
    
    
    
    
  }
  
  for(i=0; i<circles.length; i++) {
    ellipse(circles[i].x, circles[i].y, circles[i].r);
  }
  
}

function draw() {
  
}

```

---

<div class="post-metadata">

### Author: ![PhoenixStormJr](https://avatars.discourse-cdn.com/v4/letter/p/43a26b/32.png) [@PhoenixStormJr](https://discourse.processing.org/u/PhoenixStormJr)
#### Post date: [October 12, 2019, 5:07pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/2 "2019-10-12T17:07:49Z")

</div>

What did you use to code this? This code doesn’t seem to work on processing 3 because “function”  
And “var” don’t exist.

---

<div class="post-metadata">

### Author: ![braintrance](https://avatars.discourse-cdn.com/v4/letter/b/7ba0ec/32.png) [@braintrance](https://discourse.processing.org/u/braintrance)
#### Post date: [October 12, 2019, 5:17pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/3 "2019-10-12T17:17:08Z")

</div>

I’m on p5.js web editor

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [October 12, 2019, 7:14pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/4 "2019-10-12T19:14:47Z")

</div>

fixed the not drawing part

although I cant seem to fix the intersection check.

```auto
var circles=[];

function setup() {
  createCanvas(1200, 600);
  background(0);
  
  for(var i=0; i<20; i++) {
    
    var circle = {
      x: random(width),
      y: random(height),
      r: 36 
    }
    
    
    if(circles.length>0){
    for(var j = 0; j < circles.length; j++) {
      
      var other = circles[j];
      var d = dist(circle.x, circle.y, other.x, other.y);
      var overlapping = false;
      if(d < (circle.r/2 + other.r/2)&&other!==circle) {
        overlapping = true;
      }
      var k = circles.includes(circle);
      if(!overlapping&&!k) {
				
        circles.push( circle);
      }}}
		else{
			circles.push( circle);
		}}
}

function draw() {
	background(51);
	fill(255);
	text(circles.length,10,10);
  for(i=0; i<circles.length; i++) {
		stroke(255);
		fill(255);
    ellipse(circles[i].x, circles[i].y, circles[i].r);
  }
}

```

---

<div class="post-metadata">

### Author: ![rufsketch1](https://avatars.discourse-cdn.com/v4/letter/r/8edcca/32.png) [@rufsketch1](https://discourse.processing.org/u/rufsketch1)
#### Post date: [October 12, 2019, 10:08pm UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/5 "2019-10-12T22:08:47Z")

</div>

The way you’re doing it now adds the circle so long as there is **at least** one circle which it doesn’t intersect. What you actually want is to only add it if there are **no** circles it intersects.

In order to accomplish that, you need to declare your `overlapping` boolean before your `for` loop, and your conditional `push` of the circle after the `for` loop.

Like so:

```auto
var circles=[];

function setup() {
  createCanvas(1200, 600);
  background(0);
  
  for(var i=0; i<20; i++) {
    
    var circle = {
      x: random(width),
      y: random(height),
      r: 36 
    }
    
    
    if(circles.length>0){
       var overlapping = false;
    for(var j = 0; j < circles.length; j++) {
      
      var other = circles[j];
      var d = dist(circle.x, circle.y, other.x, other.y);
     
      if(d < (circle.r/2 + other.r/2)&&other!==circle) {
        overlapping = true;
      }
      var k = circles.includes(circle);
     }
    
        if(!overlapping&&!k) {			
            circles.push( circle);
        } 
    } 
    else {
       circles.push( circle);
    }
   }
}

function draw() {
	background(51);
	fill(255);
	text(circles.length,10,10);
  for(i=0; i<circles.length; i++) {
		stroke(255);
		fill(255);
    ellipse(circles[i].x, circles[i].y, circles[i].r);
  }
}

```

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [October 13, 2019, 11:02am UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/6 "2019-10-13T11:02:43Z")

</div>

Nice! I would say this solves almost everything, the only thing it doesn’t solve is the fact that it doesn’t always produce an array of circles size 20, if the overlap check fails, the for loop continues to iterate up, and therefore you end up with a circles array of size 20 - failed checks.

---

<div class="post-metadata">

### Author: ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)
#### Post date: [October 13, 2019, 11:59am UTC](https://discourse.processing.org/t/problem-with-intersection-algorithm/14634/7 "2019-10-13T11:59:33Z")

</div>

Added i-- to cause the loop to track back if the intersection check fails.

Please not that you will be limited by the amount of space you have on your canvas. So if your circles radius is 36 you have to limit the total number of circles to something that can fit in the canvas otherwise your for loop will eventually get stuck, as there is no possible space to place the next circle.

```auto
var circles=[];
var radius = 36;
var total = 200;
function Circle(x,y,r){
	this.x = x
	this.y = y;
	this.r = r;

	this.draw = function(){

		stroke(255);
		noFill();
		ellipse(this.x,this.y,this.r);
	}
}

function setup() {
  createCanvas(1200, 600);
  background(0);

  for(var i=0; i<total; i++) {

    // var circle = {
      var x = random(width);
      var y = random(height);
      var r = radius;
    // }
		var a = new Circle(x,y,r);
    
    if(circles.length>0){
			var overlapping = false;
    for(var j = 0; j < circles.length; j++) {

      var other = circles[j];
      var d = dist(a.x, a.y, other.x, other.y);

      if(d < radius) {
        overlapping = true;
      }
      }
      if(!overlapping) {

        circles.push( a);
      }
			else{
				i--;
			}
    }
		else{
			circles.push( a);
		}}
}

function draw() {
	background(51);
	fill(255);
	text(circles.length,10,10);
  for(i=0; i<circles.length; i++) {
		stroke(255);
		fill(255);
    ellipse(circles[i].x, circles[i].y, circles[i].r);
  }
}

```