# P5.js communicating bubbles

**URL:** <https://discourse.processing.org/t/p5-js-communicating-bubbles/1201>\
**Category:** p5.js\
**Created:** [June 24, 2018, 9:21am UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201 "2018-06-24T09:21:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![anand](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@anand](https://discourse.processing.org/u/anand)\
**Post date:** [June 24, 2018, 9:21am UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/1 "2018-06-24T09:21:30Z")

</div>

I am rewriting my question on P5.js. The same I had asked on this video[[https://youtu.be/5Q9cA0REztY](https://youtu.be/5Q9cA0REztY)] and Dan suggested me to post here.

I tried to do the same example myself. I was able to achieve many things except one … bubble turning on and Off. In your example, when you say b.intersects(other) and then you set color of intersecting bubble with b.changeColor(255). My question is how both intersecting bubbles change their color. In my case only one of the intersecting bubble changes its color.

Another question:  
I am using for i = 0 loop syntax and this does not work same file for…of loop. My code below.

```auto
for (let i = 0; i < bubbles.length; i++) {
    bubbles[i].show();
    bubbles[i].move();
    let overlapping = false;
    for (let j = 0; j <= i; j++) {
      if(i != j && bubbles[i].intersect(bubbles[j])){
    overlapping = true;
  } 
 }
   if(overlapping) {
    bubbles[i].changeColor(255);
   } else {
    bubbles[i].changeColor(0);
   }
  }

```

same code with for…of loop works. Dont understand how

```auto
for (let b of bubbles) {
  b.show();
  b.move();
   let overlapping = false;
  for (let other of bubbles) {
    if (b != other && b.intersect(other)) {
      overlapping = true;
    }

}
if(overlapping) {
    b.changeColor(255);
   } 
   else {
    b.changeColor(0);
}
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 24, 2018, 9:52am UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/2 "2018-06-24T09:52:13Z")

</div>

Please format your code by using `</>` in the message editor and don’t forget to press `Ctrl + T` in the Processing IDE to correctly indent your code.

---

<div class="post-metadata">

**Author:** ![anand](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@anand](https://discourse.processing.org/u/anand)\
**Post date:** [June 24, 2018, 11:06am UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/3 "2018-06-24T11:06:16Z")

</div>

Thanks. Good to know.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 24, 2018, 12:08pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/4 "2018-06-24T12:08:05Z")

</div>

Got this sketch, in Java Mode, which links bubbles using a red **line()** if they’re intersecting each other: 😺  
[http://Studio.ProcessingTogether.com/sp/pad/export/ro.989GaZC5t7EkE](http://Studio.ProcessingTogether.com/sp/pad/export/ro.989GaZC5t7EkE)

I can convert it to p5js if you don’t understand Java syntax. ☕

P.S.: This article might help as well: 😇  
[http://JeffreyThompson.org/collision-detection/circle-circle.php](http://JeffreyThompson.org/collision-detection/circle-circle.php)

---

<div class="post-metadata">

**Author:** ![anand](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@anand](https://discourse.processing.org/u/anand)\
**Post date:** [June 25, 2018, 3:34pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/5 "2018-06-25T15:34:13Z")

</div>

The Java mode does not answer my question. I have 2 different questions in my post.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 25, 2018, 3:37pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/6 "2018-06-25T15:37:32Z")

</div>

> [@anand](#):
>
> The Java mode does not answer my question.

I’ve clearly stated at my previous post: 🤨

> [@GoToLoop](#):
>
> I can convert it to p5js if you don’t understand Java syntax. ☕

---

<div class="post-metadata">

**Author:** ![anand](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@anand](https://discourse.processing.org/u/anand)\
**Post date:** [June 25, 2018, 3:43pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/7 "2018-06-25T15:43:13Z")

</div>

I do understand the syntax and I got what the java program is doing. My example is where two bubbles communicate on their own whereas the JAVA program has one bubble and the other is mouse controlled. The mouse controlled bubble example is clear and work fine with me in P5.js

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 25, 2018, 3:49pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/8 "2018-06-25T15:49:37Z")

</div>

> [@anand](#):
>
> … whereas the JAVA program has one bubble and the other is mouse controlled.

Ru really describing the same sketch I’ve linked to at my 1st post? 😵  
[http://Studio.ProcessingTogether.com/sp/pad/export/ro.989GaZC5t7EkE](http://Studio.ProcessingTogether.com/sp/pad/export/ro.989GaZC5t7EkE)

---

<div class="post-metadata">

**Author:** ![anand](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@anand](https://discourse.processing.org/u/anand)\
**Post date:** [June 25, 2018, 3:51pm UTC](https://discourse.processing.org/t/p5-js-communicating-bubbles/1201/9 "2018-06-25T15:51:09Z")

</div>

Correct this one. I was not able to open this link earlier. Now I can see that this replicates my problem.