let logoImage;

let choosingImage;

​

​

let buttonsChoosing1; 

let buttonsChoosing2;

let buttonsChoosing3;

function preload(){

  backgroundImage = loadImage("background.jpeg");

  logoImage = loadImage("Logo.png");  

  choosingImage = loadImage("Sun.png");

}

​

​

 function setup() {

  createCanvas(620, 388);

// how do I display these images in the function Choosing 

  image(backgroundImage,0,0);

  image(logoImage, 420,0, 200,150);

  buttonsChoosing1 = new ChoosingButtons (20, 150, choosingImage);

   buttonsChoosing2 = new ChoosingButtons (235, 150, choosingImage);

   buttonsChoosing3 = new ChoosingButtons (450, 150, choosingImage);

​

fill(80);

textSize(20);

textFont('Dancing');

//line(0, 12, width, 12);

textAlign(CENTER);

text('BREATHING', 95, 350);

text('MANTRAS', 305, 350);

text('JOURNALING', 525, 350);

}

​

function draw() {

  //background(70);

buttonsChoosing1.display();

buttonsChoosing2.display();

buttonsChoosing3.display();

​

}

​

class ChoosingButtons {

  constructor(inX, inY, inImg) { // what does this mean?

    this.x = inX;

    this.y = inY;

    this.img = inImg;

  }

  display() {

    stroke(0);

    // tint the image on mouse hover

    if (this.mouseOverImage()) {

      tint(100,0,100);

    } 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

  mouseOverImage() {

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

      return true;

    } else {

      return false;

    }

  }

}

​