week9 - OpenProcessing

mySketch
xxxxxxxxxx
 
//Sounds
var soundBritney, soundCeline, soundDestiny;
​
//Buttons
var btnBritney, btnCeline, btnDestiny;
​
//Background color 
var cl = "#A7C7E7";
​
//Description Text
var descriptionTxt = "Listen to three of the biggest hits of the 90's. These women have made history with music touching both people's ears and hearts.";
​
//Title Text
var headerTxt = "90s Hits";
​
//Info text
var currentlyPlayingTxt = "...";
​
//Image Button Class
class ImageButton {
  constructor(imgPath, width, height, x, y) {
    this.img = loadImage(imgPath); //Load image at creation
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
  }
​
  draw() {
    image(this.img, this.x, this.y, this.width, this.height); //Draw the image button
  }
​
  //Check if the mouse is over the button
  isMouseOver() {
    return mouseX > this.x && mouseX < this.x + this.width &&
           mouseY > this.y && mouseY < this.y + this.height;
  }
​
  //Stop other sounds and play the respective sound
  playSound(sound, others) {
    others.forEach(function(other) {
      other.stop();  //Stop other sounds
    });
    if (!sound.isPlaying()) {
      sound.setVolume(0.15);
      sound.play();  //Play sound if not already playing
    }
  }
}
​
function preload() {
  //Load sounds and images
  soundBritney = loadSound('Britney.mp3');
  soundCeline = loadSound('Celine.mp3');
  soundDestiny = loadSound('Destiny.mp3');
}
​
function setup() {
  createCanvas(600, 900); //Canvas size
​
  //Create buttons with positions
  btnBritney = new ImageButton("Britney.png", 120, 120, 50, height - 460);
  btnCeline = new ImageButton("Celine.png", 120, 120, 250, height - 460);
  btnDestiny = new ImageButton("Destiny.png", 120, 120, 450, height - 460);
​
  //Set background color
  background(cl);
}
​
function draw() {
  //Set the background color
  background(cl);
​
  //Draw buttons
  btnBritney.draw();
  btnCeline.draw();
  btnDestiny.draw();
​
  //Header Title
  textAlign(CENTER);
  textSize(50);
  textLeading(50);
  fill(0);
  text(headerTxt, width / 2, 100);
​
  //Description Text
  textAlign(CENTER);
  textSize(24);
  textLeading(28);
  fill(0);
  text(descriptionTxt, 50, 200, width - 100);
​
  //Check which sound is playing
  if (soundBritney.isPlaying()) {
    currentlyPlayingTxt = 'Now playing: Britney Spears';
  } else if (soundCeline.isPlaying()) {
    currentlyPlayingTxt = 'Now playing: Celine Dion';
  } else if (soundDestiny.isPlaying()) {
    currentlyPlayingTxt = 'Now playing: Destiny\'s Child';
  } else {
    currentlyPlayingTxt = '...';
  }
​
  //Display currently playing track
  textAlign(CENTER);
  textSize(18);
  text(currentlyPlayingTxt, 50, height - 150, width - 100);
}
​
function mousePressed() {
  //Play sound when button is pressed
  if (btnBritney.isMouseOver()) {
    btnBritney.playSound(soundBritney, [soundCeline, soundDestiny]);
  } else if (btnCeline.isMouseOver()) {
    btnCeline.playSound(soundCeline, [soundBritney, soundDestiny]);
  } else if (btnDestiny.isMouseOver()) {
    btnDestiny.playSound(soundDestiny, [soundBritney, soundCeline]);
  }
}
​
function mouseReleased() {
  //Stop sound when button is released
  if (btnBritney.isMouseOver()) {
    soundBritney.stop();
  } else if (btnCeline.isMouseOver()) {
    soundCeline.stop();
  } else if (btnDestiny.isMouseOver()) {
    soundDestiny.stop();
  }
}
​
​
​
​