Не допускать, чтобы объекты пересекались

Question

Я пробовал много способов, чтобы мои объекты не попадали друг в друга и не застревали.

Прямо сейчас я использую таймер, и он не работает должным образом. Я видел несколько похожих вопросов, есть математические уравнения и т. Д., Которые я пытался использовать, но я просто не могу заставить его работать должным образом

Это мой код Я прокомментировал несколько вещей, в которых я пытался разными способами делать то, что я хочу, но ни одна из них не сработала.

Кроме того, мои ячейки меняют изображения несколько раз, когда они соприкасаются друг с другом, когда я хочу, чтобы они менялись только один раз.

Как я могу это исправить?

function preload ()
{
    Cellimg = loadImage("Bloodcell.png");
    //Cellimg.style.width = '50%'
    Virusimg = loadImage("Virus.png");
    Antibodyimg = loadImage("virus_3.png");
}


function Cell(x, y, id, cellType)   
{
    var hit;
    // Set starting point of cell
    // The centre of the screen
    this.x = x;
    this.y = y;
    this.id = id;
    var angle = 0;
    this.cellType = cellType;
    var collision = false;
    var cellimg;
    var readyWasCalled = false;

    // Set the velocity of the cell
    this.xVel = 5;
    this.yVel = -5;

    this.intersects = function(other)
    {
        var d = dist(this.x,this,y,other.x,other.y);
        if (d < 100)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
    this.readyToHit = function()
    {
        print("ready");
        hit = false;
        readyWasCalled = false;
    }

    // The following is a method, a function within a constructor
    this.show = function() 
    {
        {
            push();
            translate(this.x, this.y);
            rotate(radians(angle));
            if (this.cellType == 0) // normal cell
            {
                //rect(-50,-50,100,100);
                image(Cellimg,-100,-100,200,200);
                angle++;
            }
            else if (this.cellType == 1) // virus cell
            {
                image(Virusimg,-100,-100);
                angle--;
            }

            else if (this.cellType == 2) //antibodi cell
            {
                angle++;
                image(Antibodyimg,-100,-100);
                //line(50, -50, -50,50);
            }

            pop();

        }

    }

    this.update = function() 
    {
        this.x += this.xVel;
        this.y += this.yVel;

        for (i = popcount; i < cells.length; i++) 
        {
            if (i != this.id) 
            {


                var distance = dist(this.x, this.y, cells[i].x, cells[i].y);
                // if(dist(this.x, this.y, cells[i].x, cells[i].y) <= 100 && !this.collision && !cells[i].collision) // There is a collision between two balls
                if (distance < 150 && !hit)
                    //if (this.intersects(balls[i]))
                {
                    hit = true;
                    if (!readyWasCalled)
                    {
                        readyWasCalled = true;
                        setTimeout(this.readyToHit, 2000);
                        setTimeout(cells[i].readyToHit, 2000);
                    }

                    //this.collision = true;
                    //cells[i].collision = true;
                    //this.setTimeout(readyToHit, 100);
                    //cells[i].setTimeout(readyToHit, 100);


                    this.xVel *= -1;
                    this.yvel *= -1;
                    cells[i].xVel *= -1;
                    cells[i].yVel *= -1;


                    /*                              var dx = this.x - cells[i].x;
                var dy = this.y - cells[i].y;

                var L = Math.sqrt(dx*dx + dy * dy);

                var step = 100 + 100 - L;

                if (step > 0)
                {

                                            dx /= L; dy /= L;

                        this.x -= dx*step/2; this.y -= dy*step/2;
                        cells[i].x += dx*step/2; cells[i].y += dy*step/2;


                }*/

                    if (this.cellType == 0 && cells[i].cellType == 0)
                    {
                        this.cellType = 1;
                        cells[i].cellType = 1;
                    }

                    else if (this.cellType == 1 && cells[i].cellType == 1)
                    {
                        this.cellType = 2;
                        cells[i].cellType = 2;
                    }

                    else if (this.cellType == 2 && cells[i].cellType == 2)
                    {
                        this.cellType = 0;
                        cells[i].cellType = 0;
                    }

                    else if (this.cellType == 0 && cells[i].cellType == 1)
                    {
                        this.cellType = 1;
                    }

                    else if (this.cellType == 1 && cells[i].cellType == 2)
                    {
                        this.cellType = 0;
                    }
                    /*var c1 = new PVector(this.x-cell[i].x, this.y-cell[i].y);
      c1.normalize();
                var buffer = abs(distance-(100+100/2));

                this.x -= buffer*c1.x;
                this.y -= buffer*c1.y;
                cells[i] -= buffer*c1.y;
                cells[i] -= buffer*c1.y;*/
                }
                //else
                //  this.collision = false;
                //  cells[i].collision = false;

            }
        }
        // check distance from walls and reverse direction if too close
        if ((this.x - 50) <= 0 || (this.x + 50) >= width) 
        {
            this.xVel = this.xVel * -1
        } 
        if ((this.y - 50) <= 0 || (this.y + 50) >= height) 
        {
            this.yVel = this.yVel * -1
        }
    }
}

var cells=[];
var popcount = 0;
var cellid = 0;

function setup() 
{
    createCanvas(windowWidth, windowHeight);
} 

function mousePressed() 
{

    cells.push(new Cell(mouseX, mouseY, cellid, Math.floor(Math.random() * 3)))
    cellid++
    if (cells.length > 50) 
    {
        cells.pop[popcount]
        popcount++
    }
}


function draw() 
{
    background(15,0,0);
    for (var i = popcount; i < cells.length; i++) 
    {
        cells[i].show()
        cells[i].update()
    }
}