// http://molleindustria.github.io/p5.play/

​

let button1;

let button2;

let img;

​

function preload() {

  img = loadImage("ghost.png");

  // load another image here if you want a different one.

  // & use it in one of the constructors below.

}

​

function setup() {

  createCanvas(500, 400);

  button1 = new Button(100, 200, img);

  button2 = new Button(300, 200, img);

}

​

function draw() {

  background(70);

  button1.display();

  button2.display();

}

​

class Button {

  constructor(inX, inY, inImg) {

    this.x = inX;

    this.y = inY;

    this.img = inImg;

  }

  display() {

    stroke(0);

    // tint the image on mouse hover

    if (this.over()) {

      tint(204, 0, 128);

    } else {

      noTint();

    }

    image(this.img, this.x, this.y);

  }

  // over automatically matches the width & height of the image read from the file

  // see this.img.width and this.img.height below

  over() {

    if (mouseX > this.x && mouseX < this.x + this.img.width && mouseY > this.y && mouseY < this.y + this.img.height) {

      return true;

    } else {

      return false;

    }

  }

}