Как я могу заставить объект использовать свои собственные данные для пространственных ссылок?

Question

Как я могу заставить объект использовать свои собственные пространственные данные, а не указывать, где он находится на холсте?

Всякий раз, когда мне нужно указать границу или определенное количество пикселей, например, для оператора if, я должен найти, где находится этот объект на холсте, и сообщить оператору if, где на холсте мне нужно выражениечтобы быть исполненным.

То, что я хочу, это сказать объекту: «Хорошо, возьми, где ты сейчас и переместись на x пикселей вправо».

Взгляни на мойКласс здесь, например:

function setup() {
  createCanvas(windowWidth, windowHeight);
  trees = new Trees(200, 200);
}

class Trees {
  constructor(x, y) {
    this.x = x,
    this.y = y,
    this.a = 0
  }
  trunk() {
    noStroke();
    fill(126, 60, 1);
    rect(this.x + 3, this.y, 14, 40);
    triangle(this.x + 10, this.y + 30, this.x - 4, this.y + 40, this.x + 24, this.y + 40);
  }
  leaves() {
    fill(71, 215, 45);
    ellipse(this.x + 3, this.y - 5, 25);
    ellipse(this.x + 10, this.y - 15, 25);
    ellipse(this.x + 17, this.y - 5, 25);
  }
  shudder() {
    if (mouseIsPressed) {
      this.a = 4;
      if (this.x < this.x - 2 || this.x > this.x + 2) { // this won't work
        this.a = this.a * -1;
      }
    } else {
      this.a = 0;
    }
    this.x = this.x + this.a;
  }
}

Вы можете увидеть, что я пытаюсь сделать здесь.

Мне удалось переместить объект, как я хотел бы, ссылаясь на холст, но тамдолжен быть способ простой ссылки на то, где находится объект, а затем смещение на пару пикселей?

Я не хочу этого делать:

function setup() {
  createCanvas(windowWidth, windowHeight);
  trees = new Trees(200, 200, 198, 202); // not what I want
}

class Trees {
  constructor(x, y, l, r) {
    this.x = x,
    this.y = y,
    this.l = l,
    this.r = r,
    this.a = 0
  }
  trunk() {
    noStroke();
    fill(126, 60, 1);
    rect(this.x + 3, this.y, 14, 40);
    triangle(this.x + 10, this.y + 30, this.x - 4, this.y + 40, this.x + 24, this.y + 40);
  }
  leaves() {
    fill(71, 215, 45);
    ellipse(this.x + 3, this.y - 5, 25);
    ellipse(this.x + 10, this.y - 15, 25);
    ellipse(this.x + 17, this.y - 5, 25);
  }
  shudder() {
    if (mouseIsPressed) {
      this.a = 4;
      if (this.x < this.l || this.x > this.r) {
        this.a = this.a * -1;
      }
    } else {
      this.a = 0;
    }
    this.x = this.x + this.a;
  }
}

Есть ли способдобиться того, что я спрашиваю?

Заранее спасибо!