let myFont;

let screen = 'start';

let karaoke, smelly, whatarethey, theywont, itsnot, yourobv, youmay, yournot;

let chandlerchar,monicachar, phoebechar, rosschar, rachelchar, joeychar;

let input;

let button;

let strings = [];

let answer;

let sarcasm;

let pizzas = [];  // array to store positions of pizzas

let circleX = 175;

let circleY = 250;

let circleRadius = 81;

let journal = [];

let currentPage = 0;

let canFlip = true;

let mouseReleaseAfterScreenChange = false;

let face1, face2, face3;

let dancing, organizing, cooking, cleaning;

​

function preload(){

  doorimage = loadImage('door.jpeg');

  myFont = loadFont ('Friends.TTF');

  characterimg1 = loadImage('character.png');

  chandlerchar = loadImage ('chandler.png')

  monicachar = loadImage ('monica.png')

  phoebechar = loadImage ('phoebe.png')

  rosschar = loadImage ('ross.png')

  rachelchar = loadImage ('rachel.png')

  joeychar = loadImage ('joey-1.png')

  smelly = loadSound ('Phoebe/SmellyCat1.mp3');

  whatarethey = loadSound ('Phoebe/WhatAreThey.mp3');

  itsnot = loadSound ('Phoebe/ItsNotYour.mp3');

  theywont = loadSound ('Phoebe/TheyWontTake.mp3');

  yourobv = loadSound ('Phoebe/YourObviously.mp3');

  youmay = loadSound ('Phoebe/YouMayNot.mp3');

  yournot = loadSound ('Phoebe/YourNotFriend.mp3');

  karaoke = loadSound ('SmellyCatPiano.mp3')

  back = loadImage ('back.png');

  chandler = loadImage ('Friends Game (3).png');

  strings = loadStrings("sarcasm.csv"); 

  joeygame = loadImage ('joeygame.png');

  pizza = loadImage ('pizza.png')

  journal [0] = loadImage ('racheloffice.png')

  journal [1] = loadImage ('rachelcasual.png')

  journal [2] = loadImage ('rachelfestive.png');

  angry = loadImage ('angry.png');

  happy = loadImage ('happy.png')

  monicapage = loadImage ('monicapage.png');

}

​

function setup() {

  createCanvas(800, 500);

  //creating 3 objects

  face1 = new Rosses(50,100,2,-3);

  face2 = new Rosses(100,200,5,2);

  face3 = new Rosses(200,100,1,3);

}

​

function draw() {

  //this section helps to navigate the user to specific pages and their functions

  if (screen === 'start') {

    mainpage();

    removeInput ();

  } else if (screen === 'characters' && mouseReleaseAfterScreenChange) {

    characterscreen();

    removeInput ();

  } else if (screen === 'phoebe') {

    karaokescreen();

    smellykeys ();

    removeInput ();

  } else if (screen === 'ross') {

    phrasescreen();

    removeInput ();

  } else if (screen === 'chandler') {

    questionscreen();

  } else if (screen === 'joey') {

    foodscreen();

  } else if (screen === 'rachel') {

    fashionscreen();

  } else if (screen === 'monica') {

    monscreen();

  } 

}

​

function mainpage(){

  background('#7160b0');

  //highlighting the door picture with a rect on background, so the user knows that it can be pressed

    if (mouseX>310 && mouseX<490 && mouseY>150) {

    stroke ('white');

    strokeWeight (10);

    noFill();

    rectMode(CORNER);

    rect (310, 150, 180, 350);

  }

  else {

    noStroke();

  }

  //image of the door

  imageMode (CENTER);

  image (doorimage, width/2, height/2+75, 180, 350);

  noStroke();

  textFont(myFont);

  textSize(35);

  textAlign (CENTER);

  // making double text to create shadowing

  fill ('#4B442F');

  text ('Friends Game House', width/2, 95)

  fill ('#f5cd51');

  text ('Friends Game House', width/2, 90)  

}

​

​

