Aide similation biologique (js + html)

Bonjour,
Je viens vers vous car j'ai un leger problème pour sauvegardés mes données, je m'explique, j'ai un programme a faire qui permet de simuler un processus biologique : dans une cellule j'ai des neurotransmetteur libre et lorsque que la simulation debute, ces derniers sont alors mobile, et lorsqu'il touchent un recepteur sur la membrane, ce dernier est activé, change alors de forme et de couleur et "s'envole" . (vous comprendrez peut etre mieux en executant mon code, c'est assez compliqué a expliqué, mais très simple a comprendre)
Il faut donc que mon programme me permette de sauvegardés les donnés, entre autre le nombre de recepteur activés, donnés par la fonction verif_rec, toute les x secondes, j'ai donc utiliser setInterval mais cela ne fonctionne pas (ce n'est pas dans mon code afin de vous montrer l'utiliter du programme), sauriez vous comment je pourrais faire ? car mon programme ne veut absolument pas stocker mes données toutes les x secondes et les sauvegarder sur un fichier texte. Je sais qu'il ne s'agit que d'ajouter quelques ligne, mais je bloque complet..
. En espérant que vous puissiez m'aider
Voici mon code javascript

// setup canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width;
const height = canvas.height;
// function to generate random number
const hauteur_cell=400;
const largeur_cell=1000;
const x_cell=220;
const y_cell=120;

let neuro_reel=0
let rec_reel=0
var receptors=[];
let neuros = [];
let neuro_number = random(20,30);
let receptors_number = random(12,18);
let data=[];
let nbr_nt=neuro_number;
let carre=40;

//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(x_cell, y_cell, largeur_cell, hauteur_cell);
    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;
}

function aide(a){
  data.push(a);
  console.log(data);
}

function verif_rec(){
  var tot = 0;
  for(var i = 0; i < receptors.length; i++){
    if(receptors[i].etat==="activated"){
      tot++;
      data.push(tot);

     
    }
  }
  return tot;

}

//classe des Recepteur
class Receptor {

  constructor(x, y,largeur,hauteur,color,velX,velY,etat){
    this.x = x;// x
    this.y = y;//y
    this.largeur = largeur;//longueur
    this.hauteur = hauteur;//largeur
    this.color=color;
    this.velX = velX;;
    this.velY = velY;
    this.etat="desactivated";
    
  }

  update() {
    this.x += this.velX;
    this.y += this.velY;
 }

  //fonction qui dessine le recepteur
  drawR() {
    ctx.beginPath();
    ctx.rect(this.x,this.y,this.largeur,this.hauteur);
    ctx.fillStyle = this.color;
    ctx.fill();
    
  }
}


class NeuroT {

  constructor(x, y, velX, velY, color, size,etat) {
     this.x = x;
     this.y = y;
     this.velX = velX;
     this.velY = velY;
     this.color = color;
     this.size = size;
     this.etat="actif"

  }

  draw() {
     ctx.beginPath();
     ctx.fillStyle = this.color;
     ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
     ctx.fill();
  }

  collision(receptors){
    for(var i = 0; i < receptors.length; i++){
      if((this.etat==="actif" && receptors[i].etat==="desactivated" && this.x > receptors[i].x && this.x < (receptors[i].x + receptors[i].largeur)) && (this.y > receptors[i].y && this.y < (receptors[i].y + receptors[i].hauteur))){
          receptors[i].velX = this.velX;
          receptors[i].velY = this.velY;
          receptors[i].color = "green";
          this.etat="inactif"
          receptors[i].etat="activated"
          this.size = 0;
          receptors[i].largeur=60;

      }
    }
  }

