//background stuff

let currentState = 'homepage';

let isFullscreen = false;

let startUp;

let whyDance;

let instructions;

let mapMain;

let instrPic;

​

​

//dance videos

let colombiaVideos = [];

let indiaVideos = [];

let koreaVideos = [];

let chinaVideos = [];

let saVideos = [];

let fpVideos = [];

let kazakhVideos = [];

let prVideos = [];

let italyVideos = [];

let nigeriaVideos = [];

let currentVideos = []; // Currently active video collection

let currentVideoIndex = 0;

​

//dance mirror

let mirror;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  //loading backgrounds

  startUp = loadImage('startup.png');

  whyDance = loadImage('objective.png');

  arrow = loadImage('arrow.png');

  mapMain = loadImage('mapHome.png');

  instrPic = loadImage('Final (5).png');

  //homepage button - objectives

  enterWD = createButton('Why Dance?'); 

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

  enterWD.style('font-size', '30px');

  enterWD.style('background-color', '#8A62BE');

  enterWD.size(250, 100);

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

  enterWD.position(windowWidth*0.7, windowHeight*0.3);

  enterWD.mousePressed(() => currentState = 'objectives');

  enterWD.hide();

  //button to start 

  start = createButton('Get started!'); 

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

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

  start.style('background-color', 'rgb(96,166,252)');

  start.size(250, 100);

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

  start.position(windowWidth*0.7, windowHeight*0.45);

  //start the game

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

  start.hide();

  //button to start 

  instructions = createButton('Instructions!'); 

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

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

  instructions.style('background-color', 'rgb(207,55,151)');

  instructions.size(250, 100);

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

  instructions.position(windowWidth*0.7, windowHeight*0.15);

  //start the game

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

  instructions.hide();

  returnHome = createButton('Return Home?'); 

  // editing appearancet

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

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

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

  returnHome.size(150, 50);

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

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

  returnHome.mousePressed(() => {

    returnHome.hide();

    start.show();

    enterWD.show();

    currentState = 'homepage';

  });

  returnHome.hide();

  //colombia video

  colombiaVideos.push(createVideo('colombia.MOV')); //intro vid

  colombiaVideos.push(createVideo('colombiapt1.mp4'));

  colombiaVideos.push(createVideo('colombiapt2.mp4'));

  colombiaVideos.push(createVideo('colombiapt3.mp4'));

  colombiaVideos.push(createVideo('colombiapt4.mp4'));

  colombiaVideos.push(createVideo('colombiapt5.mp4'));

  for (let video of colombiaVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //india

  indiaVideos.push(createVideo('india.mov')); //intro video

  indiaVideos.push(createVideo('indiapt1.mp4'));

  indiaVideos.push(createVideo('indiapt2.mp4'));

  indiaVideos.push(createVideo('indiapt3.mp4'));

  indiaVideos.push(createVideo('indiapt4.mp4'));

  indiaVideos.push(createVideo('indiapt5.mp4'));

  indiaVideos.push(createVideo('indiapt6.mp4'));

  for (let video of indiaVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //south korea

  koreaVideos.push(createVideo('korea.mov')); //intro video

  koreaVideos.push(createVideo('koreapt1.mp4'));

  koreaVideos.push(createVideo('koreapt2.mp4'));

  koreaVideos.push(createVideo('koreapt3.mp4'));

  for (let video of koreaVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //china

  chinaVideos.push(createVideo('china.mov')); //intro video

  chinaVideos.push(createVideo('China/part1(split-video.com) (4).mp4'));

  chinaVideos.push(createVideo('China/part2(split-video.com) (3).mp4'));

  chinaVideos.push(createVideo('China/part3(split-video.com) (3).mp4'));

  for (let video of chinaVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //south africa

  saVideos.push(createVideo('03CE5AB3-8E3C-4814-B856-A30E0A7283AB 5.MOV')); //intro video

  saVideos.push(createVideo('southafrica.mp4'));

  for (let video of saVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

   //french polynesia 

  fpVideos.push(createVideo('fp.mov')); //intro video

  fpVideos.push(createVideo('polynesia.mp4'));

  for (let video of fpVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

   //kazakhstan 

  kazakhVideos.push(createVideo('kazakh.mov')); //intro video

  kazakhVideos.push(createVideo('kazakhpt1.mp4'));

  kazakhVideos.push(createVideo('kazakhpt2.mp4'));

  kazakhVideos.push(createVideo('kazakhpt3.mp4'));

  for (let video of kazakhVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //puerto rico 

  prVideos.push(createVideo('pr.mov')); //intro video

  prVideos.push(createVideo('prpt1.mp4'));

  prVideos.push(createVideo('prpt2.mp4'));

  prVideos.push(createVideo('prpt3.mp4'));

  prVideos.push(createVideo('prpt4.mp4'));

  for (let video of prVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //italy 

  italyVideos.push(createVideo('italy.mov')); //intro video

  italyVideos.push(createVideo('italypt1real.mp4')); //need to add

  italyVideos.push(createVideo('italypt1.5.mp4'));

  italyVideos.push(createVideo('italypt2.mp4'));

  for (let video of italyVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //nigeria 

  nigeriaVideos.push(createVideo('nigeria.mov')); //intro video

  nigeriaVideos.push(createVideo('nigeriapt1.mp4')); //need to add

  nigeriaVideos.push(createVideo('nigeriapt2.mp4'));

  nigeriaVideos.push(createVideo('nigeriapt3.mp4'));

  nigeriaVideos.push(createVideo('nigeriapt4.mp4'));

  for (let video of nigeriaVideos) {

    video.hide();

    video.onended(nextVideo); // Call nextVideo when the video ends

  }

  //creating camera for mirror effect

  mirror = createCapture(VIDEO);

  mirror.size(250, 200); // Set the size of the webcam feed

  mirror.hide();

}

​

function keyPressed() { 

  //going to fullscreen for f

  if (key === 'f') {

    isFullscreen = !isFullscreen;

    fullscreen(isFullscreen);

  } else if (key == " ") {

    setUpSerial(); 

  }

}

function readSerial(data) {

  //just to avoid no readSerial error saving data

  if (data != null) {

    //console.log(data);

    if (data.trim() === "colombia") { 

      switchToCollection(colombiaVideos);

    } else if (data.trim() === "india") { 

      switchToCollection(indiaVideos);

    } else if (data.trim() === "korea") { 

      switchToCollection(koreaVideos);

    } else if (data.trim() === "china") { 

      switchToCollection(chinaVideos);

    } else if (data.trim() === "sa") { 

      switchToCollection(saVideos);

    } else if (data.trim() === "fp") { 

      switchToCollection(fpVideos);

    } else if (data.trim() === "kazakh") { 

      switchToCollection(kazakhVideos);

    } else if (data.trim() === "pr") { 

      switchToCollection(prVideos);

    } else if (data.trim() === "nigeria") { 

      switchToCollection(nigeriaVideos);

    } else if (data.trim() === "italy") { 

      switchToCollection(italyVideos);

    }

  }

}

​

//resizing window automaticall

function windowResized() { 

  resizeCanvas(windowWidth, windowHeight);

}

//making sure each backdrop is being redrawn

function draw() {

  background(250);

  //setting up the serial port information

  if (!serialActive) {

    text("Press Space Bar to select Serial Port", 20, 30);

  } else {

    if (currentState === 'mapHome') {

      mapHome();

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

      objectives();

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

      instructionsScreen();

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

      homepage();

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

      enterWD.hide();

      start.hide();

      image(currentVideos[currentVideoIndex], 0, 0, width, height);

     // image(mirror, 10, height - 210, 250, 200); 

      translate(mirror.width, 0);

      //then scale it by -1 in the x-axis

      //to flip the image

      scale(-1, 1);

      //draw video capture feed as image inside p5 canvas

      image(mirror, -25, height - 210);

      fill('rgba(214,133,214,0.67)');

      rect(-15, height - 200, 225, 25, 50);

      fill('black');

      noStroke();

      textSize(20);

      scale(-1, 1);

      text("Nice dance moves!", -175, height - 183);

    } if (isFullscreen) {

      updateElementPositions(); //for buttons

    }

  }

}

//updating button positions

function updateElementPositions() {

  start.position(windowWidth*0.7, windowHeight*0.45);

  enterWD.position(windowWidth*0.7, windowHeight*0.3);

  instructions.position(windowWidth*0.7, windowHeight* 0.15);

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

}

function mouseClicked(){

  if (mouseX < 150 && mouseY < 250) {

    currentState = 'homepage';

    //enterWD.show();

    //start.show();

  }

}

function homepage(){

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

  start.show();

  enterWD.show();

  instructions.show();

}

function mapHome(){

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

  enterWD.hide();

  start.hide();

  instructions.hide();

  returnHome.hide();

  if (mouseX < 150 && mouseY < 250) {

    fill('rgb(166,121,223)');

    fill('white');

    textFont('Courier New');

    textSize(20);

    text("Return home?", 30, windowHeight*0.12);

  }

}

function objectives(){

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

  enterWD.hide();

  start.hide();

  instructions.hide();

  returnHome.show();

}

function instructionsScreen(){

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

  enterWD.hide();

  start.hide();

  instructions.hide();

  returnHome.show();

}

function switchToCollection(videoCollection) {

  //console.log('wassup');

  currentVideos = videoCollection; // set which video collection is playing

  currentVideoIndex = 0; // reset video index

  currentState = 'playingVideos';

  playCurrentVideo();

}

​

function playCurrentVideo() {

  //console.log('yo');

  if (currentVideos[currentVideoIndex]) {

    //if lines up array, paly video

    currentVideos[currentVideoIndex].show();

    currentVideos[currentVideoIndex].play();

  }

}

​

function nextVideo() {

  // stop current video

  //console.log('hi');

  currentVideo = currentVideos[currentVideoIndex];

  currentVideo.stop();

  currentVideo.hide();

​

  // move to the next video

  currentVideoIndex++;

  if (currentVideoIndex < currentVideos.length) {

    //if we havent played all the videos 

    playCurrentVideo(); //play the next video

  } else {

    // all video parts done

    currentVideoIndex = 0; // reset index

    currentState = 'mapHome'; // return to map

  }

}

​

​