week09 -Interactive Sound 02

// 1- Sounds

var soundFloppy;

var soundNokia;

var soundBoca;

var soundAim;

var soundIcq;

var soundTelephone;

var soundNintendo;

var soundGuitar;

​

// 2- Buttons

var btn; // floppy button

var btnNokia; // nokia button 

var btnBoca;

var btnAim;

var btnIcq;

var btnTelephone

var btnNintendo;

var btnGuitar;

​

// background color

var cl;

​

// Description Text

var descriptionTxt;

​

// Title Text

var headerTxt;

​

// Info text

var currentlyPlayingTxt;

​

function preload() {

  //  3- load sounds

  soundFloppy = loadSound('floppy.mp3');

  soundNokia = loadSound('nokia-3310.mp3');

  soundBoca = loadSound('dial-up-modem.mp3');

  soundAim = loadSound('aim.mp3');

  soundIcq = loadSound ('icq.mp3');

  soundTelephone = loadSound ('telephone90s.mp3');

  soundNintendo = loadSound ('nintendo.mp3');

  soundGuitar = loadSound('90sr&b.mp3');

  dactylog = loadFont('DACTYLOG.TTF');

  vintage = loadFont('VintageQueens-PersonalUse.ttf');

  avigea = loadFont('Avigea.ttf');

}

​

​

function setup() {

  cnv = createCanvas(600, 700);

​

  // HTML Floppy Disk image button

  btn = new imageButton("floppy.png", 100    , 100);

  //                     ^ file name, ^ width, ^ height            

  btn.position(30, 290);        // Set x and y position of the button

  btn.mousePressed(floppyBtnPressed);   // Check the line 82: play sound

  btn.mouseReleased(floppyBtnReleased); // Check the line 87: stop sound

​

  //HTML button Nokia 

  btnNokia = new imageButton('nokia.png', 100, 100);

  btnNokia.position(150, 200);

  btnNokia.mousePressed(nokiaBtnPressed);

  btnNokia.mouseReleased(nokiaBtnReleased);

  //HTML button Boca

  btnBoca = new imageButton('boca.png', 100, 100);

  btnBoca.position(230, 330);

  btnBoca.mousePressed(bocaBtnPressed);

  btnBoca.mouseReleased(bocaBtnReleased);

  //HTML button Aim

  btnAim = new imageButton('aim.png', 100, 100);

  btnAim.position(350,230);

  btnAim.mousePressed(aimBtnPressed);

  btnAim.mouseReleased(aimBtnReleased);

  //HTML button Icq

  btnIcq=new imageButton('icq.png', 100, 100);

  btnIcq.position(480, 300);

  btnIcq.mousePressed(icqBtnPressed);

  btnIcq.mouseReleased(icqBtnReleased);

  // HTML button Telephone

  btnTelephone = new imageButton('telephone90s.png', 150, 150);

  btnTelephone.position (40, 520);

  btnTelephone.mousePressed(telephoneBtnPressed);

  btnTelephone.mouseReleased(telephoneBtnReleased);

  // HTML button Nintendo

  btnNintendo = new imageButton('nintendo.png', 150, 150);

  btnNintendo.position (250, 450);

  btnNintendo.mousePressed(nintendoBtnPressed);

  btnNintendo.mouseReleased(nintendoBtnReleased);

  //HTML button Guitar

  btnGuitar = new imageButton('90sguitar.png', 200, 200);

  btnGuitar.position(400, 450);

  btnGuitar.mousePressed(guitarBtnPressed);

  btnGuitar.mouseReleased(guitarBtnReleased);

​

  // Title and description text

  cl = "#ffeebf"

  textSize(50);

  textFont(vintage);

  headerTxt = "Sound Museum";

  textSize(50);

  textFont(avigea);

  descriptionTxt = "Step into a nostalgic journey with Sound Museum, where you can relive the iconic sounds of classic technological devices! Our interactive platform allows you to hear the unique audio signatures of devices that shaped our digital lives.";

​

  // Currently playing track information on buttom

  currentlyPlayingTxt = "...";

​

  // set background color

  background(cl);

​

}

​

function draw() {

  // Set the background color

  background(cl);

  //Add gradient effect

  for(let y = 0; y < height; y++) {

    let inter = map(y, 0, height, 0, 1);

    let c = lerpColor(color('#ff0000'), color('#ffd27f'), inter);

    stroke(c);

    line(0, y, width, y);

  }

  //Add geometric patterns

  noFill();

  stroke(255, 150);

  strokeWeight(1);

  for (let i = 0; i < 50; i++) {

    let x = random(width);

    let y = random(height);

    ellipse(x, y, random(10, 30));

  } 

​

  // Header Title

  textAlign(LEFT);

  textSize(30);

  textLeading(22);

  fill(0);

  text(headerTxt, 20, 50);

​

  // Description Text

  textAlign(LEFT);

  textSize(18);

  textLeading(22);

  fill(0);

  text(descriptionTxt, 20, 70, width - 50);

​

  // Conditions to set currently playing device information

  if (soundFloppy.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of a Floppy Disk...';

  } else {

    currentlyPlayingTxt = '...'; // If nothing is playing then display ...

  }

  if (soundNokia.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Nokia';

  } else {

    currentlyPlayingTxt = '...';

  }

  if (soundBoca.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Boca';

  } else {

    currentlyPlayingTxt = '...';

  }

  if (soundAim.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Aim';

  } else {

    currentlyPlayingTxt = '...';

  }

  if (soundIcq.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Icq';

  } else {

    currentlyPlayingTxt = '...';

  }

  if (soundTelephone.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Telephone from the 90s';

  } else {

    currentlyPlayingTxt = '...';

  }

  if (soundNintendo.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of Nintendo';

  } else {

    currentlyPlayingTxt = '...';

  }

  if(soundGuitar.isPlaying()) {

    currentlyPlayingTxt = 'You are listening the sound of R&B Guitar Loop from the 90s';

  } else {

    currentlyPlayingTxt = '...';

  }

​

  // Currently playing device information

  textAlign(CENTER);

  textSize(12);

  fill(0);

  text(currentlyPlayingTxt, 20, height - 50, width - 50);

}

​

​

// Call the following function when the user presses mouse button on Floppy Disk Image

function floppyBtnPressed() {

  soundFloppy.play(); // Play floppy sound

}

​

// Call the following function when the user releases mouse button on Floppy Disk Image

function floppyBtnReleased() {

  soundFloppy.stop(); // stop floppy sound when user leaves the mouse

}

​

function nokiaBtnPressed() {

  soundNokia.play();

}

​

function nokiaBtnReleased () {

  soundNokia.stop();

}

​

function bocaBtnPressed() {

  soundBoca.play();

}

​

function bocaBtnReleased () {

  soundBoca.stop();

}

​

function aimBtnPressed() {

  soundAim.play();

}

​

function aimBtnReleased() {

  soundAim.stop();

}

​

function icqBtnPressed () {

  soundIcq.play();

}

​

function icqBtnReleased() {

  soundIcq.stop();

}

​

function telephoneBtnPressed() {

  soundTelephone.play ();

}

​

function telephoneBtnReleased () {

  soundTelephone.stop();

}

​

function nintendoBtnPressed () {

  soundNintendo.play();

}

​

function nintendoBtnReleased() {

  soundNintendo.stop();

}

​

function guitarBtnPressed() {

  soundGuitar.play();

}

​

function guitarBtnReleased() {

  soundGuitar.stop();

}