var unitsize = 8;
var numCols = 40;
var numRows = 40;
var rs = [];

// max state
var n = 128;
// how much to increment states by after averaging
var g = 15;

var cols = ["#111"];

for (var i = 0; i <= n; i++) {
  cols.push("hsl("+ (0) +"," + (1) + "%," + (.066 * i) + "%)");
}

// Create an instance of Two.js
// two.js.org
var elem = document.getElementById('two');
var two = new Two({ width: (numCols * unitsize) + unitsize * .5, height: (numRows * unitsize) + unitsize * .5 }).appendTo(elem);

var arrLen = numRows * numCols;

// neighbor-finding functions
function ne(i, top, right) {
  if (top && right) {
    return rs[arrLen - numCols];
  } else if (top) {
    return rs[i + 1 + ((numRows - 1) * numCols)];
  } else if (right) {
    return rs[i - (numCols * 2) + 1];
  } else {
    return rs[i - numCols + 1];
  }
}

function nw(i, top, left) {
  if (top && left) {
    return rs[arrLen - 1];
  } else if (top) {
    return rs[((numRows - 1) * numCols) + i - 1];
  } else if (left) {
    return rs[i - 1];
  } else {
    return rs[i - numCols - 1];
  }
}

function se(i, bottom, right) {
  if (bottom && right) {
    return rs[0];
  } else if (bottom) {
    return rs[i - (numCols * (numRows - 1)) + 1];
  } else if (right) {
    return rs[i + 1];
  } else {
    return rs[i + numCols + 1];
  }
}

function sw(i, bottom, left) {
  if (bottom && left) {
    return rs[numCols -1];
  } else if (bottom) {
    return rs[i - ((numRows - 1) * numCols) - 1];
  } else if (left) {
    return rs[i+ (2 * numCols) - 1];
  } else {
    return rs[i + numCols - 1];
  }
}

// Constructor for each square in the grid
function Pt(x, y, unitsize, i) {
  // Initial setup for each square
  this.setup = () => {
    this.r = two.makeRectangle(x, y, unitsize, unitsize);
    this.x = x;
    this.y = y;
    this.isTop = (this.y - (.5 * unitsize)  == 0);
    this.isBot = (this.y == (unitsize * numRows) - (.5 * unitsize));
    this.isLef = (this.x == 0 + (.5 * unitsize));
    this.isRig = (this.x == (unitsize * numCols) - (.5 * unitsize));
    // Random initial state for each square
    this.state = Math.random() > .75 ? 0 : Math.floor(Math.random() * n);
    this.sickNeighbors = 0;
    this.r.noStroke();
  }
    
  this.setup();

  // Store the 8 neighbors of each cell
  this.findNeighbors = () => {
    this.n = this.isTop ? rs[i + arrLen - numCols] : rs[i - numCols];
    this.s = this.isBot ? rs[i - arrLen + numCols] : rs[i + numCols];
    this.e = this.isRig ? rs[i - numCols + 1] : rs[i + 1];
    this.w = this.isLef ? rs[i + numCols - 1] : rs[i - 1];
    this.ne = ne(i, this.isTop, this.isRig);
    this.nw = nw(i, this.isTop, this.isLef);
    this.se = se(i, this.isBot, this.isRig);
    this.sw = sw(i, this.isBot, this.isLef);
  }

  // Find the average state for the neighborhood (this square + the 8 around it)
  this.avg = () => {
    return (this.state + this.n.state + this.ne.state + this.e.state + this.se.state + this.s.state + this.sw.state + this.w.state + this.nw.state) / 9;
  }

  // Find the number of neighboring squares with a state > 0
  this.findSickNeighbors = () => {
    [this.n.state, this.s.state, this.e.state, this.w.state, this.nw.state, this.ne.state, this.se.state, this.sw.state].forEach((st) => {
      if (st > 0) {
        this.sickNeighbors += 1;
      }
    });
  }
}

// fill the array of points
for (var y = 0; y < numCols; y++) {
  for (var x = 0; x < numRows; x++) {
    rs.push(new Pt(unitsize * x + (.5 * unitsize), unitsize * y + (.5 * unitsize), unitsize, rs.length));
  }
}

// generate neighbors for each square
for (var i = 0; i < rs.length; i++ ) {
  rs[i].findNeighbors();
}

// The animation loop
two.bind('update', function(frameCount, timeDelta) {

  // Determine what the next state will be for each square
  for (var i = 0, l = rs.length; i < l; i++) {
    // If it's currently 0,
    if (rs[i].state == 0) {
      rs[i].findSickNeighbors();
      // And there are at least 3 neighbors with a state > 0,
      if (rs[i].sickNeighbors >= 3) {
        // Set the state to a random, low-ish number
        rs[i].nextState = Math.floor(Math.random() * 10) + 10;
      } else {
        // otherwise, keep the state at 0
        rs[i].nextState = 0;
      }
    // If the state is the max state,    
    } else if (rs[i].state == n) {
      // Make it 0
      rs[i].nextState = 0;
    // If the state is in between,
    } else if (rs[i].state > 0 && rs[i].state < n) {
      let result = rs[i].avg() + g;
      // And the average neighborhood state + a constant is less than the current state,
      if (result <= n) {
        // Make that the new state
        rs[i].nextState = Math.floor(result);
      } else {
        // Otherwise, it's bigger than the max state, so round down to the max state
        rs[i].nextState = n;
      }
    }
  }

  // Set each square's state to it's next state
  // and reset the neighbor count
  for (var i = 0, l = rs.length; i < l; i++) {
    rs[i].state = rs[i].nextState;
    rs[i].sickNeighbors = 0;
  }

  // Finally, add color
  for (var i = 0, l = rs.length; i < l; i++) {
    rs[i].r.fill = cols[rs[i].state];
  }
});

// Throttle framerate to 20FPS (Two.js tries to go at 60fps)
window.setInterval(()=> {
  two.update();
}, 50);