# Background overwrites mouseClicked for bubbles (Fish tank)

**URL:** <https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263>\
**Category:** Coding Questions\
**Created:** [October 14, 2022, 10:57am UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263 "2022-10-14T10:57:06Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![LeckereKrokette](https://avatars.discourse-cdn.com/v4/letter/l/b77776/32.png) [@LeckereKrokette](https://discourse.processing.org/u/LeckereKrokette)\
**Post date:** [October 14, 2022, 10:57am UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/1 "2022-10-14T10:57:07Z")

</div>

Hello everyone, I’m relatively new to Processing. My first project will be a fish tank. I would like the bubbles to rise from bottom to top when I click my mouse, this should happen every click. At the moment it only works while you hold the mouse clicked. But it will probably be due to the background, which immediately overwrites the rest of the code afterwards. Please help and ideas.

```auto
void setup() {
  size(600,600);
   for (int i = 0; i < xarray.length; i++) {
      xarray[i] = int(random(500));
   }
}

void draw() {
  frameRate(30);
   background(255);
   for (int i = 0; i < xarray.length; i++) {
     if (mousePressed){ strokeWeight(2.5);
    stroke(100, 255, 255, 100);
    fill(150, 255, 255, 100);
    ellipse(xarray[i],mouseY--,size,size);
    noFill();
    stroke(230, 255, 255, 100);
    arc(xarray[i],mouseY--,size/1.25,size/1.25,180,300);
     }
   }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 14, 2022, 12:16pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/2 "2022-10-14T12:16:50Z")

</div>

Hm.

You need to distinguish between

- the spawning of a new bubble and
- the display of all existing bubbles.

**Remark**

Also the bubbles move up.  
Therefore you need yarray[i] for y and say  
yarray[i] --;

**What to do**

- During display old bubbles the mouse pressed has not to be checked.
- Only when we add a bubble we check the mouse.

Instead of using the length of the array as the upper boundary of the for-loop you could use a new variable upperBound which you increase upon mouse click. Additionally insert the mouse position in this slot of the 2 arrays.

---

<div class="post-metadata">

**Author:** ![LeckereKrokette](https://avatars.discourse-cdn.com/v4/letter/l/b77776/32.png) [@LeckereKrokette](https://discourse.processing.org/u/LeckereKrokette)\
**Post date:** [October 14, 2022, 2:12pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/3 "2022-10-14T14:12:20Z")

</div>

Many thanks in advance for your help, I’ve tried adding a few things. The problem is now, if I build the mouseX mouseY into the ellipse, the bubbles are still controlled by the mouse even after clicking. But if I leave out mouseX mouseY completely, the bubbles only spawns in the upper left corner. Can you maybe go into more detail about where I should now install mouseX-Y. Thanks

```auto
int[] xarray = new int[300];
int[] yArray = new int[300];
float size= random(20,40);
int upperBound=0;

void setup() {
  size(600,600);
   for (int i = 0; i < upperBound; i++) {
      xarray[i] = int(random(500));
      yArray[i] = int(500);
   }
}

void draw() {
  if(mousePressed){
  upperBound++;
  }
  frameRate(30);
   background(255);
   for (int i = 0; i < upperBound; i++) {
      strokeWeight(2.5);
    stroke(100, 255, 255, 100);
    fill(150, 255, 255, 100);
    ellipse(xarray[i]+mouseX,yArray[i]+mouseY,size,size);
    noFill();
    stroke(230, 255, 255, 100);
    arc(xarray[i]+mouseX,yArray[i]+mouseY,size/1.25,size/1.25,180,300);
    yArray[i]--;
     }
   }

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 14, 2022, 6:31pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/4 "2022-10-14T18:31:16Z")

</div>

> [@LeckereKrokette](#):
>
> ```auto
> if(mousePressed){
> upperBound++;
> }
> 
> ```

Here you want to copy mouseX and mouseY into the array  
SO each bubble receives its initial position individually from the mouse and is now independent of the mouse.

```auto
// after increasing upperBound
xarray[upperBound-1]=mouseX;// not sure about the -1
yarray[upperBound-1]=mouseY;

```

Also where you display the bubbles, remove all usage of mouse  
At this point each bubble has its individual position stored in the arrays

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 14, 2022, 6:34pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/5 "2022-10-14T18:34:35Z")

</div>

> [@LeckereKrokette](#):
>
> ```auto
> ellipse(xarray[i]+mouseX,yArray[i]+mouseY,size,size);
>     
> 
> ```

Better

`ellipse(xarray[i],yArray[i],size,size);`

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 15, 2022, 11:27am UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/6 "2022-10-15T11:27:19Z")

</div>

You can make the bubbles wobble I think using scale with  
small values, surrounding the section with pushMatrix(); command and popMatrix(); command

scale (wobbleArray[i]+=0.06, 1.0);

So it grows, how make it wobble?

* * *

Additionally you can spawn random bubbles freely

---

<div class="post-metadata">

