// let alpha = 255;

// let left = 0;

// let right = 0;

// let victory = 0;

​

let mode = 1;

let counter =1;

let cntmod = 0;

let check1 = 1;

let compsign;

let plsign;

​

​

​

let video;

let classifier;

let label = 'loading...';

​

let change = 0;

​

let round = 1;

​

let opponent_score = 0;

let avatar_score = 0;

​

let moves = ['rock', 'paper', 'scissors'];

let opponent_move_1;

let opponent_move_2;

let opponent_move_3;

​

​

function preload(){

  classifier = ml5.imageClassifier('https://teachablemachine.withgoogle.com/models/Xk2dAwXyw/'+'model.json')

  unicornfont = loadFont('GoodUnicornRegular-Rxev.ttf');

  background_1 = loadImage("background_1.jpg");

  background_2 = loadImage("background_2.jpg");

  background_3 = loadImage("background_3.jpg");

  background_4 = loadImage("background_4.jpg");

  background_5 = loadImage("background_5.jpg");

  background_6 = loadImage("background_6.jpg");

  background_7a = loadImage("background_7a.jpg");

  background_7b = loadImage("background_7b.png");

  background_11 = loadImage("background_11.jpg");

  thumbs_up = loadImage("thumbs_up.png");

  rock_sign = loadImage("rock_sign.png");

  paper_sign = loadImage("paper_sign.png");

  scissors_sign = loadImage("scissors_sign.png");

  rock_sign_flip = loadImage("rock_sign_flip.png");

  paper_sign_flip = loadImage("paper_sign_flip.png");

  scissors_sign_flip = loadImage("scissors_sign_flip.png");

  battlefield = loadImage("battlefield.jpg");

  countdown_1 = loadImage("countdown_1.png");

  countdown_2 = loadImage("countdown_2.png");

  countdown_3 = loadImage("countdown_3.png");

  go = loadImage("go.png");

}

​

​

function setup() {

  createCanvas(640, 480);

  // textSize(18);

  // // it will try to find an arduino you've already given permission to use in the browser:

  // setUpSerial();

  // Create the video

  video = createCapture(VIDEO);

  video.hide();

  classifyVideo();

  opponent_move_1 = random(moves);

  opponent_move_2 = random(moves);

  opponent_move_3 = random(moves);

}

​

function classifyVideo(){

  classifier.classify(video, gotResults)

}

​

function draw() {

  // one value from Arduino controls the background's red color

//   background(map(rVal, 0, 1023, 0, 255), 255, 255);

​

//   // the other value controls the text's transparency value

//   fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

​

//   if (!serialActive) {

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

//   } else {

//     text("Connected", 20, 30);

//   }

​

  // click on one side of the screen, one LED will light up

  // click on the other side, the other LED will light up

  // if (mouseIsPressed) {

  //   if (mouseX <= width / 2) {

  //     left = 1;

  //   } else {

  //     right = 1;

  //   }

  // } else {

  //   left = right = 0;

  // }

  switch(mode){

      case(1):

        startingScreen();

        textSize(32);

        textAlign(CENTER, CENTER);

        fill(0);

        text(label, width/2, height-16);

        break;

      case(2):

        screen_2();

        break;

      case(3):

        screen_3();

        break;

      case(4):

        screen_4();

        break;

      case(5):

        screen_5();

        break;

      case(6):

        screen_6();

        break;

      case(7):

        screen_7();

        break;

      case(12):

        screen_8();

        break;

      case(8):

        round_1();

        break;

      case(9):

        round_2();

        break;

      case(10):

        round_3();

        break;

      case(11):

        restart();

        break;

  }

  // image(video, 0, 0);

}

​

// if it can't find an Arduino that you have allowed before (given permission to use) then you need a user gesture to run setUpSerial() again

// this time pass SELECT_PORT to setUpSerial() to force the select port process

// function keyPressed() {

//   if (key == " ") {

//     // important to have in order to start the serial connection!!

//     setUpSerial(SELECT_PORT);

//   }

// }

​

// function readSerial(data) {

//   ////////////////////////////////////

