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 sinIsPlaying = false

let whisperIsPlaying = false

let funnyIsPlaying = false

let pausecheck;

​

let DJ;

let wall;

let state = "start";

let title = 30;

let subtitle = 20;

let options = 15;

let songsX = 470;

let song1Y = 123;

let song2Y = 190;

let song3Y = 257;

let song4Y = 324;

let oscX = 470;

let oscY = 30;

let marley, sin, whisper, funny;

let n;

let rate, reverb;

​

function preload() {

  DJ = loadImage("Assets/DJ.png");

  wall = loadImage("Assets/BrickWall.png");

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

  sin = loadSound("Songs/Sin.mp3");

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

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

}

​

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

  sin.disconnect();

  reverb.process(sin, 10, 30);

​

  // 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();

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

    drawMixerInterface();

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

    drawEndScreen();

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

    drawOscilator();

  }

​

  dryWet();

  addRate();

  pausedButton();

  playedButton();

}

​

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);

  sin.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(DJ, 0, 0);

  textAlign(CENTER, CENTER);

  push();

  colorMode(HSB, 360, 100, 100, 100);

  noFill();

  stroke(255);

  strokeWeight(3);

  fill(255, 50, 50);

  textSize(title);

  text("DJ FALCON", width / 2, height / 3);

  pop();

  textSize(subtitle);

  fill(255);

  text("Select a song mix it and shake it up", width / 2, 175);

  textSize(10);

  text("Press the Play button to begin", width / 2, 300);

}

​

function drawSongMenu() {

  image(wall, 0, 0);

  push();

  textAlign(CENTER, CENTER);

  textSize(title);

  text("Select a song or sound: ", width / 2, height / 6);

  pop();

  textSize(subtitle);

  text("Song 1 - Artist X - Time:00:07", width / 2.5, 135);

  text("Song 2 - Artist Foo - Time:04:20", width / 2.5, 200);

  text("Song 3 - Artist H - Time:03:21", width / 2.5, 270);

  text("Song 4 - Rick Astley - Time: 0000", width / 2.5, 332);

  text("Coordinates are: " + mouseX + "and " + mouseY, 200, 300);

  rect(songsX, song1Y, 70, 25);

  rect(songsX, song2Y, 70, 25);

  rect(songsX, song3Y, 70, 25);

  rect(songsX, song4Y, 70, 25);

  rect(songsX, 15, 100, 30);

  push();

  fill("black");

  textSize(options);

  text("Select", songsX + 35, 135);

  text("Select", songsX + 35, 203);

  text("Select", songsX + 35, 270);

  text("Select", songsX + 35, 336);

  textSize(subtitle);

  text("Oscilator", songsX + 45, 33);

  pop();

  mouse_is_over1();

  mouse_is_over2();

  mouse_is_over3();

  mouse_is_over4();

  mouse_is_over_osc();

}

​

function drawMixerInterface() {

  background(0);

  stroke("white");

  mixerText();

  text("Coordinates are: " + mouseX + "and " + mouseY, 200, 300);

  noFill();

  rectMode(CENTER);

  rect(width / 2, 150, 350, 200);

  push();

  //   Here would go a line to show the sound wave

  translate(125, 50);

  pop();

  nowPlaying();

  lineColors();

}

​

function drawEndScreen() {

  background(0, 0, 0);

  text("Thank you for using Mix N Shake it");

}

​

function mouseClicked() {

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

  if (state == "start") {

    state = "selecting";

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

    state = "waves";

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

    state = "end";

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

    restart();

  }

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

    state = "mixer";

    songSelected();

    lineColors();

  }

}

​

function restart() {

  print("Resetting game");

  state = "start";

}

​

function mixerText() {

  stroke("white");

  textSize(options);

  text("Reverb", width / 3, 375);

  text("PlayBack Rate", width / 1.5, 375); // max of .7 feedback

  text("Loop", 250 + 60, 375);

}

function drawOscilator() {

  background(100, 150, 120);

}

​

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, 125, 475);

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

    vertex(x, y);

  }

  endShape();

  pop();

}

​

function songSelected() {

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

    marley.play();

    n = 0

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

    sin.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

  }

}

​

function playedButton() {

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

​

    marley.play();

​

  }

}

​

​

function mouse_is_over() {

  if (

    mouse_is_over1() ||

    mouse_is_over2() ||

    mouse_is_over3() ||

    mouse_is_over4()

  ) {

    return true;

  } else {

    return false;

  }

  if (mouse_is_over_osc()) {

    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 + 70 &&

    mouseY >= song1Y &&

    mouseY < song1Y + 25

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over2() {

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

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 70 &&

    mouseY >= song2Y &&

    mouseY < song2Y + 25

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over3() {

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

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 70 &&

    mouseY >= song3Y &&

    mouseY < song3Y + 25

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over4() {

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

​

  if (

    mouseX >= songsX &&

    mouseX < songsX + 70 &&

    mouseY >= song4Y &&

    mouseY < song4Y + 25

  ) {

    return true;

  } else {

    return false;

  }

}

​

function mouse_is_over_osc() {

  if (

    mouseX >= oscX &&

    mouseX < oscX + 100 &&

    mouseY >= oscY &&

    mouseY < oscY + 25

  ) {

    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];

    }

  }

}

​

// function endButton(){

//     rect(111, 111, 100, 100)

// }

​