let homepageBackground;

let website; //homepage background for website toggle

let processingRoom; //homebase processing room

let mixChemistry; //mix chemistry screen

let editingScreen; //editing scan screen

let homebutton = true; //var for returning home

let cameraLabel; //camera label processing room

//toggle full screen

let isFullscreen = false;

let music;

let musicButton;

​

//step colors light up

let currentState = 'homepage';

let editLightUp;

let machineLightUp;

let questionMark;

let splicingLightUp;

let mixingLightUp;

​

//return arrow

let arrow;

​

//chemistry room

let lives = 2;

let blueHeight = 0;

let redHeight = 0;

let greenHeight = 0;

let yellowHeight = 0;

const growthRate = 2;

const maxHeight = 175;

let rectanglesDrawn = false;

let yaySoundPlayed2 = false; //sounds

let sadTrumpetPlayed2 = false;

​

// track growth for each color

let grow = {

  blue: false,

  red: false,

  green: false,

  yellow: false

};

​

​

//editing scans - OOP

let circles = [];

let timer = 15;

let dustCount = 10;

let yay;

let yaySoundPlayed = false;

let sadTrumpet;

let sadTrumpetPlayed = false;

​

function preload() {

  //so it plays throughout entire game

  //in setup wouldnt load for some reason

  music = loadSound('lofi-song-toybox-by-lofium-242708.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textFont('Courier New');

  stroke(4);

  //loading backgrounds

  homepageBackground = loadImage('homepage.jpg');

  website = loadImage('visitwebsite.jpg');

  processingRoom = loadImage('processingroom.png');

  editLightUp  = loadImage('computeraura.png');

  machineLightUp = loadImage('machineaura.png');

  splicingLightUp = loadImage('splicingblock.jpg');

  mixingLightUp = loadImage('chemicals.jpg');

  arrow = loadImage('Midterm (14).png');

  mixChemistry = loadImage('chemistry.png');

  vialsDetails = loadImage('developer.png');

  editingScreen = loadImage('scenery.jpg');

  cameraLabel = loadImage('cameraLabel.jpg');

  splicing1 = loadImage('Midterm (1).jpg');

  splicing2 = loadImage('Midterm (2).jpg');

  playPause = loadImage('Midterm (13).png');

  instructionScreen = loadImage('Midterm (3).jpg');

  hiddenPhotos = loadImage('Midterm (15).png')

  negativesAura = loadImage('Midterm (16).png')

  //sounds

  yay = loadSound('cartoon-yay-140921.mp3');

  sadTrumpet = loadSound('trumpet-fail-242645.mp3');

  //play music entire time 

  music.setLoop(true);

  //let user silence music

  musicButton = createButton('Music On/Off');

  musicButton.style('font-family', 'Courier New');

  musicButton.style('background-color', '#607D8B');

  musicButton.position(windowWidth - 25, 10);

  musicButton.mousePressed(toggleMusic); //play/pause function

  instructions = createButton('Instructions!'); 

  instructions.style('font-family', 'Courier New');

  instructions.style('font-size', '20px');

  instructions.style('background-color', '#FFC107');

  instructions.size(200, 75);

  instructions.style('border-radius', '15px');

  instructions.position(windowWidth*0.8, windowHeight*0.2);

  instructions.mousePressed(() => currentState = 'instructions');

  //button to start game

  start = createButton('Get started!'); 

  start.style('font-family', 'Courier New');

  start.style('font-size', '20px');

  start.style('background-color', 'rgb(255,108,0)');

  start.size(200, 75);

  start.style('border-radius', '15px');

  start.position(windowWidth*0.99, windowHeight*0.2);

  //start the game

  start.mousePressed(() => currentState = 'employee');

  returnHome = createButton('Return Home?'); 

  // editing appearancet

  returnHome.style('font-family', 'Courier New');

  returnHome.style('font-size', '20px');

  returnHome.style('background-color', '#9E9E9E');

  returnHome.size(150, 50);

  returnHome.style('border-radius', '15px');

  returnHome.position(windowWidth*0.7, windowHeight* 0.9);

  returnHome.mousePressed(() => {

    returnHome.hide();

    start.show();

    instructions.show();

    currentState = 'homepage';

  });

  returnHome.hide();

  //recipe in chemicals game

  recipe = createButton("5R's TOP SECRET RECIPE");

  recipe.style('font-family', 'Courier New');

  recipe.style('font-size', '16px');

  recipe.style('background-color', '#9E9E9E');

  recipe.size(200, 250);

  recipe.style('border-radius', '15px');

  recipe.position(windowWidth-325, windowHeight-480);

  recipe.mousePressed(() => currentState = 'recipe');

  recipe.hide(); 

​

  //chemical game - memorized

  ready = createButton("I'm ready!"); //return to vials

  ready.style('font-family', 'Courier New');

  ready.style('font-size', '16px');

  ready.style('background-color', '#9E9E9E');

  ready.size(180, 100);

  ready.style('border-radius', '15px');

  ready.position(windowWidth-400, windowHeight-180);

  ready.mousePressed(() => {

  currentState = 'mixChemistry';

  lives--; //they've viewed the recipe again

});

  ready.hide();

  //more info about iso - splicing table

  iso = createButton("Click here to read more about film ISO!");

  // Set up Color Developer button

  iso.style('font-family', 'Courier New');

  iso.style('font-size', '16px');

  iso.style('background-color', '#9E9E9E');

  iso.size(180, 115);

  iso.style('border-radius', '15px');

  iso.position(windowWidth * 0.5, windowHeight * 0.6);

  iso.mousePressed(() => currentState = 'splicing2');

  iso.hide(); 

  for (let i = 0; i < 10; i++) { //OOP

    //randomly generating circles for dust game

    let widthRange = random(windowWidth*0.4, windowWidth * 1.4)

    //exceeding with since generates on tiny screen

    let heightRange = random(windowHeight*0.4, windowHeight * 0.8)

    circles.push(new Circle(widthRange, heightRange, random(5, 15)));

  }

​

  //buttons for chemical game

  blueButton = createButton('Blue');

  blueButton.position(10, height + 10);

  blueButton.style('font-family', 'Courier New');

  blueButton.style('font-size', '16px');

  blueButton.style('background-color', '#9E9E9E');

  blueButton.mousePressed(() => startGrowing('blue'));

  blueButton.mouseReleased(() => stopGrowing('blue'));

​

  redButton = createButton('Red');

  redButton.style('font-family', 'Courier New');

  redButton.style('font-size', '16px');

  redButton.style('background-color', '#9E9E9E');

  redButton.position(10, height + 10);

  redButton.mousePressed(() => startGrowing('red'));

  redButton.mouseReleased(() => stopGrowing('red'));

​

  greenButton = createButton('Green');

  greenButton.style('font-family', 'Courier New');

  greenButton.style('font-size', '16px');

  greenButton.style('background-color', '#9E9E9E');

  greenButton.position(10, height + 10);

  greenButton.mousePressed(() => startGrowing('green'));

  greenButton.mouseReleased(() => stopGrowing('green'));

​

  yellowButton = createButton('Yellow');

  yellowButton.style('font-family', 'Courier New');

  yellowButton.style('font-size', '16px');

  yellowButton.style('background-color', '#9E9E9E');

  yellowButton.position(10, height + 10);

  yellowButton.mousePressed(() => startGrowing('yellow'));

  yellowButton.mouseReleased(() => stopGrowing('yellow'));

  //hiding them so they only appear on main screen

  blueButton.hide();

  redButton.hide();

  greenButton.hide();

  yellowButton.hide();

}

//playing & pausing music - user control

function toggleMusic() { //if button is pressed

  if (music.isPlaying()) {

    music.pause();

  } else {

    music.play();

  }

}

function keyPressed() { //going to fullscreen for f

  if (key === 'f') {

    toggleFullscreen();

  }

}

function toggleFullscreen() {

  isFullscreen = !isFullscreen;

  fullscreen(isFullscreen);

}

function windowResized() { //resizing window as needed for buttons

  resizeCanvas(windowWidth, windowHeight);

}

function draw() {

  //making sure each backdrop is being redrawn

  if (currentState === 'homepage') {

    homepage();

  } else if (currentState === 'instructions') {

    instructionsPage();

  }else if (currentState === 'employee') {

    employeeGame();

  }else if (currentState === 'mixChemistry') {

    chemistryRoom();

  } else if (currentState === 'recipe') {

    recipeCard();

  } else if (currentState === 'editScans'){

    editScans();

  } else if (currentState === 'processingMachine'){

    processing();

  } else if (currentState === 'splicing'){

    splicing();

  } else if (currentState === 'splicing2'){

    isoPage();

  } else if (currentState === 'easterEgg'){

    easterEgg();

  } if (isFullscreen) {

    updateElementPositions(); //for buttons

  }

}

​

function updateElementPositions() {

  // positions of buttons

  start.position(windowWidth*0.8, windowHeight/8);

  instructions.position(windowWidth*0.6, windowHeight/8);

  returnHome.position(windowWidth*0.8, windowHeight* 0.9);

  recipe.position(windowWidth*0.65, windowHeight*0.35);

  ready.position(windowWidth-450, windowHeight-260);

  iso.position(windowWidth * 0.5, windowHeight * 0.6);

  blueButton.position(windowWidth * 0.2, windowHeight * 0.7);

  redButton.position(windowWidth * 0.31, windowHeight * 0.7);

  greenButton.position(windowWidth * 0.41, windowHeight * 0.7);

  yellowButton.position(windowWidth * 0.52 - 10, windowHeight * 0.7);

  musicButton.position(windowWidth * 0.9, 10);

}

function mouseClicked(){

  if(mouseX < 140 && mouseY > windowHeight-220 && currentState === 'homepage'){ //open external website from filmy dancing

   window.open('https://www.5rphotolab.com/');

  } //return back to processing room, reset everything

  else if(mouseX < 100 && mouseY > windowHeight-100 && (currentState === 'mixChemistry' || currentState === 'editScans' || currentState === 'processingMachine' || currentState === 'splicing' || currentState === 'easterEgg')){ //going from station to 'employee'

    //resetting the games when we leave 

    if (currentState === 'editScans'){

      dustCount = 10;

      timer = 15;

      circles = []; //deleting circles if user didnt

      //clear them all the first time

      //generating new circles 

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

        //after full screen so window ratio smaller

        let widthRange = random(windowWidth*0.25, windowWidth * 0.7)

        let heightRange = random(windowHeight*0.25, windowHeight * 0.75) //add circles to the array

        circles.push(new Circle(widthRange, heightRange, random(5, 15)));

      }

    } 

    if(currentState === 'mixChemistry'){

      //reset lives and rectangle heights

      lives = 2;

      blueHeight = 0;

      redHeight = 0;

      greenHeight = 0;

      yellowHeight = 0;

    }

    currentState = 'employee';

    //hide buttons from mix chemistry or whatever game needed

    recipe.hide();

    iso.hide();

    blueButton.hide();

    redButton.hide();

    greenButton.hide();

    yellowButton.hide();

    //go back to the start page

  } else if(mouseX < 100 && mouseY > windowHeight-100 && currentState === 'splicing2'){

    currentState = 'splicing';

  }else if(mouseX < 100 && mouseY > windowHeight-100 && currentState !== 'homepage'){

    currentState = 'homepage';

    start.show();

    instructions.show();

  } //open chemistry mixing room

  else if(mouseX > windowWidth - 150 && mouseY > windowHeight-400 && mouseY < windowHeight && currentState == 'employee'){

    currentState = 'mixChemistry';

    homebutton = false;

    //open splicing film info card

  } else if(mouseX > windowWidth/2 && mouseX < (windowWidth/2+175) && mouseY > windowHeight/2 && mouseY < (windowHeight/2-60 +175) && currentState == 'employee'){

    currentState = 'splicing';

    //open processing machine/label room

  } else if(mouseX > windowWidth/3.5 && mouseX < (windowWidth/3.5+165) && mouseY > windowHeight/2-60 && mouseY < (windowHeight/2-60 +230) && currentState == 'employee'){

    currentState = 'processingMachine';

  //open scanning screen

  } else if(mouseX > 30 && mouseX < 275 && mouseY > windowHeight*0.4 && mouseY < (windowHeight/2 +250) && currentState == 'employee'){

    time = 15;

    currentState = 'editScans';

  } else if(mouseX > 50 && mouseX < 240 && mouseY > windowHeight*0.2 + 50 && mouseY < (windowHeight/2) - 20 && currentState == 'employee'){

    currentState = 'easterEgg';

  }

}

