Simulation of mouses moving, don't work

Question

I'm trying to create a simulation of 150 mouses moving inside a 20x20 grid in p5.js (A processing like libary). First I'm spawning 150 mouses random places and everything goes fine. But after I have spawned the mouses I am trying to make them move to one of their neighbors. Instead of moving to one of the neighbors and make the current square empty it stays on the one that it already was one + it moves to the next one so instead of having 150 mouses i suddenly have 300... I have tried changing the code for hours but I can't find the proplem... Here is my code:

var w = 40;
var grid = [];
var mouses = 10;
var mouseAmount = [];
var Mouse;
var current;



function setup() {
  createCanvas(800, 800);
  cols = floor(width/w)
  rows = floor(height/w)
  // frameRate(60);

  for (var j = 0; j < rows; j++) {
    for ( var i = 0; i < cols; i++) {
      var cell = new Cells(i,j);
      grid.push(cell);
    }
  }
  amount = new Amount;
}

function draw() {
  background(51);
  for ( var i = 0; i < grid.length; i++) {
    grid[i].show();
  }

  amount.run();

}

function index(i, j) {
  if (i < 0 || j < 0 ||  i > cols-1 || j > rows-1 ) {
    return -1;
  }
  return i + j * cols;
}


function Cells(i, j) {
  this.i = i;
  this.j = j;
  this.active = false;

  this.moveCell = function() {
    var neighbors = [];



    var top = grid[index(i, j -1)];
    var right = grid[index(i+1, j)];
    var bottom = grid[index(i, j+1)];
    var left = grid[index(i-1, j)];

    if (top) {
      neighbors.push(top)
    }

    if (right) {
      neighbors.push(right)
    }

    if (bottom) {
      neighbors.push(bottom)
    }

    if (left) {
      neighbors.push(left)
    }

    if(neighbors.length > 0) {
      var r = floor(random(0, neighbors.length));
      return neighbors[r];
    } else {
      return undefined;
    }

  }



  this.show = function() {
    var x = this.i*w;
    var y = this.j*w;
    stroke(255);
    noFill();
    rect(x,y,w,w);

    if(this.active == true) {
      fill(155, 0, 255, 100)
      rect(x, y, w, w)
    }

  }
}

function Amount() {
  this.run = function() {
    var r = floor(random(grid.length))
    for (var i = 0; i < mouses; i++) {
      var mouse = grid[r];
      mouseAmount.push(mouse)
    }


    if (mouseAmount.length < 1499) {
      for (var i = 0; i < mouseAmount.length; i++) {
        mouseAmount[i].active = true;
      }
    }
    if (mouseAmount.length > 1499) {
      Next();
    }
  }
}


function Next(i,j) {
  for (var i = 0; i < mouseAmount.length; i++) {
    current = mouseAmount[i];
    var nextCell = current.moveCell();
    if (nextCell) {
      nextCell.active = true;
      current.active = false;
      current = nextCell;
    }
  }
}

Thank you in advance :)

Answer 1

I don't really understand exactly what your code is supposed to do, but a few things stand out to me about your code:

Problem One: I don't understand how you're iterating through your grid array. You seem to be iterating over mouseAmount, which seems to hold random cells from the grid for some reason? That doesn't make a lot of sense to me. Why don't you just iterate over the grid array directly?

Problem Two: You then move the cells randomly to a neighbor, but you don't take into account whether the neighbor is already active or not. I'm not sure what you want to happen, but this seems a bit strange.

Problem Three: Usually with simulations like this, you have to copy the next generation into a new data structure instead of modifying the data structure as you step through it.

The biggest problem is that you haven't really explained what you want your code to do, or what this code does instead, or how those two things are different. But if I were you, I'd make the following changes:

Step One: Iterate over your grid array in a more reasonable way. Just iterate over every index and take the appropriate action for every cell. If I were you I would just use a 2D array and use a nested for loop to iterate over it.

Step Two: Make sure your logic for moving to a neighbor is correct. Do you want cells to move to already active cells?

Step Three: Make a copy of the grid before you modify it. Think about it this way: as you iterate over the grid, let's say you move a cell down one row. Then you continue iterating, you'll reach the newly active cell again. In other words, you'll touch the same active cell twice in one generation, which is definitely going to mess you up.

A word of advice: get this working for a single active cell first. It's really hard to tell what's going on since you have so many things going on at one time. Take a step back and make sure it works for one active cell before moving up to having a whole grid.