let flute_sound;

let ah_sound;

let drum_sound;

let snare_sound;

let bass_sound;

let cry_sound;

let feel_sound;

let filback_sound;

let start;

let button_sound;

​

let frames = 60; // frame rate and timer reference

​

let prev;

let current;

let timer;

​

​

//BUTTONS

let red_button = false;

let red_button2 = false;

let yellow_button = false;

let yellow_button2 = false;

let white_button = false;

let white_button2 = false;

let blue_button = false;

let blue_button2 = false;

​

//LOOP CHECKER

let red_button_play = false;

let red_button2_play = false;

let yellow_button_play = false;

let yellow_button2_play = false;

let white_button_play = false;

let white_button2_play = false;

let blue_button_play = false;

let blue_button2_play = false;

​

//images

let mute_img;

​

let wallpaper;

​

let logo;

​

let bg;

let flute_img;

let ah_img;

let drum_img

let snare_img

let bass_img

let cry_img

let feel_img

let filback_img

​

//logos

let redf

let redt

let red2f

let red2t

​

let yellowf

let yellowt

let yellow2f

let yellow2t

​

let whitef

let whitet

let white2f

let white2t

​

let bluef

let bluet

let blue2f

let blue2t

​

​

let disco_gif

​

let gameState = "mainScreen";

​

let char_check = 1

// let timer = 6;

​

function preload() {

  soundFormats("mp3", "ogg");

​

  //loading sound

  flute_sound = loadSound("audio/Melo2_flute_b.ogg");

  ah_sound = loadSound("audio/ah.ogg");

  drum_sound = loadSound("audio/Drum.ogg");

  snare_sound = loadSound("audio/snare.ogg");

  bass_sound = loadSound("audio/bass.ogg");

  cry_sound = loadSound("audio/cry.ogg");

  feel_sound = loadSound("audio/feel.ogg");

  filback_sound = loadSound("audio/filback.ogg");

  start_sound = loadSound("audio/start.mp3");

  button_sound = loadSound("audio/button_fart.mp3");

  //loading images

​

  mute_img = loadImage("images/mute.webp");

  bg_img = loadImage("images/bg.png");

  wallpaper = loadImage("images/wallpaper.jpg");

  flute_img = loadImage("images/flute.webp");

  ah_img = loadImage("images/ah.webp");

  drum_img = loadImage("images/drum.webp");

  snare_img = loadImage("images/snare.webp");

  bass_img = loadImage("images/bass.webp");

  cry_img = loadImage("images/cry.webp");

  feel_img = loadImage("images/feel.webp");

  filback_img = loadImage("images/filback.webp");

  logo = loadImage("images/logo2.png");

  // LOGOS

  redf = loadImage("images/redf.webp");

  redt = loadImage("images/redt.webp");

  red2f = loadImage("images/red2f.webp");

  red2t = loadImage("images/red2t.webp");

  yellowf = loadImage("images/yellowf.webp");

  yellowt = loadImage("images/yellowt.webp");

  yellow2f = loadImage("images/yellow2f.webp");

  yellow2t = loadImage("images/yellow2t.webp");

  whitef = loadImage("images/whitef.webp");

  whitet = loadImage("images/whitet.webp");

  white2f = loadImage("images/white2f.webp");

  white2t = loadImage("images/white2t.webp");

  bluef = loadImage("images/bluef.webp");

  bluet = loadImage("images/bluet.webp");

  blue2f = loadImage("images/blue2f.webp");

  blue2t = loadImage("images/blue2t.webp");

  disco_gif = createImg("disco.gif");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  angleMode(DEGREES);

  // frameRate(frames);

  //timer 

  current=millis();

  prev=current;

  // startScreen();

​

  //background balls

  ball1 = new Ball(0, 200, 4, -2);

  //new obj ball

  ball2 = new Ball(600, 100, 5, -1);

  background(0, 0, 0);

}

​

