# How to make random bubbles falling down and fill up the screen without overlapping?

**URL:** <https://discourse.processing.org/t/how-to-make-random-bubbles-falling-down-and-fill-up-the-screen-without-overlapping/36606>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [April 26, 2022, 11:08am UTC](https://discourse.processing.org/t/how-to-make-random-bubbles-falling-down-and-fill-up-the-screen-without-overlapping/36606 "2022-04-26T11:08:16Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![hau4302](https://avatars.discourse-cdn.com/v4/letter/h/e480ec/32.png) [@hau4302](https://discourse.processing.org/u/hau4302)\
**Post date:** [April 26, 2022, 11:08am UTC](https://discourse.processing.org/t/how-to-make-random-bubbles-falling-down-and-fill-up-the-screen-without-overlapping/36606/1 "2022-04-26T11:08:16Z")

</div>

I can’t really figure out how to make the images display randomly in different bubbles and also how to make them not overlapping each other.  
Does anybody know what should I do to make these effects?

PImage bubble1;  
PImage bubble2;  
PImage bubble3;  
PImage bubble4;

int dotNum;  
float[] dotX;  
float[] dotY;

float[] velX;  
float[] velY;  
float wind = 0.3;  
float gravity = 0.1;  
float friction = 0.99;  
float yBoundary=1242-150;

float diameter= 300;  
float r = diameter/2;

void setup()

{  
size(2206,1242);  
background(0);  
noStroke();  
dotNum=15;

bubble1 = loadImage(“bubble1.png”);  
bubble2 = loadImage(“bubble2.png”);  
bubble3 = loadImage(“bubble3.png”);  
bubble4 = loadImage(“bubble4.png”);

dotX = new float[dotNum];

dotY = new float[dotNum];

velX = new float[dotNum];

velY = new float[dotNum];

for (int i=0; i\<dotNum; i=i+1)  
{  
dotX[i] = random(0, width);

```
dotY[i] = 0;

velX[i] = 0;

velY[i] = 0;

```

}

}

void draw()

{  
[//pg.beginDraw](https://pg.beginDraw)();

background(0);

for (int i=0; i\<dotNum; i=i+1)

{

```
move(i);

render(i);

boundaryCheck(i);

touchChecking(i);

}

```

}

void move(int i)

{

// equation:

// velocity = velocity + random\*acceleration

// new postion = current position + velocity

// velocity = velocity \* friction

float rX = random(0,1)-random(0,1); //-1 to 1

float rY = random(-0.6,1); // -0.6 to 1

velX[i] = velX[i] + rX\*wind;

velY[i] = velY[i] + rY\*gravity;

dotX[i] = dotX[i] + velX[i];

dotY[i] = dotY[i] + velY[i];

velX[i]=velX[i]\*friction;

velY[i]=velY[i]\*friction;

}

void render(int i)

{  
//display random bubbles

fill(250);

//ellipse(dotX[i], dotY[i], 300, 300);  
imageMode(CENTER);  
image(bubble1, dotX[i], dotY[i],300,300);

}

void boundaryCheck(int i)

{

if (dotX[i]\>width)

```
dotX[i] = width;

```

if (dotX[i]\<0)

```
dotX[i] = 0;

```

if (dotY[i]\>yBoundary) //keep position

dotY[i]=yBoundary;

}

void touchChecking(int i)  
{

}