Matrice et recursion

bonsoir,
enfaite j'etait entrain de travailler sur javascript sur un projet d'etude et du coup j'ai rencontré un probleme que j'arrive pas a surmonter depuis deux jours. mon probleme j'ai travailler sur le recursion et du coup voila aujourd'hui je suis amener a faire un projet la dessus.
donc c'est je veux ce que j'ai une matrice composé de carré , du coup chaque case contient un nombre entier et du coup lorsque ce nombre depasse le trois, je veux ajouter de un a ses voisins et lui je doit retrancher de trois. plus precisement chaque il a quatre voisins(comme c'est un carré il ne peut y avoir plus).
donc j'ai proposé ce code mais ca produits rien.
voici la methode qui permet d'initialiser aleatoirement les case:

function random_grid_grain(alea){
    for (var i = 0; i<taille1;i=i+1) {
        grid[i] = [];
        for (var j = 0; j < taille2 ; j = j+1) {
        grid[i][j]=alea;
        }
    }
    return grid;
}

et voila le code que j'ai mit en place et qui me pose probleme

$("#step").on("click",function(){
    
    matrice = random_grid_grain(alea);
    
    for(var i = 0 ; i < matrice.length ; i ++){
        matrice[i]=[];
        for (var j = 0; j < matrice.length; j++) {
            if(matrice[i][j]>3){
                matrice[i][j] -=3;
                matrice[i-1][j]++;
                 matrice[i][j+1]++;
                 matrice[i+1][j]++;
                 matrice[i][j-1]++;
            update_grid(matrice,colors);
            }
        }
    }
   
});

et enfin la methode update_grid

function draw_grid(data, colors,taille1,taille2) {
    var color_obj = {};
    for (var i = 0; i < colors.length; i+=2) {
        color_obj[colors[i]] = colors[i+1]; 
    }
    var width = taille1;
    var height = taille2;
    var grid_length = data.length;
    var width_cell = width/grid_length;
    var height_cell = width/grid_length;

    var canvas = document.getElementById("grid")
    if (canvas == null) {
        canvas = document.createElement('canvas');
        canvas.id = "grid";
        canvas.width = 600;
        canvas.height = 600;

        document.getElementsByTagName('body')[0].appendChild(canvas);

    }
     var context = canvas.getContext("2d");
   
    function draw_cells(){
        for (var i = 0; i < grid_length; i++) {
            for (var j = 0; j < grid_length; j++) {
                if (_data && _data[i][j] === data[i][j]) {
                    continue;
                } 
                context.fillStyle = color_obj[data[i][j]];
                context.fillRect(i*width_cell, j*height_cell, width_cell, height_cell);
            }
        }
    }
    draw_cells();
    if (!_data) {
        _data = [];
    }
    for (var i = 0; i < grid_length; i++) {
        _data[i] = data[i].slice();
    }
}


function update_grid(data,colors) {
    draw_grid(data, colors,taille1,taille2);
}        

s'il en y a quelqu'un m'a compris je voudrait une aide ou une suggestion de votre part merci d'avance.