function mousePressed() {

  //i had a problem that whenever i would press door on the first page, it would skip one next page, and press on a circle on character screen, so I created a boolean variable to make one pressing only to get to the next page

  if (screen === 'start') {    

    // check if user clicked on the door

      if (mouseX > 310 && mouseX < 490 && mouseY > 150) {

      screen = 'characters';

      mouseReleaseAfterScreenChange = false;

    }    

   } 

  }

​

function mouseReleased() {

  // enable interactions with the screen after the mouse is released

  mouseReleaseAfterScreenChange = true;

}

​

​

function characterscreen(){

  // screen with choosing a character, after the starting page

  karaoke.stop();

  background('#7160b0');

  textSize(35);

  textAlign (CENTER);

  fill ('#4B442F');

  text ('Choose Your Character', width/2, 95)

  fill ('#f5cd51');

  text ('Choose Your Character', width/2, 90)

  image (characterimg1, width/2,height/2, 800,500);

  // here i directed the user interaction to follow the corresponding character screen, when user presses on the character

  if (mouseReleaseAfterScreenChange){

  let d1 = dist (mouseX, mouseY, 217, 211);

  if (d1<=69){

    image (chandlerchar,width/2,height/2, 800,500);

    if (mouseIsPressed){

      screen = 'chandler'

    }}

  let d2 = dist (mouseX, mouseY, 400, 211);

  if (d2<=69){

    image (phoebechar,width/2,height/2, 800,500)

    if (mouseIsPressed){

      screen = 'phoebe'

    }}

  let d3 = dist (mouseX, mouseY, 583, 211);

  if (d3<=69){

    image (joeychar,width/2,height/2, 800,500)

        if (mouseIsPressed){

      screen = 'joey';

    }}

  let d4 = dist (mouseX, mouseY, 217, 363)

  if (d4<=69){

    image (monicachar,width/2,height/2, 800,500)

 if (mouseIsPressed){

      screen = 'monica';

    }}

  let d5 = dist (mouseX, mouseY, 400, 363)

  if (d5<=69){

    image (rosschar,width/2,height/2, 800,500);

        if (mouseIsPressed){

      screen = 'ross';

    }}

  let d6 = dist (mouseX, mouseY, 583, 363)

  if (d6<=69){

    image (rachelchar,width/2,height/2, 800,500);

        if (mouseIsPressed){

      screen = 'rachel';

    }}

  //image button with going to the previous screen (start page)

  image (back, width/2, height/2+50, 800, 500);

  let d = dist (mouseX, mouseY, 70, 111)

  if (d<29){

    if (mouseIsPressed){

      screen = 'start';

    }}

  }

}

​

// function for Phoebe page

​

function karaokescreen(){

  textSize (35);

  background('#7160b0');

//button to go to previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29){

    if (mouseIsPressed){

      screen = 'characters';

    }

  }

//the karaoke text

  fill ('#f5cd51');

  text ('Sing With Phoebe', width/2, 90);

  fill ('#FFFFFF');

  textSize (15);

  text ('Press Keys seen above the lyrics', width/2, 40);

  text ('S', 200, 230);

  text ('Smelly Cat, Smelly Cat', 200, 250);

  text ('W', 200, 280);

  text ('What are they feeding you?', 200, 300)

  text ('S', 200, 330);

  text ('Smelly Cat, Smelly Cat', 200, 350);

  text ('F', 200, 380);

  text ('Its not your fault', 200, 400);

  text ('T', 600, 230);

  text ('They wont take you to the vet', 600, 250);

  text ('R', 600, 280);

  text ('Youre obviously not their favorite pet', 600, 300);

  text ('Y', 600, 330);

  text('You may not be a bed of roses', 600, 350)

  text ('N', 600, 380);

  text ('Youre not friend to those with noses', 600, 400);

//settings for the background "Smelly Cat" instrumental song

  karaoke.playMode ('untilDone');

  karaoke.setVolume (1);

