How can I make this collision detection possible?

Question

I'm using a number of boxes that are floating around the screen, I want for them to bounce away from each other when they collide and I am testing this by just changing their colours instead when they collide, for some reason their colour changes at the start(their starting colour is white and if they collide it should change to red but they start and stays red). Is there something I am doing wrong? I would also like for everything to be done within the constructor function. I am sorry for not commenting my code as yet.

  function BoxSplash()
{
    this.sample = [];
    var test = false;
    this.col = color(129)

    this.changeColour = function()
    {
        this.col = color(random(0,255),random(0,128),random(0,255))
    }

    this.intersect = function(other)
    {
     
        for(var i = 0; i < numberss; i++)
        {   var currentBox = this.sample[i]
            var d = dist(currentBox.x,currentBox.y,other.x,other.y)

            if(d < currentBox.width + other.width)
            {
                return true;
            }
            else
            {
                return false
            }
        }
        
        noLoop()
    }

    this.draw = function()
    {
        stroke(255)
        line(0,windowHeight/2,windowWidth,windowHeight/2)
        stroke(0)
            for(var i = 0; i < numberss; i++)
            {
                var box = {
                    x:random(0,windowWidth - 50),
                    y:random(windowHeight/2 ,windowHeight - 50),
                    width:50,
                    height:50,
                    speedX:random(1,5),
                    speedY:random(1,5)
                }
                this.sample.push(box)
                
            }
            //use numberss variable to work with gui
            for(var i = 0; i < numberss; i++)
             { 
                 fill(this.col)
                rect(this.sample[i].x,this.sample[i].y,50,50)
            }
        this.move()
            

    }
    this.move = function()
    {
        for(var i = 0; i < numberss; i++)
        {   
             var shape = this.sample[i]
            shape.x += shape.speedX
            shape.y += shape.speedY

            if(shape.x + shape.width >= windowWidth || shape.x <= 0 )
            {
                shape.speedX  = -shape.speedX
            }
            if(shape.y + shape.height >= windowHeight || shape.y <= windowHeight/2)
            {
                shape.speedY = -shape.speedY;
            }
            for(var j = 0; j < numberss; j++)
            {
                var others = this.sample[j]
                
                var d = dist(shape.x,shape.y,others.x,others.y)

                
                if( i != j && d < shape.width + others.width)
                {
                    test = true;
                }
                else
                {
                    test = false
                }
                
                if(test)
                {
                    this.col = color(255,0,0)
                }
            }
        }
       
        
    }
    
}

Answer 1

You should visit this link and transform their circles into your boxes.

1st: Calculate dist(object1.x, object.y, object2.x, object2.y) and save into a variable called d

2nd:

if (d < object1.h + object2.h) {
// Enter your code here
}