//   //READ FROM ARDUINO HERE

//   ////////////////////////////////////

​

//   if (data != null) {

//     // make sure there is actually a message

//     // split the message

//     let fromArduino = split(trim(data), ",");

//     // if the right length, then proceed

//     if (fromArduino.length == 2) {

//       // only store values here

//       // do everything with those values in the main draw loop

//       rVal = fromArduino[0];

//       alpha = fromArduino[1];

//     }

​

//     //////////////////////////////////

//     //SEND TO ARDUINO HERE (handshake)

//     //////////////////////////////////

//     let sendToArduino = left + "," + right +"," + victory +"\n";

//     writeSerial(sendToArduino);

//   }

// }

​

function gotResults(error, results){

  if (error){

    consol.error(error);

    return

  }

  label = results[0].label

  classifyVideo();

}

function startingScreen(){

  push();

  imageMode(CENTER);

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

  image(thumbs_up, width*0.7, height*0.8, width*0.1, height*0.1);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Rock";

  let s2 = "Paper";

  let s3 = "Scissors!";

  let s4 = "Show a thumbs-up to start";

  let s5 = "START";

  textSize(100);

  fill(0);

  text(s1,width/2, height/7);

  text(s2,width/2, height/7+75);

  text(s3,width/2, height/7+150);

  textSize(50);

  text(s4,width/2, height/5+220);

  textSize(100);

  text(s5,width/2, height/5+300);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 2;

    change = 0;

  }

  pop();

}

​

function screen_2(){

  push();

  imageMode(CENTER);

  image(background_2, width*0.5, height*0.5, width, height);

  image(rock_sign, width*0.5, height*0.4, width*0.3, height*0.3);

  image(thumbs_up, width*0.9, height*0.05, width*0.05, height*0.05);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "ROCK";

  let s2 = "next";

  textSize(100);

  fill(0);

  text(s1,width/2, height/7);

  textSize(30)

  text(s2,width*0.96, height*0.04);

​

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 3;

    change = 0;

  }

  pop();

}

  function screen_3(){

  push();

  imageMode(CENTER);

  image(background_3, width*0.5, height*0.5, width, height);

  image(paper_sign, width*0.5, height*0.4, width*0.3, height*0.3);

  image(thumbs_up, width*0.9, height*0.05, width*0.05, height*0.05);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "PAPER";

  let s2 = "next";

  textSize(100);

  fill(0);

  text(s1,width/2, height/7);

  textSize(30)

  text(s2,width*0.96, height*0.04);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 4;

    change = 0;

  }

  pop();

}

function screen_4(){

  push();

  imageMode(CENTER);

  image(background_4, width*0.5, height*0.5, width, height);

  image(scissors_sign, width*0.5, height*0.4, width*0.3, height*0.3);

  image(thumbs_up, width*0.9, height*0.05, width*0.05, height*0.05);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "SCISSORS";

  let s2 = "next";

  textSize(100);

  fill(255);

  text(s1,width/2, height/7);

  textSize(30)

  text(s2,width*0.96, height*0.04);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 5;

    change = 0;

  }

  pop();

}

​

function screen_5(){

  push();

  imageMode(CENTER);

  image(background_5, width*0.5, height*0.5, width, height);

  image(thumbs_up, width*0.9, height*0.05, width*0.05, height*0.05);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "These nations lived peacefully";

  let s3 = "amongst one another";

  let s4 = "until one day...";

  let s2 = "next";

  textSize(50);

  fill(0);

  text(s1,width/2, height/4);

  text(s3, width/2, height/4 + 50);

  text(s4, width/2, height/4 + 130);

  textSize(30)

  text(s2,width*0.96, height*0.04);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 6;

    change = 0;

  }

  pop();

}

​

