constructor(x, y, image) {

    this.dragging = false; // Is the object being dragged?

    this.rollover = false; // Is the mouse over the object?

    this.x = x;

    this.y = y;

    this.image = image;

    this.w = 30;

    this.h = 30;

  }

​

  over() {

    // mouse over the object?

    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {

      this.rollover = true;

    } else {

      this.rollover = false;

    }

  }

​

  update() {

    // Adjust location if being dragged

    if (this.dragging) {

      this.x = mouseX + this.offsetX;

      this.y = mouseY + this.offsetY;

    }

  }

​

  show() {

    // Display the ornament image

    if (this.dragging) {

      tint(255, 100); // Reduce opacity when dragging

    } else if (this.rollover) {

      tint(255, 200); // Highlight when the mouse is over it

    } else {

      noTint(); // Reset tint

    }

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

  }

​

  pressed() {

    // Did I click on the object?

    if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) {

      this.dragging = true;

      // If so, keep track of the relative location of the click to the corner of the object

      this.offsetX = this.x - mouseX;

      this.offsetY = this.y - mouseY;

    }

  }

​

  released() {

    // Quit dragging

    this.dragging = false;

  }

}