# Problem with overlapping balls

**URL:** <https://discourse.processing.org/t/problem-with-overlapping-balls/7588>\
**Category:** Coding Questions\
**Created:** [January 17, 2019, 10:42am UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588 "2019-01-17T10:42:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjente](https://avatars.discourse-cdn.com/v4/letter/b/a698b9/32.png) [@bjente](https://discourse.processing.org/u/bjente)\
**Post date:** [January 17, 2019, 10:42am UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/1 "2019-01-17T10:42:17Z")

</div>

Hello all,

I’m kinda new to processing and I’m doing some exercises to get the hang of it. Right now I’m writing a little script which draws balls to the screen. If the balls overlap, I want the color of the current ball to change to red. Some of the overlapping balls do change to red but others don’t. I think it’s because not all balls are compared to each other. But I don’t know how to fix this.

**This is my overlapping\_balls code:**

```auto
Ball balls[] = new Ball[20];

void setup() {
    size(400,200);
    for(int i = 0; i < balls.length; i++) {
        balls[i] = new Ball();
  }
}

void draw() {
    background(0);
    for(int i = 0; i < (balls.length); i++) {
        for(int j = 0; j < i; j++) {
        if (balls[i].overlaps(balls[j])) {
        balls[i].changeColor();
      }
    }
    balls[i].display();
  }
}

**This is my ball class:**

class Ball {
    float x, y;
    float r;
    int[] colored = {255, 255, 255};
  
  Ball() {
      x = random(width);
      y = random(height);
      r = random(2, 10);
  }
  
  boolean overlaps(Ball other) {
      float distance = dist(x,y,other.x,other.y);
      if (distance < (r + other.r)) {
          return true;
      } else {
          return false;
    }
  }
  
  void changeColor() {
      colored[0] = 255;
      colored[1] = 0;
      colored[2] = 0;
  }
    
  void display() {
      noStroke();
      fill(colored[0], colored[1], colored[2],100);
      ellipse(x,y,r*4,r*4);
    }
  }

```

Does anyone have an idea of how I can construct the for loop in the overlapping\_balls.pde file?  
Thanks in advance!

Bente

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 17, 2019, 11:57am UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/2 "2019-01-17T11:57:36Z")

</div>

> [@bjente](#):
>
> ```auto
> for(int i = 0; i < (balls.length); i++) {
> for(int j = 0; j < i; j++) {
> 
> ```

understand you want to do the inner loop smarter,  
as a unlimited inner loop would do about double search as needed, right?  
but i think the logic was little bit different ( untested idea: )

```auto
for(int i = 0; i < balls.length-1; i++) {
for(int j = i+1; j < balls.length; j++) {

```

in words:

- 

> the last one must have been checked already

- 

> you not need to check on yourself and

- 

> not the one prior, as that have been checked already

---

<div class="post-metadata">

**Author:** ![bjente](https://avatars.discourse-cdn.com/v4/letter/b/a698b9/32.png) [@bjente](https://discourse.processing.org/u/bjente)\
**Post date:** [January 17, 2019, 12:10pm UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/3 "2019-01-17T12:10:24Z")

</div>

Hello kll, thanks for your reply!

I just tried it and unfortunately it didn’t work. What you described in words is exactly what I’d expected your loop to do but I can’t get my head around why it’s not working.

I just thought of the idea that ball[0] needs to check if it overlaps ball[1], ball[2] … ball[19]. Ball[1] needs to check if it overlaps ball[2], ball[3] … ball[19] and so on. I thought your loop would do so. I’ve been thinking it over and over all morning… It seems kinda ‘‘easy’’. But anyways thanks very much for you help!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 17, 2019, 12:21pm UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/4 "2019-01-17T12:21:39Z")

</div>

well, it works here,  
after i see a other problem in your posted code:

for posting code pls use the

> \</\>

formatter, not the “”  
because it some times damage code like yours:

> ellipse(x,y,r _4,r_ 4);

```auto
ellipse(x,y,r * 4,r * 4);

```

and that is very wrong:

```auto
ellipse(x,y,r * 2 ,r * 2 );

```

is correct and fits to your

```auto
distance < (r + other.r)

```

---

<div class="post-metadata">

**Author:** ![bjente](https://avatars.discourse-cdn.com/v4/letter/b/a698b9/32.png) [@bjente](https://discourse.processing.org/u/bjente)\
**Post date:** [January 17, 2019, 12:24pm UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/5 "2019-01-17T12:24:30Z")

</div>

Oh I’m sorry.  
Thanks very much, it works indeed!!

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 17, 2019, 12:27pm UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/6 "2019-01-17T12:27:24Z")

</div>

good, so now you can post the working version here,

- after format in IDE with [ctrl][t]
- using the correct way \</\> to post code.

so others who read this can start from your working version.

---

<div class="post-metadata">

**Author:** ![bjente](https://avatars.discourse-cdn.com/v4/letter/b/a698b9/32.png) [@bjente](https://discourse.processing.org/u/bjente)\
**Post date:** [January 17, 2019, 12:30pm UTC](https://discourse.processing.org/t/problem-with-overlapping-balls/7588/7 "2019-01-17T12:30:10Z")

</div>

Alright, so here is the working version. (Properly formatted).  
First,  
**overlapping\_balls.pde**

```auto
Ball balls[] = new Ball[1000];

void setup() {
  size(1000,800);
  for(int i = 0; i < balls.length; i++) {
    balls[i] = new Ball();
  }
}

void draw() {
  background(0);
  for(int i = 0; i < (balls.length - 1); i++) {
    for(int j = i + 1; j < balls.length; j++) {
      if (balls[i].overlaps(balls[j])) {
        balls[i].changeColor();
      }
    }
    balls[i].display();
  }
}

```

**And the ball class:**

```auto
class Ball {
  float x, y;
  float r;
  int[] colored = {255, 255, 255};
  
  Ball() {
    x = random(width);
    y = random(height);
    r = random(2, 10);
  }
  
  boolean overlaps(Ball other) {
    float distance = dist(x,y,other.x,other.y);
    if (distance < (r + other.r)) {
      return true;
    } else {
      return false;
    }
  }
  
  void changeColor() {
    colored[0] = 255;
    colored[1] = 0;
    colored[2] = 0;
  }
    
  void display() {
    noStroke();
    fill(colored[0], colored[1], colored[2],100);
    ellipse(x,y,r*2,r*2);
  }
}

```