function screen_6(){

  push();

  imageMode(CENTER);

  tint(255, 80);

  image(background_6, width*0.5, height*0.5, width, height);

  tint(255, 255);

  image(thumbs_up, width*0.86, height*0.05, width*0.05, height*0.05);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "A false messiah had risen up";

  let s2 = "The one who is responsible";

  let s3 = "for the ongoing 100 year war";

  let s4 = "amongst the great nations";

  let s5 = "next";

  textSize(60);

  fill(0);

  text(s1,width/2, height/3.5);

  text(s2, width/2, height/3.5 + 60);

  text(s3, width/2, height/3.5 + 120);

  text(s4, width/2, height/3.5 + 180);

  textSize(40)

  text(s5,width*0.94, height*0.06);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 7;

    change = 0;

  }

  pop();

}

​

function screen_7(){

  push();

  imageMode(CENTER);

  image(background_7a, width*0.5, height*0.5, width, height);

  tint(255, 80);

  image(background_7b, width*0.5, height*0.5, width, height);

  tint(255,255);

  image(thumbs_up, width*0.75, height*0.65, width*0.1, height*0.1);

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Only you, the Avatar, can defeat him";

  let s3 = "You can wield all 3 elements";

  let s4 = "and end the messiah's rain of terror";

  let s2 = "Instructions";

  textSize(50);

  fill(255);

  text(s1,width/2, height/5);

  text(s3, width/2, height/5 + 50);

  text(s4, width/2, height/5 + 100);

  textSize(70);

  text(s2,width/2, height/5+250);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 12;

    change = 0;

  }

  pop();

}

function screen_8(){

  push();

  imageMode(CENTER);

  image(background_11, width*0.5, height*0.5, width, height);

  image(thumbs_up, width*0.69, height*0.73, width*0.1, height*0.1);

​

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Instructions"

  let s2 = "Have your move ready when the ";

  let s3 = "countdown shows 1";

  let s4 = "Each round is worth 1 point";

  let s5 = "Highest scorer by the end of 3 rounds wins";

  let s6 = "START"

  textSize(70);

  fill(255);

  text(s1,width/2, height/5);

  textSize(40);

  text(s2, width/2, height/5 + 70);

  text(s3, width/2, height/5 + 120);

  text(s4,width/2, height/5+170);

  text(s5,width/2, height/5+220);

  textSize(70);

  text(s6,width/2, height/5+300);

  if (label == 'nothing'){

    change = 1;

  }

  if (label == 'thumbs_up' && change == 1){

    mode = 8;

    change = 0;

  }

  pop();

}

​

