Simulation info biologique / js

Bonjour,

J'ai besoin d'une ame charitable pour me conseiller !!
Alors voilà : j'ai un projet a faire, dans lequel je dois modélisation un processus biologique simplifié sur une page HTML, avec javascript, dans lequel au départ, , dans une membrane plasmique, toutes les molécules de neurotransmetteurs et de récepteurs fermés sont affichées à l’écran. Leur nombre et positions sont aléatoires, et les neurotransmetteur, lorsqu'il touche un recepteur, fusionne avec ce dernier pour former un autre type de recepteur. Jusque là, tout va bien. J'ai fais 2 objet : neurotransmetteur et recepteur.
Mais je dois également placer les recepteur (grace a une boucle while) sur chaque coté de la membrane (rec1 rec2 rec3 rec4) de manière a ce qu'il ne se chevauche pas, mais je ne vois absolument pas comment faire, j'ai essayé de rajouter 40 (longueur des recepteur) a chaque itération afin que la position augmente et donc qu'elle ne soit pas la même, mais cela n'a pas fonctionné.
Pourriez-vous me donner une piste/idée ??
Voici mon code :

// setup canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
// function to generate random number
const mbh=200;
const mbw=400;
const mbx=120;
const mby=220;

//fonction qui dessine le contour de la membrane
function Membrane(){
    ctx.fillStyle = "black";
    ctx.fillText("Espace pré- synaptique", 10, 200); 
    ctx.fillText("Espace post- synaptique", 200, 350); 
    ctx.beginPath();
    ctx.lineWidth = "5";
    ctx.strokeStyle = "black";
    ctx.rect(mbx, mby, mbw, mbh);
    ctx.stroke();
}

//fonction qui renvoie un nombre random entre 2 valeurs
function random(min,max) {
   const num = Math.floor(Math.random()*(max-min)) + min;
   return num;
}

//classe des Recepteur
class Receptor {

  constructor(xr, yr,w,h,color,velXr,velYr){
    this.xr = xr;// x
    this.yr = yr;//y
    this.w = w;//longueur
    this.h = h;//largeur
    this.color=color;
    this.velX = 0;
    this.velY = 0;
  }

  update() {
    this.xr += this.velX;
    this.yr += this.velY;
 }

  //fonction qui dessine le recepteur
  drawR() {
    ctx.beginPath();
    ctx.rect(this.xr,this.yr,this.w,this.h);
    ctx.fillStyle = this.color;
    ctx.fill();
  }
}


class NeuroT {

  constructor(x, y, velX, velY, color, size) {
     this.x = x;
     this.y = y;
     this.velX = velX;
     this.velY = velY;
     this.color = color;
     this.size = size;
     this.switch = false;
     this.switchw = 0;
     this.switchh = 0;
  }

  draw() {
     ctx.beginPath();
     ctx.fillStyle = this.color;
     if(!this.switch)
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
     else
        ctx.rect(this.x, this.y, this.switchw, this.switchh);
     ctx.fill();
  }

  collide(receptors){
    for(var i = 0; i < receptors.length; i++){
      if((this.x > receptors[i].xr && this.x < (receptors[i].xr + receptors[i].w)) && (this.y > receptors[i].yr && this.y < (receptors[i].yr + receptors[i].h))){
          receptors[i].velX = this.velX;
          receptors[i].velY = this.velY;
          receptors[i].color = "green";
          this.size = 0;
      }
    }
  }
  update() {
    this.x += this.velX;
    this.y += this.velY;
 }


}

var receptors=[];
var neuros = [];
let neuro_number = random(20,30);
let receptors_number = random(12,18);


while (neuros.length < neuro_number) {
  let neuro = new NeuroT(
     (mbx+(mbx+mbw))/2,
     (mbh+(mbh+mbh))/2,
     random(-3,3),
     random(-3,3),
     "orange",
     10
  );

 neuros.push(neuro);
}

while(receptors.length<receptors_number){
  //on fait 4 types de recepteur pour chaque cote de la membrane
  let d = mbx - (40/2);
  let g = (mbx+mbw) - (40/2);
  let h = mby - (40/2);
  let b = (mby+mbh)-(40/2);
  let rec = new Receptor (
    random(d,g),
    h,
   40,40,
   "RoyalBlue",
   0,0
  );

  let rec1 = new Receptor (
    random(d,g),
    b,
    40,40,
    "RoyalBlue",
    0,0
   );
   let rec2 = new Receptor (
    d,
    random(h,b),
    40,40,
    "RoyalBlue",
    0,0
   );

   let rec3 = new Receptor (
    g,
    random(h,b),
    40,40,
    "RoyalBlue",
    0,0
   );

   h+=40;
   d+=40;
   b+=40;
   g+=40;


   
  receptors.push(rec);
  receptors.push(rec1);
  receptors.push(rec2);
  receptors.push(rec3);
}





function loop() {
  ctx.fillStyle = 'rgba(255, 255, 255, 0.25';
  ctx.fillRect(0, 0, width, height);
  Membrane();

  for (let i = 0; i < neuros.length; i++) {
    neuros[i].draw();
    neuros[i].update();
    neuros[i].collide(receptors);
  }
  for(let j=0; j<receptors.length;j++){
    receptors[j].drawR();
    receptors[j].update();
  }
  requestAnimationFrame(loop);
}

loop();

En esperant que vous puissiez m'aider !
Je vous remercie :)