function draw() {

  //stuff can be added here

  if (gameState == "startScreen") {

    startScreen();

  }

  if (gameState == "mainScreen") {

    // background(0,0,0,2);

    mainScreen();

  }

  if (gameState == "infoScreen") {

    infoScreen();

  }

​

  if (gameState == "incredibox") {

    incredibox();

    // disco_gif.position(350, 0);

  }

}

​

function keyPressed() {

  if (key == " ") {

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

    setUpSerial();

  }

}

​

function mouseClicked() {

  if (gameState == "mainScreen") {

    if (

      mouseX > width / 2 - 120 &&

      mouseX < width / 2 + 80 &&

      mouseY > 400 &&

      mouseY < 500

    ) {

      button_sound.playMode("untilDone");

      button_sound.play()

      fill(0)

      rect(0,0,width,height)

      gameState = "incredibox";

      start_sound.stop();

      let fs = fullscreen();

      if(!fs)

        {

          fullscreen(!fs);

        }

    }

​

    if (

      mouseX > width / 2 + 100 &&

      mouseX < width / 2 + 200 &&

      mouseY > 400 &&

      mouseY < 500

    ) {

      button_sound.playMode("untilDone");

      gameState = "infoScreen";

    }

  }

​

  if (gameState == "infoScreen") {

    if (

      mouseX > 30 &&

      mouseX < 130 &&

      mouseY > height - 150 &&

      mouseY < height - 50

    ) {

      fill(0);

      rect(0, 0, width, height);

      gameState = "mainScreen";

    }

  }

​

  if (gameState == "incredibox") { //0,0,1758/2.5,488/2.5

    if (

      mouseX > 0 &&

      mouseX < 1758/2.5 &&

      mouseY > 0 &&

      mouseY < 488/2.5

    ) {

      gameState = "mainScreen"

    }

  }

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

//MAIN SCREEN

let x = 300;

let y = 200;

let xspeed = 4;

let yspeed = -2;

​

let ball1;

let ball2;

​

let background_check = false;

​

function mainScreen() {

  image(wallpaper,0,0,width,height)

  image(logo,0,0,1758/4,488/4)

  // image(bg_img,width/2 - 340,-50,740,880);

  start_sound.playMode("untilDone");

  start_sound.loop();

​

  var r = map(sin(frameCount), -1, 1, 50, 255);

    var g = map(cos(frameCount / 2), -1, 1, 50, 255);

    var b = map(sin(frameCount / 9), -1, 1, 50, 255);

    fill(r, g, b);

  //play Button

  stroke(255);

  strokeWeight(10);

  rect(width / 2 - 130, 400, 200, 100, 40);

​

  //info button

  square(width / 2 + 100, 400, 100, 40);

​

  noStroke();

  fill(255);

  textSize(40);

  text("PLAY", width / 2 - 75, 465);

​

  textSize(50);

  text("i", width / 2 + 143, 465);

  textSize(30)

}

​

function infoScreen() {

  var r = map(sin(frameCount), -1, 1, 50, 255);

  var g = map(cos(frameCount / 2), -1, 1, 50, 255);

  var b = map(sin(frameCount / 9), -1, 1, 50, 255);

  background(r, g, b);

  fill(255);

  rect(width / 2 - 100, 50, 200, 100, 40);

​

  textSize(50);

  fill(r, g, b);

  text("INFO", width / 2 - 60, 115);

​

  fill(255);

  square(30, height - 150, 100, 40);

​

  fill(r, g, b);

  textSize(30);

  text("BACK", 37, height - 90);

  textSize(50)

  let intro_text = "BEAT-HOVEN is THE experience that lets you create your own music with the help of a merry crew of beatboxers. Mix and match your own taste by choosing from the 8 bored beatboxers. Click once on a button to give instructions to the beatboxer to start. But WAITT!! He wont start beat boxing until the cycle reaches 0."

  fill(255);

  textAlign(CENTER)

  textFont("Raleway");

  text(intro_text,150,200,width - 300, 500);

  text("GO AND HAVE FUNNNN!!", width/2, 700)

  textAlign(LEFT)

  textSize(30)

}

​

function incredibox() {

  //timer

  image(logo,0,0,1758/2.5,488/2.5)

  current=millis();

  print(current)

  timer = floor((current-prev)/1000);

  print(timer);

  if(timer>=8){

    prev=current;

    }

//   stroke(255)

  fill(255,0,0)

  rect(width - 310, 55,350, 32)

  fill(255)

  textFont('Courier New');

  text("Cycle:",width - 310, 80)

  text(timer, width - 200, 80)

  text("|7", width - 180, 80)

  if(char_check == 1)

    {

      for(let i = 0; i<8; i++)

    {

      let x = i*10

      image(mute_img,(285 / 1.7)*i+x , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

    }

    }

​

}

​

function readSerial(data) {

  //READ FROM ARDUINO HERE

  if (data != null) {

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

​

    let red_button = fromArduino[0] == 1 ? true : false;

    let red_button2 = fromArduino[1] == 1 ? true : false;

    let yellow_button = fromArduino[2] == 1 ? true : false;

    let yellow_button2 = fromArduino[3] == 1 ? true : false;

​

    let white_button = fromArduino[4] == 1 ? true : false;

    let white_button2 = fromArduino[5] == 1 ? true : false;

    let blue_button = fromArduino[6] == 1 ? true : false;

    let blue_button2 = fromArduino[7] == 1 ? true : false;

​

    print(red_button);

    print(",");

    print(red_button2);

​

    if (gameState == "incredibox") {

​

      // button flag changer -------------------------------------------

      if (red_button) {

        if (red_button_play == true) {

          red_button_play = false;

          image(redf,25,706 / 1.7+280)

        } else if (red_button_play == false) {

          red_button_play = true;

          image(redt,25,706 / 1.7+280)

        }

      }

​

      if (red_button2) {

        if (red_button2_play == true) {

          red_button2_play = false;

          image(red2f,285 / 1.7 + 35,706 / 1.7+280)

        } else if (red_button2_play == false) {

          image(red2t,285 / 1.7 + 35,706 / 1.7+280)

          red_button2_play = true;

        }

      }

​

      if (yellow_button) {

        if (yellow_button_play == true) {

          yellow_button_play = false;

          image(yellowf,(285 / 1.7)*2+45 ,706 / 1.7+280)

        } else if (yellow_button_play == false) {

          image(yellowt,(285 / 1.7)*2+45 ,706 / 1.7+280)

          yellow_button_play = true;

        }

      }

​

      if (yellow_button2) {

        if (yellow_button2_play == true) {

          yellow_button2_play = false;

          image(yellow2f,(285 / 1.7)*3+60 ,706 / 1.7+280)

        } else if (yellow_button2_play == false) {

          yellow_button2_play = true;

          image(yellow2t,(285 / 1.7)*3+60 ,706 / 1.7+280)

        }

      }

​

      if (white_button) {

        if (white_button_play == true) {

          white_button_play = false;

          image(whitef,(285 / 1.7)*4+75 ,706 / 1.7+280)

        } else if (white_button_play == false) {

          white_button_play = true;

          image(whitet,(285 / 1.7)*4+75 ,706 / 1.7+280)

        }

      }

​

      if (white_button2) {

        if (white_button2_play == true) {

          white_button2_play = false;

          image(white2f,(285 / 1.7)*5+80 ,706 / 1.7+280)

        } else if (white_button2_play == false) {

          white_button2_play = true;

          image(white2t,(285 / 1.7)*5+80 ,706 / 1.7+280)

        }

      }

​

      if (blue_button) {

        if (blue_button_play == true) {

          blue_button_play = false;

          image(bluef,(285 / 1.7)*6+95 ,706 / 1.7+280)

        } else if (blue_button_play == false) {

          blue_button_play = true;

          image(bluet,(285 / 1.7)*6+95 ,706 / 1.7+280)

        }

      }

​

      if (blue_button2) {

        if (blue_button2_play == true) {

          blue_button2_play = false;

          image(blue2f,(285 / 1.7)*7+110 ,706 / 1.7+280)

        } else if (blue_button2_play == false) {

          blue_button2_play = true;

          image(blue2t,(285 / 1.7)*7+110 ,706 / 1.7+280)

        }

      }

​

      //BEAT checker -------------------------------------------------

​

      if (timer == 1) {

        char_check-=1;

        //red button 1

        if (red_button_play == true) {

          image(flute_img, 0, height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          flute_sound.playMode("untilDone");

          flute_sound.loop();

        } else if (red_button_play == false) {

          fill(0);

          rect(0, height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          image(mute_img, 0, height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          // image(redf,25,706 / 1.7+280)

          flute_sound.stop();

        }

        //red button 2

        if (red_button2_play == true) 

        {

          image(ah_img,285 / 1.7 + 10 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          ah_sound.playMode("untilDone");

          ah_sound.loop();

        } 

        else if (red_button2_play == false) 

        {

          fill(0);

          rect(285 / 1.7 + 10 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          image(mute_img,285 / 1.7 + 10 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          ah_sound.stop();

        }

​

        //yellow button 1

        if (yellow_button_play == true) {

          image(drum_img,(285 / 1.7)*2+20 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          drum_sound.playMode("untilDone");

          drum_sound.loop();

        } else if (yellow_button_play == false)

        {

          fill(0);

          rect((285 / 1.7)*2 + 20  , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          image(mute_img,(285 / 1.7)*2+20 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          drum_sound.stop();

        }

​

        //yellow button 2

        if (yellow_button2_play == true)

        {

          image(snare_img,(285 / 1.7)*3+30 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          snare_sound.playMode("untilDone");

          snare_sound.loop();

        } 

        else if (yellow_button2_play == false)

        {

          fill(0);

          rect((285 / 1.7)*3+30 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7)

          image(mute_img,(285 / 1.7)*3+30 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

​

          snare_sound.stop();

        }

​

        //white button 1

        if (white_button_play == true)

        {

          image(bass_img,(285 / 1.7)*4+40 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          bass_sound.playMode("untilDone");

          bass_sound.loop();

        } else if (white_button_play == false)

        {

          fill(0);

          rect((285 / 1.7)*4+40 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7)

          image(mute_img,(285 / 1.7)*4+40 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          bass_sound.stop();

        }

​

        //white button 2

        if (white_button2_play == true) {

          image(cry_img,(285 / 1.7)*5+50 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          cry_sound.playMode("untilDone");

          cry_sound.loop();

        } else if (white_button2_play == false) {

          fill(0)

          rect((285 / 1.7)*5+50 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7)

          image(mute_img,(285 / 1.7)*5+50 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          cry_sound.stop();

        }

​

        //blue button 1

        if (blue_button_play == true) {

          image(feel_img,(285 / 1.7)*6+60 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          feel_sound.playMode("untilDone");

          feel_sound.loop();

        } else if (blue_button_play == false) {

          fill(0)

          rect((285 / 1.7)*6+60 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7)

          image(mute_img,(285 / 1.7)*6+60 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          feel_sound.stop();

        }

​

        //blue button 2

        if (blue_button2_play == true) {

          image(filback_img,(285 / 1.7)*7+70 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          filback_sound.playMode("untilDone");

          filback_sound.loop();

        } else if (blue_button2_play == false) {

          fill(0)

          rect((285 / 1.7)*7+70 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7)

          image(mute_img,(285 / 1.7)*7+70 , height / 2 - 706 / 4, 285 / 1.7, 706 / 1.7);

          filback_sound.stop();

        }

      }

      // print(frameCount)

//       print(timer)

    }

  }

}

​