const serial = new p5.WebSerial();

​

// HTML button object:

let portButton;

let rev_value; // for incoming serial data

let outByte = 0; // for outgoing data

let rate_value, play_value;

let standby_value;

let rev_mapped, rate_mapped;

let playbackRate;

let marleyIsPlaying = false;

let flagIsPlaying = false;

let whisperIsPlaying = false;

let funnyIsPlaying = false;

let pausecheck;

let fuente;

let end;

let endX = 477;

let endY = 15;

​

let screen1, screen2, screen3;

let state = "start";

let title = 30;

let subtitle = 20;

let options = 15;

let songsX = 455;

let song1Y = 55;

let song2Y = 135;

let song3Y = 215;

let song4Y = 295;

let oscX = 470;

let oscY = 30;

let marley, flag, whisper, funny;

let m2, s2, w2, f2;

let n;

let rate, reverb;

​

function preload() {

  screen1 = loadImage("Assets/1.png");

  screen2 = loadImage("Assets/2.png");

  screen3 = loadImage("Assets/3.png");

  screen4 = loadImage("Assets/4.png");

  marley = loadSound("Songs/Marley.mp3");

  flag = loadSound("Songs/Flag.mp3");

  whisper = loadSound("Songs/Whisper.mp3");

  funny = loadSound("Songs/clickMe.mp3");

  fuente = loadFont("Assets/Dream.ttf");

}

​

function setup() {

  createCanvas(600, 400);

  fft = new p5.FFT();

​

  // reverb constructor

  reverb = new p5.Reverb();

​

  // reverb first song

  marley.disconnect();

  reverb.process(marley, 10, 30);

​

  // reverb second song

  flag.disconnect();

  reverb.process(flag, 10, 50);

​

  // reverb third song

  whisper.disconnect();

  reverb.process(whisper, 10, 30);

​

  // reverb third song

  funny.disconnect();

  reverb.process(funny, 10, 43);

​

  if (!navigator.serial) {

    alert("WebSerial is not supported in this browser. Try Chrome or MS Edge.");

  }

  // if serial is available, add connect/disconnect listeners:

  navigator.serial.addEventListener("connect", portConnect);

  navigator.serial.addEventListener("disconnect", portDisconnect);

  // check for any ports that are available:

  serial.getPorts();

  // if there's no port chosen, choose one:

  serial.on("noport", makePortButton);

  // open whatever port is available:

  serial.on("portavailable", openPort);

  // handle serial errors:

  serial.on("requesterror", portError);

  // handle any incoming serial data:

  serial.on("data", serialEvent);

  serial.on("close", makePortButton);

  // serial.list();

  console.log(rev_value);

  console.log(rate_value);

  console.log(play_value);

  console.log(standby_value);

}

​

function draw() {

  background(0);

​

  if (state == "start") {

    drawTitleScreen();

  } else if (state == "selecting") {

    drawSongMenu();

    mouse_is_over1();

    mouse_is_over2();

    mouse_is_over3();

    mouse_is_over4();

  } else if (state == "mixer") {

    drawMixerInterface();

    dryWet();

    addRate();

    pausedButton();

    playedButton();

  } else if (state == "end") {

    drawEndScreen();

    stopSound();

  }

  ////// SHOULD MAKE IT RUN SMOOTHLY//////

  console.clear()

}

​

function dryWet() {

  let dryWet = rev_mapped;

  constrain(map(rev_mapped, 0, 100, 0, 1), 0, 1);

  // 1 = all reverb, 0 = no reverb

  reverb.drywet(dryWet);

}

​

function addRate() {

  let playback = map(rate_mapped, 0, 200, 0.01, 2);

  playback = constrain(playback, 0.01, 2);

  console.log(playback);

​

  marley.rate(playback);

  flag.rate(playback);

  whisper.rate(playback);

  funny.rate(playback);

}

​

function makePortButton() {

  // create and position a port chooser button:

  portButton = createButton("choose port");

  portButton.position(10, 10);

  // give the port button a mousepressed handler:

  portButton.mousePressed(choosePort);

}

​

function drawTitleScreen() {

  background(0);

  image(screen1, 0, 0);

}

​

function drawSongMenu() {

  image(screen2, 0, 0);

}

​

function drawMixerInterface() {

  image(screen4, 0, 0);

  stroke("white");

  mixerText();

  // nowPlaying();

  lineColors();

}

​

function drawEndScreen() {

  image(screen3, 0, 0);

}

​

function mouseClicked() {

  console.log("State is: " + state);

  if (state == "start") {

    state = "selecting";

  } else if (state == "mixer") {

    state = "end";

  } else if (state == "end") {

    restart();

  }

  if (state == "selecting" && mouse_is_over()) {

    state = "mixer";

    songSelected();

  }

  if (state == "mixer" && mouse_is_over_end()) {

    stopSound();

    state = "end";

  }

}

​

function restart() {

  print("Resetting game");

  state = "start";

}

​

function mixerText() {

  textFont(fuente);

  stroke("white");

  fill("white");

  textSize(subtitle);

​

  text(int(rev_mapped), 115, 335);

  text("X " + round(map(rate_mapped, 0, 200, 0.1, 2), 2), 380, 337);

}

​

function stopSound() {

  if (marley.isPlaying()) {

    marley.stop();

  } else if (flag.isPlaying()) {

    flag.stop();

  } else if (whisper.isPlaying()) {

    whisper.stop();

  } else if (funny.isPlaying()) {

    funny.stop();

  }

}

​

