Bounce Ball Inside A Square

Processing Coding Questions
1

Hi! I am trying to create a black square instead of the black circle in this code.
The point is to have the white little ball inside the square, in movement. And all the others black little circles should move outside the square and when they hit it, they should bounce back and they do with the black circle.
But I’ve been having troubles with these, it doesn’t work well.
Can somebody help me with this?



//Circles

//circle 1 - white one in movement 
float pos1X=random (300,500);
float pos1Y=random (300,500);
float vel1X=random (-3,3);
float vel1Y=random (-3,3);
float size1= random (20,50);

//circle2
float pos2X=random (100,200);
float pos2Y=random (100,200);
float vel2X=random (-3,3);
float vel2Y=random (-3,3);
float size2= random(20,50);

//circle5 
float pos4X=random (100,200);
float pos4Y=random (100,200);
float vel4X=random (-3,3);
float vel4Y=random (-3,3);
float size4= random(20,50);

//circle5
float pos5X=random (100,200);
float pos5Y=random (100,200);
float vel5X=random (-3,3);
float vel5Y=random (-3,3);
float size5= random(20,50);

//circle 6 
float pos6X=random (100,200);
float pos6Y=random (100,200);
float vel6X=random (-3,3);
float vel6Y=random (-3,3);
float size6= random(20,50);

//circle -  want this to became a square
float pos3X= 400;
float pos3Y=400;
float size3= (400);

float distance=0;

void setup () {
  
  size (800,800);
  
  
}
  
  void draw () {
    
    background (255,255,255);
    
  
  
    //3
   fill (0);
   ellipse (pos3X,pos3Y, size3,size3);
   stroke (255);
   //line (pos1X,pos1Y,pos3X,pos3Y);
   stroke (255);
   //line (pos2X, pos2Y, pos3X,pos3Y);
   
   
   //1
   fill (255);
   ellipse (pos1X,pos1Y,size1,size1);
   //fill (255);
   //ellipse (pos3X,pos3Y,10,10);
   pos1X=pos1X+vel1X;
   pos1Y=pos1Y+vel1Y;
   
   if(dist(pos1X,pos1Y,pos3X,pos3Y)>(size3-size1)/2){
     vel1X=-vel1X+random(-0.5,0.5);
     vel1Y=-vel1Y+random(-0.5,0.5);
   }
     
     
 
   //2
   fill (#CB172C);
   ellipse (pos2X,pos2Y, size2,size2);
   pos2X=pos2X+vel2X;
   pos2Y=pos2Y+vel2Y;
if (pos2X<(size2/2)||pos2X>width-size2/2) vel2X=-vel2X+random(-1,1);
if (pos2Y<(size2/2)||pos2Y>height-size2/2) vel2Y=-vel2Y+random(-1,1);
    
    if (dist(pos2X,pos2Y, pos3X, pos3Y)<(size3+size2)/2){
      vel2X=-vel2X;
      vel2Y=-vel2Y;

   }


   //4
   fill (#CB172C);
   ellipse (pos4X,pos4Y, size4,size4);
   pos4X=pos4X+vel4X;
   pos4Y=pos4Y+vel4Y;
if (pos4X<(size4/2)||pos4X>width-size2/2) vel4X=-vel4X+random(-1,1);
if (pos4Y<(size4/2)||pos4Y>height-size2/2) vel4Y=-vel4Y+random(-1,1);
    
    if (dist(pos4X,pos4Y, pos3X, pos3Y)<(size3+size4)/2){
      vel4X=-vel4X;
      vel4Y=-vel4Y;

   }
   
    //5
   fill (#CB172C);
   ellipse (pos5X,pos5Y, size5,size5);
   pos5X=pos5X+vel5X;
   pos5Y=pos5Y+vel5Y;
if (pos5X<(size5/2)||pos5X>width-size2/2) vel5X=-vel5X+random(-1,1);
if (pos5Y<(size5/2)||pos5Y>height-size2/2) vel5Y=-vel5Y+random(-1,1);
    
    if (dist(pos5X,pos5Y, pos3X, pos3Y)<(size3+size5)/2){
      vel5X=-vel5X;
      vel5Y=-vel5Y;

   }
   
 //6
   fill (#CB172C);
   ellipse (pos6X,pos6Y, size6,size6);
   pos6X=pos6X+vel6X;
   pos6Y=pos6Y+vel6Y;
if (pos6X<(size6/2)||pos6X>width-size2/2) vel6X=-vel6X+random(-1,1);
if (pos6Y<(size6/2)||pos6Y>height-size2/2) vel6Y=-vel6Y+random(-1,1);
    
    if (dist(pos6X,pos6Y, pos3X, pos3Y)<(size3+size6)/2){
      vel6X=-vel6X;
      vel6Y=-vel6Y;

   }
}