​

class DisplayedImages {

  constructor(images, texts, songs) {

    this.images = images;

    this.texts = texts;

    this.songs = songs;

    this.currentIndex = 0;

    this.currentImage = this.images[this.currentIndex]; // set the current image to be displayed as the image with the current index from the image array

    this.currentText = this.texts[this.currentIndex]; // set the current text to be displayed as the text with the current index from the text array

  }

​

  //   display image and centered-aligned text

  display() {

    image(this.currentImage, width / 2 - 80, height / 2 - 80, 160, 160);

    fill(255);

    textFont(chosenFont);

    textSize(22);

    textAlign(CENTER, CENTER); // align text in center

    text(this.currentText, width / 2, 520);

  }

​

  //   function to stop the previous song when going to the next one

  stopSongs() {

    this.songs.forEach((song) => song.stop());

  }

​

  //   function to play the current song

  playCurrentSong() {

    this.songs[this.currentIndex].play();

    amplitude.setInput(this.songs[this.currentIndex]); // this allows us to get the amplitude for the song that is currently playing

  }

​

  //   function to update image and text to the current index, it was needed for the button I created, otherwise they wouldn't change

  updateImage() {

    this.currentImage = this.images[this.currentIndex];

    this.currentText = this.texts[this.currentIndex];

  }

​

  //   set what the next image, text, and song will be - also stops the current song and plays the next one

  nextImage() {

    this.songs[this.currentIndex].stop();

    this.currentIndex = (this.currentIndex + 1) % this.images.length;

    this.updateImage();

    this.currentImage = this.images[this.currentIndex];

    this.currentText = this.texts[this.currentIndex];

    this.songs[this.currentIndex].play();

  }

​

  //   set what the previous image, text, and sound will be - also stops the current song and plays the previous one

  previousImage() {

    this.songs[this.currentIndex].stop();

    this.currentIndex =

      (this.currentIndex - 1 + this.images.length) % this.images.length;

    this.updateImage();

    this.currentImage = this.images[this.currentIndex];

    this.currentText = this.texts[this.currentIndex];

    this.songs[this.currentIndex].play();

  }

}

​