function round_1(){

  push();

  counter+=1;

  imageMode(CENTER);

  image(battlefield, width*0.5, height*0.5, width, height);

​

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Round 1";

  let s2 = "Opponent Score:";

  let s3 = "Avatar Score:";

  let s4 = opponent_score;

  let s5 = avatar_score;

​

  textSize(100);

  fill(255);

  text(s1,width*0.5, height*0.15);

​

  textSize(30);

  fill(255,0,0);

  text(s2,width*0.15, height*0.2);

  text(s4, width*0.15+90, height*0.2);

  text(s3, width*0.8, height*0.2);

  text(s5, width*0.8+80, height*0.2);

  if(counter<=50){

  image(countdown_3, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=100){

  image(countdown_2, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=150){

  image(countdown_1, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else{

    image(go, width*0.5, height*0.5, width*0.2, height*0.2);

    compsign = opponent_move_1;

    plsign = label;

    if(check1 == 1)

    {if(opponent_move_1 == 'rock'){

      image(rock_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        opponent_score = opponent_score + 1;

        left = 1;

        print(1);

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        avatar_score = avatar_score + 1;

        right = 1;

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    }

    else if(opponent_move_1 == 'paper'){

      image(paper_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        avatar_score = avatar_score + 1;

        right = 1;

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        opponent_score = opponent_score + 1;

        left = 1;

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

​

    }

    else if(opponent_move_1 == 'scissors'){

      image(scissors_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'rock'){

        avatar_score = avatar_score + 1;

        right = 1;

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        opponent_score = opponent_score + 1;

        left = 1;

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'scissors'){

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    }

    }

    if (plsign == 'rock'){

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (plsign == 'paper'){

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (plsign == 'scissors'){

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    if (compsign == 'rock'){

        image(rock_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

      else if (compsign == 'paper'){

        image(paper_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

      else if (compsign == 'scissors'){

        image(scissors_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

    check1=0;

    cntmod+=1;

    if(cntmod>100){

      mode=9;

      cntmod = 0;

      checkmod = 1;

      check1=1;

      counter=0;

      left = 0;

      right = 0

    }

  }

  pop();

}

  function round_2(){

  push();

  counter+=1;

  imageMode(CENTER);

  image(battlefield, width*0.5, height*0.5, width, height);

​

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Round 2";

  let s2 = "Opponent Score:";

  let s3 = "Avatar Score:";

  let s4 = opponent_score;

  let s5 = avatar_score;

  textSize(100);

  fill(255);

  text(s1,width*0.5, height*0.15);

​

  textSize(30);

  fill(255,0,0);

  text(s2,width*0.15, height*0.2);

  text(s4, width*0.15+90, height*0.2);

  text(s3, width*0.8, height*0.2);

  text(s5, width*0.8+80, height*0.2);

  if(counter<=50){

  image(countdown_3, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=100){

  image(countdown_2, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=150){

  image(countdown_1, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else{

    image(go, width*0.5, height*0.5, width*0.2, height*0.2);

    compsign=opponent_move_2;

    plsign=label;

    if(check1==1)

    {if(opponent_move_2 == 'rock'){

      image(rock_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        opponent_score = opponent_score + 1;

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        avatar_score = avatar_score + 1;

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    }

    else if(opponent_move_2 == 'paper'){

      image(paper_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        avatar_score = avatar_score + 1;

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        opponent_score = opponent_score + 1;

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

​

    }

    else if(opponent_move_2 == 'scissors'){

      image(scissors_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'rock'){

        avatar_score = avatar_score + 1;

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        opponent_score = opponent_score + 1;

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'scissors'){

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    }

    }

    if (plsign == 'rock'){

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (plsign == 'paper'){

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (plsign == 'scissors'){

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    if (compsign == 'rock'){

        image(rock_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

      else if (compsign == 'paper'){

        image(paper_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

      else if (compsign == 'scissors'){

        image(scissors_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      }

    check1=0;

    cntmod+=1;

    if(cntmod>100){

      mode=10;

      cntmod = 0;

      checkmod = 1;

      counter=0;

      check1=1;

    }

  }

  pop();

}

 function round_3(){

  push();

  counter+=1;

  imageMode(CENTER);

  image(battlefield, width*0.5, height*0.5, width, height);

​

  textAlign(CENTER);

  textFont(unicornfont);

  let s1 = "Round 3";

  let s2 = "Opponent Score:";

  let s3 = "Avatar Score:";

  let s4 = opponent_score;

  let s5 = avatar_score;

​

  textSize(100);

  fill(255);

  text(s1,width*0.5, height*0.15);

​

  textSize(30);

  fill(255,0,0);

  text(s2,width*0.15, height*0.2);

  text(s4, width*0.15+90, height*0.2);

  text(s3, width*0.8, height*0.2);

  text(s5, width*0.8+80, height*0.2);

  if(counter<=50){

  image(countdown_3, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=100){

  image(countdown_2, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else if(counter<=150){

  image(countdown_1, width*0.5, height*0.5, width*0.2, height*0.2);

  }

  else{

    image(go, width*0.5, height*0.5, width*0.2, height*0.2);

    compsign=opponent_move_3;

    plsign=label;

    if(check1==1)

    {if(opponent_move_3 == 'rock'){

      image(rock_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        opponent_score = opponent_score + 1;

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        avatar_score = avatar_score + 1;

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

    }

    else if(opponent_move_3 == 'paper'){

      image(paper_sign, width*0.2, height*0.5, width*0.3, height*0.3);

      if (label == 'scissors'){

        avatar_score = avatar_score + 1;

        image(scissors_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'rock'){

        opponent_score = opponent_score + 1;

        image(rock_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

      else if (label == 'paper'){

        image(paper_sign_flip, width*0.8, height*0.5, width*0.3, height*0.3);

      }

​

    }

    else if(opponent_move_3 == 'scissors'){

      image(scissors_sign, width*0.2, height*0.5, width*0.3, height*0.3);