  update() {
    this.x += this.velX;
    this.y += this.velY
  }



}




 
function init(){

  neuros=[];
  receptors=[]
  while (neuros.length < neuro_number) {
    let vitesse=0.3;
  
    
  
    
    let neuro = new NeuroT(
       random(x_cell+20,x_cell+largeur_cell-20),
       random(y_cell+20, y_cell+hauteur_cell-20),
       -(vitesse),
       vitesse,
       "orange",
       10
    );
  
    let neuro2 = new NeuroT(
      random(x_cell+20,x_cell+largeur_cell-20),
      random(y_cell+20, y_cell+hauteur_cell-20),
      -(vitesse),
      -(vitesse),
      "orange",
      10
   );
  
   let neuro3 = new NeuroT(
    random(x_cell+20,x_cell+largeur_cell-20),
    random(y_cell+20, y_cell+hauteur_cell-20),
    (vitesse),
    -(vitesse),
    "orange",
    10
  );
  
  let neuro4 = new NeuroT(
    random(x_cell+20,x_cell+largeur_cell-20),
    random(y_cell+20, y_cell+hauteur_cell-20),
    (vitesse),
    (vitesse),
    "orange",
    10
  );
  
  
   neuros.push(neuro);
   neuros.push(neuro2);
   neuros.push(neuro3);
   neuros.push(neuro4);
  }
  while(receptors.length<receptors_number){
    carre+=carre;
    let droite = x_cell - (random(20,50)/2);
    let gauche = (x_cell+largeur_cell) - (random(20,50)/2);
    let haut = y_cell - (random(20,50)/2);
    let bas = (y_cell+hauteur_cell)-(random(20,50)/2);
    
    let r1 = new Receptor (
      random(droite,gauche),
      haut,
     40,40,
     "RoyalBlue",
     0,0
    );
  
    let r2 = new Receptor (
      random(droite,gauche),
      bas,
      40,40,
      "RoyalBlue",
      0,0
     );
     let r3 = new Receptor (
      droite,
      random(haut,bas),
      40,40,
      "RoyalBlue",
      0,0
     );
  
     let r4 = new Receptor (
      gauche,
      random(haut,bas),
      40,40,
      "RoyalBlue",
      0,0
     );
  
  
  
  
     
    receptors.push(r1);
    receptors.push(r2);
    receptors.push(r3);
    receptors.push(r4);
  }
  loop();

}


  
function loop() {  
  ctx.fillStyle = 'rgba(205, 173, 126, 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].collision(receptors);
    var nbr_rec_act = verif_rec();
  }

  for(let j=0; j<receptors.length;j++){
    receptors[j].drawR();
    receptors[j].update();
  }
  //setInterval(verif_rec,3000);
  document.getElementById("rec_act" ).innerHTML =("+ Nombre de récepteur qui ont été activés est de : " + nbr_rec_act);  
  document.getElementById("rec_no_act" ).innerHTML =("+ Nombre de récepteur total est de : " + receptors.length);
  document.getElementById("nt_libre" ).innerHTML =("+ Nombre de neurotransmetteur libre est de : " + (neuros.length-nbr_rec_act));
  document.getElementById("nt_lier" ).innerHTML =("+ Nombre de neurotransmetteur liées est de : " + neuros.length);

  //console.log(data);
  requestAnimationFrame(loop);

}
ctx.fillStyle = 'rgba(205, 173, 126, 0.25)';
membrane();

et mon code HTML :

<!DOCTYPE html>
<html lang="fr">

    <head>
        <title>Processus biologique</title>
        <meta charset="utf-8" />
        <meta name="description" content="Modélisation d’un processus biologique simplifié sur une page web" /> 
        <link rel="stylesheet" href="processus_biologique.css" />
    </head>
    <body>
        <h1>Modélisation d’un processus biologique simplifié sur une page web</h1>
        <h2>Sujet n°6</h2>
        <canvas width="1600" height="600"></canvas>
        <button id="start" onclick="setTimeout(init(), 500);">Start</button>
        <p id="rec_act"></p>
        <p id="rec_no_act"></p>
        <p id="nt_libre"></p>
        <p id="nt_lier"></p>

        
        <script src="processus_biologique2.js"></script>
    </body>
</html>