Background overwrites mouseClicked for bubbles (Fish tank)

Processing Coding Questions
1

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.

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);
     }
   }
2

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.

3 Likes
3

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

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]--;
     }
   }
1 Like
4

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.

// 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

1 Like
5

Better

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

2 Likes
6

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

2 Likes
7

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.

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--;  
}
     }
8

Hi,

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

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:

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:

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]--;
 }
}
1 Like
9

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.

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;
}
 }

 
}
1 Like
10

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.

// 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
}
//
1 Like