class Tile {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    // keeping track of original coordinates for resetting

    this.xBeforeDisplacement = x;

    this.yBeforeDisplacement = 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)) {

      // no displacement if cursor is on edge of tile

      if (mouseX == this.x || mouseY == this.y || 

          mouseX == this.x + this.breadth || mouseY == this.y + this.length) {}

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

      else {

        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;

        }

      }

​

    }

​

    // resetting the tiles to their original positions

    else {

      if(this.x > this.xBeforeDisplacement) {

        this.x -= resetSpeed;

      }

      if(this.x < this.xBeforeDisplacement) {

        this.x += resetSpeed;

      }

      if(this.y > this.yBeforeDisplacement) {

        this.y -= resetSpeed;

      }

      if(this.y < this.yBeforeDisplacement) {

        this.y += resetSpeed;

      }

    }

  }

  // 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);

  }

}