// drawing a progress bar and song timer only when karaoke is playing

  if (karaoke !== null && karaoke.isPlaying()) {

    let songDuration = karaoke.duration();

    let currentTime = karaoke.currentTime();

    let progress = currentTime / songDuration;

​

    // drawing progress bar

    fill(200);

    rect(width/2 - 200, 170, 400, 20);

​

    // drawing progress indicator

    fill('#4B442F');

    let progressWidth = 400 * progress;

    rect(width/2 - 200, 170, progressWidth, 20);

​

    // displaying time of the song

    fill(255);

    textSize(16);

    textAlign(CENTER, CENTER);

    let currentMinutes = floor(currentTime / 60);

    let currentSeconds = floor(currentTime % 60);

    let durationMinutes = floor(songDuration / 60);

    let durationSeconds = floor(songDuration % 60);

    let timeText = nf(currentMinutes, 2) + ':' + nf(currentSeconds, 2) + ' / ' + nf(durationMinutes, 2) + ':' + nf(durationSeconds, 2);

    text(timeText, width/2, 150);

  }

  else {

  fill(200);

  rect(width/2 - 200, 170, 400, 20);

  fill(255);

  textSize(16);

  textAlign(CENTER, CENTER);

  text('0:00', width/2, 150);

  }

​

  // stop button

  fill('#f5cd51');

  stroke('#4B442F');

  strokeWeight(4);

  rect(width - 170, 160, 100, 40, 10);

  // stop button text

  noStroke();

  fill('#4B442F');

  textSize(20);

  textAlign(CENTER);

  text('Stop', width - 120, 180);

​

  // stop button click logic

if (mouseX > width - 170 && mouseX < width - 70 && mouseY > 160 && mouseY < 200) {

    if (mouseIsPressed) {

      karaoke.stop();   // stops the sound

    }

  }

​

  // play button

  fill('#f5cd51');

  stroke('#4B442F');

  strokeWeight(4);

  rect(70, 160, 100, 40, 10);

​

  // play button text

  noStroke();

  fill('#4B442F');

  textSize(20);

  textAlign(CENTER);

  text('Play', 120, 180);

​

  // play button click logic

if (mouseX > 70 && mouseX < 170 && mouseY > 160 && mouseY < 200) {

    if (mouseIsPressed) {

      karaoke.play();   // Resume playing from where it was paused

    }}

}

​

//setting boolean values for the sound played by set of keys

let soundPlayed = {

  'S': false,

  'W': false,

  'F': false,

  'T': false,

  'R': false,

  'Y': false,

  'N': false

};

​

//it is a function for sounds on the Phoebe page

function smellykeys() {

  // converting the pressed key to uppercase, so it would be easier to refer it in the code

  let pressedKey = key.toUpperCase();

​

  // logic is to play a specific sound and stop the rest

 if (pressedKey === 'S' && !smelly.isPlaying() && !soundPlayed['S']) {

    stopAllSoundsExcept('smelly');

    smelly.setVolume(0.2); // setting volume, so that it doesn't conflict with the background sound volume

    smelly.playMode('untilDone');

    smelly.play();

    soundPlayed['S'] = true; // the key is pressed and the sound is played, the boolean variable changes to true

  } 

  else if (pressedKey === 'W' && !whatarethey.isPlaying() && !soundPlayed['W']) {

    stopAllSoundsExcept('whatarethey');

    whatarethey.setVolume(0.2);

    whatarethey.playMode('untilDone');

    whatarethey.play();

    soundPlayed['W'] = true;

  } 

  else if (pressedKey === 'F' && !itsnot.isPlaying() && !soundPlayed['F']) {

    stopAllSoundsExcept('itsnot');

    itsnot.setVolume(0.2);

    itsnot.playMode('untilDone');

    itsnot.play();

    soundPlayed['F'] = true;

  } 

  else if (pressedKey === 'T' && !theywont.isPlaying() && !soundPlayed['T']) {

    stopAllSoundsExcept('theywont');

    theywont.setVolume(0.2);

    theywont.playMode('untilDone');

    theywont.play();

    soundPlayed['T'] = true;

  } 

  else if (pressedKey === 'R' && !yourobv.isPlaying() && !soundPlayed['R']) {

    stopAllSoundsExcept('yourobv');

    yourobv.setVolume(0.2);

    yourobv.playMode('untilDone');

    yourobv.play();

    soundPlayed['R'] = true;

  } 

  else if (pressedKey === 'Y' && !youmay.isPlaying() && !soundPlayed['Y']) {

    stopAllSoundsExcept('youmay');

    youmay.setVolume(0.2);

    youmay.playMode('untilDone');

    youmay.play();

    soundPlayed['Y'] = true;

  } 

  else if (pressedKey === 'N' && !yournot.isPlaying() && !soundPlayed['N']) {

    stopAllSoundsExcept('yournot');

    yournot.setVolume(0.2);

    yournot.playMode('untilDone');

    yournot.play();

    soundPlayed['N'] = true;

  }

}

