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

Processing Beginners
1

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();

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)
{

}