**Author:** ![LeckereKrokette](https://avatars.discourse-cdn.com/v4/letter/l/b77776/32.png) [@LeckereKrokette](https://discourse.processing.org/u/LeckereKrokette)\
**Post date:** [October 16, 2022, 9:48am UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/7 "2022-10-16T09:48:38Z")

</div>

Thanks for your suggestions, since I didn’t know where to start to make the bubbles wobbly, I first tried to generate other bubbles in addition to the bubbles generated by the mouse. But it doesn’t work, when I write the condition of the for loop. Either there is only one bubble or the window turns grey.

```auto
float blaseX=random(0,600);
float blaseY=random(400,600);
float blaseSize=random(10,55);

void setup(){
size(600,600);
}

void draw(){
  frameRate(30);
  background(#075BE8);
  
  for (float i=0; i>=0;i++){
  strokeWeight(2.5); //Blasen
    stroke(100, 255, 255, 100);
    fill(150, 255, 255, 100);
    ellipse(blaseX,blaseY,blaseSize,blaseSize);
    noFill();
    stroke(230, 255, 255, 100);
    arc(blaseX,blaseY,blaseSize/1.25,blaseSize/1.25,180,300);
blaseY--;  
}
     }

```

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [October 16, 2022, 5:10pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/8 "2022-10-16T17:10:36Z")

</div>

Hi,

Be careful with your for loop, right now you are creating an infinite loop.

```auto
for (float i=0; i>=0;i++)

```

Here you are saying, for `i` starting at 0 until `i` greater than 0 and adding 1 to `i` at every loop.

That’s one of the reason you are only seeing one bubble not moving.

The other reason is that even if you had your loop under control:

```auto
for (float i=0; i<5;i++) // i goes from 0 to 4 included

```

when calling your ellipse function to draw your bubble `blaseX` and `blaseY` will be the same (granted that `blaseY` will be a bit different every time but not because it is another bubble only because you are moving it to the top).

Instead you want to able to keep track of different bubbles.  
The first one can be at coordinate (x1, y1) and the second one at coordinate (x2, y2).

To keep track of all those coordinate, you can use 2 arrays like so:

```auto
final int nbOfBubbles = 5;
final int blaseSize = 30;
float[] bubblesX;
float[] bubblesY;

void setup() {
 size(600, 600);
 
 bubblesX = new float[nbOfBubbles];
 bubblesY = new float[nbOfBubbles];
 
 for (int i = 0; i < nbOfBubbles; i++) {
   bubblesX[i] = random(0, 600);
   bubblesY[i] = random(400, 600);    
 }
}

void draw() {
 frameRate(30);
 background(#075BE8);
 strokeWeight(2.5); 
 stroke(100, 255, 255, 100);
 fill(150, 255, 255, 100);

 for (int i = 0; i < nbOfBubbles; i++) {
   ellipse(bubblesX[i], bubblesY[i], blaseSize, blaseSize);
   bubblesY[i]--;
 }
}

```

---

<div class="post-metadata">

**Author:** ![LeckereKrokette](https://avatars.discourse-cdn.com/v4/letter/l/b77776/32.png) [@LeckereKrokette](https://discourse.processing.org/u/LeckereKrokette)\
**Post date:** [October 16, 2022, 6:54pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/9 "2022-10-16T18:54:02Z")

</div>

Thanks. However, if I now want to reset i to 1 every time so that new bubbles are spawned again after a certain time, this does not work. Or is it not at all possible to create a kind of loop with the for.

```auto
final int nbOfBubbles = 5;
final int blaseSize = 30;
float[] bubblesX;
float[] bubblesY;

void setup() {
 size(600, 600);
 
 bubblesX = new float[nbOfBubbles];
 bubblesY = new float[nbOfBubbles];
 
 for (int i = 0; i < nbOfBubbles; i++) {
   bubblesX[i] = random(0, 600);
   bubblesY[i] = random(400, 600);    
 }
}

void draw() {
 frameRate(60);
 background(#075BE8);
 strokeWeight(2.5); 
 stroke(100, 255, 255, 100);
 fill(150, 255, 255, 100);

 for (int i = 0; i < nbOfBubbles; i++) {
   ellipse(bubblesX[i], bubblesY[i], blaseSize, blaseSize);
   bubblesY[i]--;
     println(i);
while (i ==5){
i=1;
}
 }

 
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 18, 2022, 5:04pm UTC](https://discourse.processing.org/t/background-overwrites-mouseclicked-for-bubbles-fish-tank/39263/10 "2022-10-18T17:04:59Z")

</div>

here is an example with auto spawn (below the screen)  
and the bubbles grow…

- for wobble you need to invert the growing to shrinking and vice versa
- at the moment we add 0.1021; make this part of two new arrays bubblesXsizeAdd and bubblesYsizeAdd and say `bubblesXsizeAdd * -1` when then size `bubblesXsize` is too small or too big.

```auto

// display bubbles from arrays in an Aquarium 

final int nbOfBubbles = 1955; // crashes when currentnbOfBubbles is higher than nbOfBubbles 

//final int blaseSize = 30;

float[] bubblesX;
float[] bubblesY;
float[] bubblesXsize;
float[] bubblesYsize;

int currentnbOfBubbles=0;

void setup() {
  size(600, 600);

  // pre-init arrays
  bubblesX = new float[nbOfBubbles];
  bubblesY = new float[nbOfBubbles];

  bubblesXsize = new float[nbOfBubbles];
  bubblesYsize = new float[nbOfBubbles];

  frameRate(60);

  strokeWeight(2.5); 
  stroke(100, 255, 255, 100);
  fill(150, 255, 255, 100);
}

void draw() {
  background(#075BE8);

  // display bubbles from arrays 
  for (int i = 0; i < currentnbOfBubbles; i++) {

    ellipse(bubblesX[i], bubblesY[i], 
      bubblesXsize[i]+=0.1021, bubblesYsize[i]+=0.1021);

    bubblesY[i]--;
  }

  // spawn ?
  if (random(1)>0.28) {
    // spawn ! 
    currentnbOfBubbles++;

    bubblesX[currentnbOfBubbles-1] = random(0, width);
    bubblesY[currentnbOfBubbles-1] = random(height+10, height+300);

    bubblesXsize[currentnbOfBubbles-1] = random(10.3, 11.3);
    bubblesYsize[currentnbOfBubbles-1] = random(10.3, 11.3);
  }//if
}
//

```