​

​

// this is a function that stops all of the sounds except the one that is pressed by key in the moment

​

function stopAllSoundsExcept(keep) {

  for (let key in soundPlayed) {

    soundPlayed[key] = false;

  }

  // stop all sounds except the currently selected one

  if (keep !== 'smelly' && smelly.isPlaying()) //here you can see that if the smelly sound is playing and it is not the one that referred as an exception (keep) in the stopAllSoundsExcept function, then the sound is stopped, because it would conflict with the other playing sound

  {

    smelly.stop();

  }

  if (keep !== 'whatarethey' && whatarethey.isPlaying()) {

    whatarethey.stop();

  }

  if (keep !== 'itsnot' && itsnot.isPlaying()) {

    itsnot.stop();

  }

  if (keep !== 'theywont' && theywont.isPlaying()) {

    theywont.stop();

  }

  if (keep !== 'yourobv' && yourobv.isPlaying()) {

    yourobv.stop();

  }

  if (keep !== 'youmay' && youmay.isPlaying()) {

    youmay.stop();

  }

  if (keep !== 'yournot' && yournot.isPlaying()) {

    yournot.stop();

  }

}

​

​

// function for Ross page

​

function phrasescreen(){

  background('#7160b0');

  // button to go to previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29 && mouseIsPressed){

      screen = 'characters';

      removeInput ();

  }

  //button 1

  rectMode(CENTER);

  strokeWeight (5);

  stroke ('#F6F2FF')

  fill ('#F5CD51')

  rect (width/2, height/2-50, 300, 70);

  noStroke();

  fill ('#7160b0');

  textSize (20);

  text ('WE WERE ON A BREAK', width/2, height/2-45)

  //button 2

  stroke ('#F5CD51')

  fill ('#F6F2FF')

  rect (width/2, height/2+35, 300, 70);

  noStroke();

  fill ('#7160b0');

  textSize (20);

  text ('IT IS A BIG DEAL', width/2, height/2+40)

  // buttons interaction

  if (mouseX>250 && mouseX<550 && mouseY>165 && mouseY<235){

  //changing color

  strokeWeight (5);

  stroke ('#F6F2FF')

  fill ('#7160b0')

  rect (width/2, height/2-50, 300, 70);

  noStroke();

  fill ('#F6F2FF');

  textSize (20);

  text ('WE WERE ON A BREAK', width/2, height/2-45)

    if (mouseIsPressed){

      //OOP for ross face images moving

      face1.move();

      face2.move();

      face3.move();

      face1.bounce();

      face2.bounce();

      face3.bounce();

      //specifying a happy face

      face1.showHappy();

      face2.showHappy();

      face3.showHappy();

    }

  }

  if (mouseX>250 && mouseX<550 && mouseY>250 && mouseY<320){

  //changing color

  strokeWeight (5);

  stroke ('#F6F2FF')

  fill ('#7160b0')

  rect (width/2, height/2+35, 300, 70);

  noStroke();

  fill ('#F6F2FF');

  textSize (20);

  text ('IT IS A BIG DEAL', width/2, height/2+40)

    if (mouseIsPressed){

      //OOP for ross face images moving

      face1.move();

      face2.move();

      face3.move();

      face1.bounce();

      face2.bounce();

      face3.bounce();

      //specifying angry face

      face1.showAngry();

      face2.showAngry();

      face3.showAngry();

    }

  }

}

