let s21, s22, s23;

let screen = 1;

​

let fs1, fs2, fs3;

let button1 = 1;

let button2 = 1;

​

​

function preload() {

  img1 = loadImage('homescreen.png');

  img2 = loadImage('Music.png');

​

​

  s21 = loadSound('Sounds/drum1.wav');

  s22 = loadSound('Sounds/drum2.wav');

  s23 = loadSound('Sounds/drum3.wav');

}

​

function setup() {

  createCanvas(1440, 900);

}

​

function draw() {  

​

  if (!serialActive) {

      background(255);

    text("Press up arrow to select Serial Port", 20, 30); //make sure connection is working

  } 

  else if(screen === 1){

    //display home screen

    image(img1,0, 0, 900, 600); 

  }

  else if(screen ===2){

          //display the 2nd screen

          image(img2,0, 0, 900, 600);

          //read data from force sensors. play the sounds and draw the ellipses accordingly 

          if(fs1 > 10){

            s21.play();

          }

          if(fs2 > 10){

            s22.play();

          }

          if(fs3 > 10){

            s23.play();

          }

  }

​

​

  if(screen != 1 && button2 != 1){ //if not on homescreen return back to homescreen

    screen = 1;

  }

}

​

function keyPressed(){

  if (keyCode == UP_ARROW) {

    //start the serial connection!!

    setUpSerial();

  }

​

}

​

function readSerial(Data) {

  if(Data != null) {

    let fromArduino = split(trim(Data), ",");

    if (fromArduino.length == 6) {

      // store values here and use them in the main draw loop

      fs1 = int(fromArduino[0]); //Data from force sensor 1

      fs2 = int(fromArduino[1]); //Data from force sensor 2

      fs3 = int(fromArduino[2]);  //Data from force sensor 3

      button1 = int(fromArduino[3]); //Data from button 1 red

      button2 = int(fromArduino[4]);//Data from button 2 yellow 

      if(button1 != 1 && screen == 1){ //if button value is zero, then it is pressed so change screen

      screen++;

      }

    }

  }

}