​

//main homescreen where user starts

function homepage() {

  image(homepageBackground, 0, 0, windowWidth, windowHeight);

   //image(playPause, windowWidth-100, windowHeight - 100, 25);

  //filmy dance to go to external 5R website

  if (mouseX < 140 && mouseY > windowHeight - 220) {

    image(website, 0, 0, windowWidth, windowHeight);

  }

}

function instructionsPage(){ //instructions manual

  image(instructionScreen, 0, 0, windowWidth, windowHeight);

  instructions.hide();

  start.hide();

  returnHome.show();

}

//game 1 - mixing chemistry

function chemistryRoom(){

  //where we want rectangle to start growing from

  let baseY = windowHeight * 0.51; 

  image(mixChemistry, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

  fill('rgb(185,130,62)');

  textSize(30);

  text("Let's mix some chemistry!", windowWidth/2, windowHeight/10-15);

  blueButton.show();

  redButton.show();

  greenButton.show();

  yellowButton.show();

  //hover feature

  if(mouseX < 100 && mouseY > windowHeight-100 && !homebutton){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("processing room!", 90, windowHeight-30);

  }

  textSize(30);

  fill('black');

  text("Click the solution manual", windowWidth * 0.71, windowHeight * 0.22);

  text("to reveal it's recipe!", windowWidth * 0.71, windowHeight * 0.25);

  text("Play close attention!", windowWidth * 0.71, windowHeight * 0.7);

  text("You only have 2 chances", windowWidth * 0.71, windowHeight * 0.73);

  text("to view the card.", windowWidth * 0.71, windowHeight * 0.76);

  textSize(30);

  text("Remaining reveals:", windowWidth * 0.3, windowHeight * 0.76 + 10);

  text(lives, windowWidth * 0.43, windowHeight * 0.76 + 10);

  recipe.show();

  //limits recipe card reveals

  if (lives == 0){

    recipe.hide();

    textSize(45);

    fill('grey');

    rect(windowWidth*0.61, windowHeight*0.37, 250, 100, 30);

    fill('black');

    text("No more", windowWidth*0.7, windowHeight*0.4);

    text("reveals!", windowWidth*0.7, windowHeight*0.4 + 50);

  }

  ready.hide();

  //if isgrowing is true and we havent exceeded max then continue adding

  if (grow.blue && blueHeight < maxHeight) blueHeight += growthRate;

  if (grow.red && redHeight < maxHeight) redHeight += growthRate;

  if (grow.green && greenHeight < maxHeight) greenHeight += growthRate;

  if (grow.yellow && yellowHeight < maxHeight) yellowHeight += growthRate;

​

  // drawing rectangles

  fill('#4ba0f7');

  rect(windowWidth * 0.2 + 1.5, baseY - blueHeight, 57, blueHeight);

  fill('#f12721');

  rect(windowWidth * 0.31 - 5.5, baseY - redHeight, 57, redHeight);

  fill('#52c204');

  rect(windowWidth * 0.41 + 2, baseY - greenHeight, 57, greenHeight);

  fill('#ffeb67');

  rect(windowWidth * 0.52 - 3.75, baseY - yellowHeight, 57, yellowHeight);

  fill('black');

  text('1',windowWidth*0.175, windowHeight*0.5);

  text('2',windowWidth*0.175, windowHeight*0.425 - 10);

  text('3',windowWidth*0.175, windowHeight*0.35 - 20);

  if(blueHeight > 117 || greenHeight > 0 || yellowHeight > 117){

    textSize(20);

    //poured too much

    if (!sadTrumpetPlayed2){

          sadTrumpet.play();

          sadTrumpetPlayed2 = true;

        }

    fill('red');

    text("You poured too much!", windowWidth * 0.35, windowHeight * 0.2);

    text("Return to processing room.", windowWidth * 0.35, windowHeight * 0.2 + 20); //have to return to try again

  } else {

    if (blueHeight > 0 && yellowHeight >0 && redHeight > 0){

      if (!yaySoundPlayed2){

          yay.play();

          yaySoundPlayed2 = true;

        }

      fill('green');

      text("Great job!", windowWidth * 0.35, windowHeight * 0.2);

      text("Return to processing room!", windowWidth * 0.35, windowHeight * 0.2 + 30);

    }

  }

}

//also part of chemistry

function recipeCard(){

  image(vialsDetails, 0, 0, windowWidth, windowHeight);

  recipe.hide();

  ready.show();

}

function startGrowing(color) {

  grow[color] = true; //start gorwing the color

}

function stopGrowing(color) {

  grow[color] = false;

}

function splicing(){

  //information card

  image(splicing1, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

   if(mouseX < 100 && mouseY > windowHeight-100){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("processing room!", 90, windowHeight-30);

  }

  iso.show(); //reveal more information

}

function isoPage(){

  //more info

  image(splicing2, 0, 0, windowWidth, windowHeight);

  iso.hide();

  image(arrow, 25, windowHeight-115, 100, 100);

   if(mouseX < 100 && mouseY > windowHeight-100){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("previous tab!", 90, windowHeight-30);

  }

}

//in the processing machine, learning resource

function processing(){

  image(cameraLabel, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

   if(mouseX < 100 && mouseY > windowHeight-100){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("processing room!", 90, windowHeight-30);

  }

}

//editing scans game

function editScans(){

  image(editingScreen, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

  if(mouseX < 100 && mouseY > windowHeight-100){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("processing room!", 90, windowHeight-30);

  }

  fill('black');

  textSize(23);

  text(timer, width/2.8, height/5.4);

  text("Dust remaining: ", width/1.9, height/5.4);

  text(dustCount, width/1.66, height/5.4)

  //generating the circles

  //tried going forwards but it made a weird glitch

  //figure out why

  for (let i = circles.length - 1; i >= 0; i--) {

    circles[i].show(); //making them all appear

    if (circles[i].isClicked(mouseX, mouseY)) {

      circles.splice(i, 1); // remove the clicked circle

      dustCount --;

    }

    if(mouseX < 100 && mouseY > windowHeight-100){

      fill('rgb(54,54,146)');

      rect(15, windowHeight-65, 150, 50, 15);

      fill('white');

      textSize(15);

      text("Return to", 90, windowHeight-50);

      text("processing room!", 90, windowHeight-30);

    }

  }

  frameRate(30); //so that the timer speed is more accurate 

  if (frameCount % 30 == 0 && timer > 0) { // if the frameCount is divisible by 60, then a second has passed. it will stop at 0

    timer --;

  } //user action responses - audio

    if (timer == 0 || circles.length == 0) {

      if (circles.length == 0 ) {

        if (!yaySoundPlayed){

          yay.play();

          yaySoundPlayed = true;

        }

        fill('green');

        text("Good job! Return to the processing room.", windowWidth * 0.5, windowHeight*0.82);

      } else {

        textSize(20);

        if (!sadTrumpetPlayed){

          sadTrumpet.play();

          sadTrumpetPlayed = true;

        }

        fill('red');

        text("Better luck next time! Return to the processing room.", windowWidth * 0.5, windowHeight*0.82);

      }

    }

}

//circle class for random dust dots on scan

class Circle {

  //valid for each individual circle

  constructor(x, y, r) {

    //randomly generated values

    this.x = x;

    this.y = y;

    this.r = r;  

    this.col = color('grey');  

  }

  // drawing circ;e

  show() {

    fill(this.col);

    noStroke();

    ellipse(this.x, this.y, this.r * 2);

  }

  // was circle object clicked

  isClicked(px, py) {

    //check if dist between mouse/circle and radius

    let d = dist(px, py, this.x, this.y);

    if (d < this.r && mouseIsPressed) {

      return true;

    }

    return false;

  }

}

//hidden photos easter egg

function easterEgg(){

  image(hiddenPhotos, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

   if(mouseX < 100 && mouseY > windowHeight-100){

    fill('rgb(54,54,146)');

    rect(15, windowHeight-65, 150, 50, 15);

    fill('white');

    textSize(15);

    text("Return to", 90, windowHeight-50);

    text("processing room!", 90, windowHeight-30);

  }

}

//base of the code to make the different mini cames accessible 

function employeeGame(){

  image(processingRoom, 0, 0, windowWidth, windowHeight);

  image(arrow, 25, windowHeight-115, 100, 100);

  if(mouseX < 100 && mouseY > windowHeight-100 && currentState === 'employee'){

    fill('rgb(54,54,146)');

    textSize(15);

    rect(10, windowHeight-33, 120, 25, 15);

    fill('white');

    text("Return home?", 70, windowHeight-20);

  }

  //making buttons go away

  start.hide();

  instructions.hide();

  //instructions

  fill(' rgb(185,130,62)');

  textSize(30);

  textAlign();

  text("Welcome to the processing room!", windowWidth/2, windowHeight/10-15);

  noStroke();

  textSize(20);

  rect(windowWidth/3, windowHeight/5-5, 400, 100, 30);

  fill('white');

  textAlign(CENTER, CENTER)

  text("Working from right to left, let's do some processing and learn a bit more about film!\n", windowWidth/3, windowHeight/5-10, 400, 140);

  fill(' rgb(185,130,62)');

  textSize(30);

  //mouse is over editing station

  if(mouseX > 30 && mouseX < 275 && mouseY > windowHeight*0.4 && mouseY < (windowHeight/2 +250)){

   image(editLightUp, 0, 0, windowWidth, windowHeight);

    text("Edit film scans", windowWidth/2, windowHeight/10-15);

  }

  //mouse is over processing machine

  if(mouseX > windowWidth/3.5 && mouseX < (windowWidth/3.5+165) && mouseY > windowHeight/2-60 && mouseY < (windowHeight/2-60 +230)){

   image(machineLightUp, 0, 0, windowWidth, windowHeight);

    text("Develop the film", windowWidth/2, windowHeight/10-15);

  }

  //mouse is over splicing table

  if(mouseX > windowWidth/2 && mouseX < (windowWidth/2+250) && mouseY > windowHeight/2 && mouseY < (windowHeight/2-60 +175)){

   image(splicingLightUp, 0, 0, windowWidth, windowHeight);

    text("Splice & prep the film", windowWidth/2, windowHeight/10-15);

  }

  //mouse is over mixing table

  if(mouseX > windowWidth - 150 && mouseY > windowHeight-400 && mouseY < windowHeight){

   image(mixingLightUp, 0, 0, windowWidth, windowHeight);

    text("Make the chemistry", windowWidth/2, windowHeight/10-15);

  }

  //mouse is over negatives

  //easter egg!!!

  //mouse is over editing station

  if(mouseX > 50 && mouseX < 240 && mouseY > windowHeight*0.2 + 50 && mouseY < (windowHeight/2) - 20){

   image(negativesAura, 0, 0, windowWidth, windowHeight);

    text("You found the easter egg!", windowWidth/2, windowHeight/10-15);

  }

}