var cells = []; // This means array!
var w = 10;
var cols, rows;

function setup() {

  createCanvas(200, 200);
  cols = width / w; //so code doesn't redraw itself
  rows = height / w;
  createGrid();

  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      cells[i][j].display();
    }
  }
}


function createGrid() {

  for (var i = 0; i < cols; i++) {

    cells[i] = [];

    for (var j = 0; j < rows; j++) {

      cells[i][j] = {
        x: i * w,
        y: j * w,
        w: w,
        h: w,
        dir: floor(random(4)),

        display: function() {
          fill(255);
          rect(this.x, this.y, this.w, this.h);

          if (this.dir == 1) {

            line(this.x, this.y, this.x + 10, this.y + 10);

          } else if (this.dir == 2) {

            line(this.x + 10, this.y, this.x, this.y + 10);

          } else if (this.dir == 3) {

            line(this.x + 10, this.y, this.x, this.y + 10);
            line(this.x, this.y, this.x + 10, this.y + 10);

          } else {
            rect(this.x, this.y, this.w, this.h);
          }

          //line changes

          if (mouseX >= this.x && mouseX < this.x + 10 && mouseY >= this.y && mouseY < this.y + 10) {



            fill(255);
            rect(this.x, this.y, this.w, this.h);
            if (this.dir == 2) {

              line(this.x, this.y, this.x + 10, this.y + 10);

            } else if (this.dir == 3) {

              line(this.x + 10, this.y, this.x, this.y + 10);

            } else if (this.dir == 1) {

              rect(this.x, this.y, this.w, this.h);

            } else {

              line(this.x + 10, this.y, this.x, this.y + 10);
              line(this.x, this.y, this.x + 10, this.y + 10);
            }
          }
        }
      }
    }
  }
}



function draw() {
  //create array of cells
  background(255);
  for (var i = 0; i < cols; i++) {
    for (var j = 0; j < rows; j++) {
      cells[i][j].display();
    }
  }
}