<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <canvas id='canvas' width='320' height='320'></canvas>
  </body>

</html>
// Code goes here
var c, ctx;
document.addEventListener("DOMContentLoaded", function() {
  c = document.getElementById('canvas');
  ctx = c.getContext('2d');
  
  
  fillRandom();
  
  requestAnimationFrame(doLife);

});

function randomColor(){
  return 'rgba(' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ',' + Math.floor(Math.random()*256) + ',1)';
}

function fillRandom(){
  for(var i=0; i<320; i++){
    for(var j=0; j<320; j++){
      ctx.fillStyle = randomColor();
      ctx.fillRect(i,j,1,1);
    }
  }
}

function doLife(){
  var imageData = ctx.getImageData(0,0,320,320);
  // console.log(imageData);
  var canvas = document.createElement('canvas');
  var newData = canvas.getContext('2d').createImageData(320,320);
  for(var x=0; x<imageData.width; x++){
    for(var y=0; y<imageData.height; y++){
      var alive = isAlive(x,y,imageData);
      var aliveNeighbors = numAliveNeighbors(x,y,imageData);
      if(alive && (aliveNeighbors < 2 || aliveNeighbors > 3)){
        color = manCell(x,y,false,imageData);
      } else if(!alive && aliveNeighbors == 3){
        color = manCell(x,y,true,imageData);
      } else {
        color = getColor(x,y,imageData);
      }
      // console.log(color);
      setColor(x,y,newData,color);
    }
  }
  ctx.putImageData(newData,0,0);
  requestAnimationFrame(doLife);
}

function isAlive(x,y, imageData){
  return imageData.data[y*imageData.width*4 + x*4 + 0] >= 130;
}

function numAliveNeighbors(x,y,imageData){
  var numAlive = 0;
  for(var i=-1; i<=1; i++){
    for(var j=-1; j<=1; j++){
      if(j===0 && i===0) continue;
      var newX = x+i;
      var newY = y+j;
      if(newX >=0 && newY >=0 && newX <imageData.width && newY < imageData.height && isAlive(newX, newY, imageData)){
        numAlive++;
      }
    }
  }
  return numAlive;
}

function getColor(x,y,imageData){
  return [
    imageData.data[y*imageData.width*4 + x*4],
    imageData.data[y*imageData.width*4 + x*4 + 1],
    imageData.data[y*imageData.width*4 + x*4 + 2],
    imageData.data[y*imageData.width*4 + x*4 + 3]
  ];
}

function setColor(x,y,imageData,color){
  imageData.data[y*imageData.width*4 + x*4] = color[0];
  imageData.data[y*imageData.width*4 + x*4 + 1] = color[1];
  imageData.data[y*imageData.width*4 + x*4 + 2] = color[2];
  imageData.data[y*imageData.width*4 + x*4 + 3] = color[3];
}

function manCell(x, y, alive, imageData){
  var colors = [];
  for(var i=-1; i<=1; i++){
    for(var j=-1; j<=1; j++){
      if(j===0 && i===0) continue;
      var newX = x+i;
      var newY = y+j;
      if(newX >= 0 && newY >=0 && newX < imageData.width && newY < imageData.height){
        var aliveCheck = isAlive(newX,newY,imageData);
        if(alive && aliveCheck || !alive && !aliveCheck){
          colors.push(getColor(newX,newY,imageData));
        }
      }
    }
  }
  if(colors.length > 0){
    return colors[Math.floor(Math.random()*colors.length)*0];
  }
  // console.log('huh...',x,y,alive, isAlive(x,y,imageData));
  return invert(getColor(x,y,imageData));
  return [Math.floor(Math.random()*256),Math.floor(Math.random()*256),Math.floor(Math.random()*256),Math.floor(Math.random()*256)];
}

function invert(color){
  return [255-color[0], 255-color[1], 255-color[2], 255];
}
/* Styles go here */

canvas {
  width:500px;
  height: 500px;
}