​

// function for Chandler screen

​

function questionscreen(){

  background('#7160b0');

  image (chandler, width/2, height/2, 800, 500);

  //button for previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29 && mouseIsPressed){

      screen = 'characters';

      removeInput ();

  }

  textSize (35);

  textAlign (LEFT, CENTER);

  fill ('#F5CD51');

  rectMode(CORNER);

  text ('Ask a Question', 120, 100);

  textSize (20);

  fill ('#7160b0');

  text ((sarcasm), 200, 320, 350, 100)

  if (!input){

  // creating an input field for user to type their question

  input = createInput (' Type a question');

  input.position (120, 150);

  input.size (300,50);

  }

  if (!button){

  // button to receive an answer to the question

  button = createButton ('Send');

  button.position (420, 150);

  button.size (70,55);

  button.mousePressed (response) 

  }

}

​

function removeInput(){

  if (input) {

    input.remove ();

    input = null;

  }

  if (button) {

    button.remove ();

    button = null;

  }

}

​

function response () {

  // randomizing and extracting specific line from csv file with Chandler's answers

  answer = strings[int (random(strings.length))];

  // storing the string in the variable

  sarcasm = answer;

}

​

//function for Joey's page

​

function foodscreen(){

  background('#7160b0');

  // button to go to previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29){

    if (mouseIsPressed){

      screen = 'characters';

    }

  }

  // storing in the array pizzas drawn

  for (let i = 0; i < pizzas.length; i++) {

    image(pizza, pizzas[i].x, pizzas[i].y, 150, 150);  // drawing pizza at each position

  }

  //creating isolated space around the plate, so the user couldn't place a pizza there

  if (mouseIsPressed){

    if (dist(mouseX, mouseY, circleX, circleY) > circleRadius + 20) {

    pizzas.push({ x: mouseX, y: mouseY});  // storing new pizza position, centered at click

  }

  }

  image (joeygame, width/2, height/2, width, height);

  textAlign (LEFT);

  textSize (25);

  fill ('#F5CD51')

  text ('JOEY DOESNT SHARE FOOD', 60, 430)

  textAlign (CENTER);

  fill ('#7160b0')

  rectMode(CORNER);

  text ('your plate', 150, height-270, 50, 60)

}

​

// function for Rachel's screen

​

function fashionscreen(){

  background('#7160b0');

  textSize(25);

  textAlign (CENTER);

  //button to go to previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29 && mouseIsPressed){

      screen = 'characters';

  }

  //an array for journal images

  image (journal[currentPage], 400, 250, 800, 500);

  //it makes sure that no more than one page is flipped during one click

   if (!mouseIsPressed) {

    canFlip = true;

  }

  //flipping the page forward by changing the image

  if (mouseX>655&&mouseX<721&&mouseY<285&&mouseY>237&&canFlip){

    if (mouseIsPressed && currentPage < journal.length - 1){

      currentPage++; 

      canFlip = false;

    }

  } 

  //flipping the page backward by changing the image

  if (mouseX>85&&mouseX<151&&mouseY<285&&mouseY>237&&canFlip){

    if (mouseIsPressed && currentPage > 0){

      currentPage--;

      canFlip = false;

    }

  }

  if (currentPage == 0){

    fill ('#F5CD51');

  text ('Rachel Office Outfit Inspo', width/2, 123)

  fill ('#7160b0');

  text ('Rachel Office Outfit Inspo', width/2, 120)

  } else if (currentPage == 1) {

     fill ('#F5CD51');

  text ('Rachel Casual Outfit Inspo', width/2, 123)

  fill ('#7160b0');

  text ('Rachel Casual Outfit Inspo', width/2, 120)

  } else if (currentPage == 2) {

     fill ('#F5CD51');

  text ('Rachel Festive Outfit Inspo', width/2, 123)

  fill ('#7160b0');

  text ('Rachel Festive Outfit Inspo', width/2, 120)

  }

}

