class Tile {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    // creating overlapping tiles

    this.breadth = CELL_WIDTH + random(offset);

    this.length = CELL_HEIGHT + random(offset);

    // assigning random colors

    this.r = random(255);

    this.g = random(255);

    this.b = random(255);

  } 

  update() {

    // checking if cursor is within tile

    if(mouseX > this.x && mouseX < (this.x + this.breadth) && mouseY > this.y && mouseY < (this.y + this.length)) {

      // adjusting the position of the tile based on which quarter the cursor is in

      if (mouseX > this.x + (this.breadth /2)) {

        this.x -= displacementSpeed;

      }

      if (mouseX < this.x + (this.breadth /2)) {

        this.x += displacementSpeed;

      }

      if (mouseY > this.y + (this.length /2)) {

        this.y -= displacementSpeed;

      }

      if (mouseY < this.y + (this.length /2)) {

        this.y += displacementSpeed;

      }

    }

  }

  // render function for the tiles

  draw() {

    this.update();

    fill(this.r, this.g, this. b, ALPHA);

    rect(this.x, this.y, this.breadth, this.length);

  }

}