let s21, s22, s23, s31, s32, s33 , s41, s42, s43 ,s51 ,s52, s53 , s61, s62 , s63 , s71, s72, s73;

let screen = 1;

let mic, recorder, soundFile;

let state = 0;

let fs1, fs2, fs3;

let button1 = 1;

​

function preload() {

  img1 = loadImage('homescreen.png');

  img2 = loadImage('Music.png');

  img3 = loadImage('Nature.png');

  img4 = loadImage('factory.png');

​

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

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

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

  s31 = loadSound('Sounds/nature1.wav');

  s32 = loadSound('Sounds/nature2.wav');

  s33= loadSound('Sounds/nature3.wav');

  s41= loadSound('Sounds/factory1.wav');

  s42 = loadSound('Sounds/factory2.wav');

  s43 = loadSound('Sounds/factory3.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();

            fill(220,0,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60)); //!!!!change this to map the size to the force value

          }

          if(fs2 > 10){

            s22.play();

            fill(0,220,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

          if(fs3 > 10){

            s23.play();

            fill(0,0,220,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

  }else if(screen === 3){

          //display 3rd screen

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

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

          if(fs1 > 10){

            s31.play();

            fill(220,0,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60)); //!!!!change this to map the size to the force value

          }

          if(fs2 > 10){

            s32.play();

            fill(0,220,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

          if(fs3 > 10){

            s33.play();

            fill(0,0,220,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

  }else if(screen === 4){

          //display 4th screen

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

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

          if(fs1 > 10){

            s41.play();

            fill(220,0,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60)); //!!!!change this to map the size to the force value

          }

          if(fs2 > 10){

            s42.play();

            fill(0,220,0,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

          if(fs3 > 10){

            s43.play();

            fill(0,0,220,30);

            ellipse(random(50,width-30), random(20,height-20), random(10, 60));

          }

        }

}

​

function keyPressed(){

  if (keyCode == UP_ARROW) {

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

    setUpSerial();

  }

​

  if(keyCode === ENTER){

    screen = 1;

  }

  // if(keyCode === RIGHT_ARROW){

  //   screen++;

  // }

  // else if(screen != 1 && keyCode === 32){ //will be changed to the red button

  //   //trigger record sound

  // }else if(screen === 2 && keyCode === RIGHT_ARROW){ // changed to sesnor 1

  //   s21.play(); 

  // }else if(screen === 2 && keyCode === DOWN_ARROW){ // changes to sensor 2

  //   s22.play(); 

  // }else if(screen === 2 && keyCode === LEFT_ARROW){ // chnaged to sensor 3

  //   s23.play(); 

  // }

​

}

​

function readSerial(Data) {

  if(Data != null) {

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

    if (fromArduino.length == 4) {

      // 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

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

        screen++;

        if(screen>4){//if last screen is reached loop through

          screen =2;

        }

      }

    }

  }

}