​

// function for Monica's page

​

function monscreen(){

  background('#7160b0');

  image (monicapage, width/2, height/2, width, height);

  //button to go to previous page

  image (back, width/2, height/2, 800, 500);

  let d = dist (mouseX, mouseY, 70, 61)

  if (d<29){

    if (mouseIsPressed){

      screen = 'characters';

    }

  }

  textSize (30);

  fill('#F5CD51')

  rectMode (CENTER);

  textAlign (CENTER);

  text ('Explore Monica', width/2, 120)

  fill ('#7160b0')

  text('Explore Monica', width/2, 115)

  //when user's mouse is placed on one of the images, the other images are darkened by placing transparent rectangle on it

  if (mouseX>0 && mouseX<181 && mouseY>201 && mouseY<height){

    rectMode (CORNER);

    fill(113, 96, 176, 150)

    rect (193, 198, width-193, height-198)

    // storing the string in the variable

    dancing = "Monica Dance Confession: 'The Routine' is scientifically proven to be the best dance ever created - just don't do it in public unless you're ready for fame. Monica's Dance Mantra: If you're not sweating by the end, you didn't dance hard enough. Let loose like you're back in the '80s with Ross!"

    if (mouseIsPressed){

      fill ('#DCCCFF')

      rect (250, 50, 300,80);

      rectMode(CENTER);

      textSize(17);

      textAlign (LEFT)

      fill('#7160b0')

      //when the mouse is pressed, showing the text

      text (dancing, width/2+30, 115, 620, 180);

    }

  }

  if (mouseX>198 && mouseX<394 && mouseY>193 && mouseY<height){

    rectMode (CORNER);

    fill(113, 96, 176, 150)

    rect (0, 201, 198, height-201);

    rect (394, 201, width-394, height - 201);

    organizing = "Monica's Party Prep Panic: If it's not color-coded, alphabetized, and perfectly timed, then what's the point?! Organized fun is the best kind of fun! Monica's Event Law: The key to a perfect party is precision! Guests might not notice the seating arrangements, but you will - and that's what matters!"

    if (mouseIsPressed){

      fill ('#DCCCFF')

      rect (250, 50, 300,80);

      rectMode(CENTER);

      textSize(17);

      textAlign (LEFT)

      fill('#7160b0')

      text (organizing, width/2+30, 115, 620, 180);

    }

  }

  if (mouseX>411 && mouseX<595 && mouseY>201 && mouseY<height){

    rectMode (CORNER);

    fill(113, 96, 176, 150)

    rect (0, 198, 411, height-198);

    rect (595, 201, width-595, height - 201);

    cooking = "Monica's Chef's Secret: My grandmother's chocolate chip cookie recipe is top secret...except I lost it! But don't worry, whatever I make is still perfect! Monica's Kitchen Rule: If you're not tasting your food at least five times before it's done, you're not doing it right! And yes, I am a 'little' competitive in the kitchen."

    if (mouseIsPressed){

      fill ('#DCCCFF')

      rect (250, 50, 300,80);

      rectMode(CENTER);

      textSize(17);

      textAlign (LEFT)

      fill('#7160b0')

      text (cooking, width/2+30, 115, 620, 180);

    }

  }

  if (mouseX>597 && mouseX<width && mouseY>201 && mouseY<height){

    rectMode (CORNER);

    fill(113, 96, 176, 150)

    rect (0, 198, 597, height-198);

    cleaning = "Monica's Cleaning Challenge: If your floors aren't clean enough to eat off of, you're not done yet! Remember, cleaning is a competitive sport! Monica's Motto: 'Rules are rules for a reason!' If you didn't vacuum under the couch cushions, did you really even clean?"

    if (mouseIsPressed){

      fill ('#DCCCFF')

      rect (250, 50, 300,80);

      rectMode(CENTER);

      textSize(17);

      textAlign (LEFT)

      fill('#7160b0')

      text (cleaning, width/2+30, 115, 620, 180);

    }

  }

}