function lineColors() {

  let waveform = fft.waveform();

​

  push();

  noFill();

  beginShape();

  stroke(random(100, 255), random(100, 255), random(100, 255));

  for (let i = 0; i < waveform.length; i++) {

    let x = map(i, 0, waveform.length, 71, 530);

    let y = map(waveform[i], -1, 1, 0, 374);

    vertex(x, y);

  }

  endShape();

  pop();

}

​

function songSelected() {

  if (mouse_is_over1() && state == "mixer") {

    marley.play();

  } else if (mouse_is_over2() && state == "mixer") {

    flag.play();

  } else if (mouse_is_over3() && state == "mixer") {

    whisper.play();

  } else if (mouse_is_over4() && state == "mixer") funny.play();

}

​

function pausedButton() {

  if (play_value == 1 && marley.isPlaying()) {

    marley.pause();

    pausecheck = true;

  } else {

    pausecheck = false;

  }

​

  if (play_value == 1 && flag.isPlaying()) {

    flag.pause();

    pausecheck = true;

  } else {

    pausecheck = false;

  }

​

  if (play_value == 1 && whisper.isPlaying()) {

    whisper.pause();

    pausecheck = true;

  } else {

    pausecheck = false;

  }

​

  if (play_value == 1 && funny.isPlaying()) {

    funny.pause();

    pausecheck = true;

  } else {

    pausecheck = false;

  }

}

​

function playedButton() {

  if (play_value == 0 && marley.isPaused()) {

    marley.play();

  }

  if (play_value == 0 && flag.isPaused()) {

    flag.play();

  }

  if (play_value == 0 && whisper.isPaused()) {

    whisper.play();

  }

  if (play_value == 0 && funny.isPaused()) {

    funny.play();

  }

}

​

function mouse_is_over() {

  if (

    (state == "selecting" && mouse_is_over1()) ||

    mouse_is_over2() ||

    mouse_is_over3() ||

    mouse_is_over4()

  ) {

    return true;

  } else {

    return false;

  }

  if (state == "selecting" && mouse_is_over_end) {

    return true;

  } else {

    return false;

  }

}

​

// function nowPlaying() {

//   if (mouse_is_over1()) {

//     text("Song 1 playing: ", 125, 25);

//   } else if (mouse_is_over2()) {

//     text("Song 2 playing", 125, 25);

//   } else if (mouse_is_over3()) {

//     text("Song 3 is playing", 125, 25);

//   } else if (mouse_is_over4()) {

//     text("Song 4 is playing", 125, 25);

//   }

//   loop();

// }

​

function mouse_is_over1() {

  // console.log (mouseX, goodX, mouseY, goodY) // This was for debugging

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 107 &&

    mouseY >= song1Y &&

    mouseY < song1Y + 37

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over2() {

  // console.log (mouseX, goodX, mouseY, goodY) // This was for debugging

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 107 &&

    mouseY >= song2Y &&

    mouseY < song2Y + 37

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over3() {

  // console.log (mouseX, goodX, mouseY, goodY) // This was for debugging

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 107 &&

    mouseY >= song3Y &&

    mouseY < song3Y + 37

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over4() {

  // console.log (mouseX, goodX, mouseY, goodY) // This was for debugging

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 107 &&

    mouseY >= song4Y &&

    mouseY < song4Y + 37

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over_end() {

  if (

    mouseX >= endX &&

    mouseX < endX + 105 &&

    mouseY >= endY &&

    mouseY < endY + 40

  ) {

    return true;

  } else {

    return false;

  }

}

​

function openPort() {

  // wait for the serial.open promise to return,

  // then call the initiateSerial function

  serial.open().then(initiateSerial);

​

  // once the port opens, let the user know:

  function initiateSerial() {

    console.log("port open");

  }

  // hide the port button once a port is chosen:

  if (portButton) portButton.hide();

}

​

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

​

function portError(err) {

  alert("Serial port error: " + err);

}

// read any incoming data as a string

// (assumes a newline at the end of it):

function serialEvent() {

  if (serial.available() > 0) {

    serialData = serial.readLine();

    if (serialData) {

      // false if serialData == null

      console.log(serialData);

​

      serialData = trim(serialData); // remove trailing whitespace

      serialValues = split(serialData, ","); // split the string to array

      console.log("serialValues ", serialValues);

​

      rev_value = Number(serialValues[0]);

      console.log("Rev: " + rev_value);

​

      rate_value = Number(serialValues[1]);

      console.log("Rate: " + rate_value);

​

      play_value = Number(serialValues[2]);

      console.log("Play/pause: " + play_value);

​

      standby_value = Number(serialValues[3]);

      console.log("Standby: " + standby_value);

​

      rev_mapped = map(rev_value, 0, 1023, 0, 100);

      rate_mapped = map(rate_value, 0, 1023, 0, 200);

​

      console.log("rev mapped: " + rev_mapped);

      console.log("rate mapped: " + rate_mapped);

    }

  }

}

​

// try to connect if a new serial port

// gets added (i.e. plugged in via USB):

function portConnect() {

  console.log("port connected");

  serial.getPorts();

}

​

// if a port is disconnected:

function portDisconnect() {

  serial.close();

  console.log("port disconnected");

}

​

function closePort() {

  serial.close();

}

​

function readSerial(data) {

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

  //READ FROM ARDUINO HERE

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

​

  if (data != null) {

    // print the message

    console.log(data);

​

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

      rev_value = fromArduino[0];

      rate_value = fromArduino[1];

      play_value = fromArduino[2];

      standby_value = fromArduino[3];

    }

  }

}

​

​

​