let RED = 6; // HIP HOP

let YELLOW = 5; // HISTORY

let GREEN = 4; // CLASSIC ROCK

let TEAL = 3; // CLASSICAL

let BLUE = 2; // KHALEEJI 

​

let station;

let oldData = OFF; // Start with radio off

​

function preload() {

  radioBackground = loadImage ("radio.png");

  radioFont = loadFont ("digital font italic.ttf");

  soundFormats("mp3");

  // RED (HIP HOP)

  redSong1 = loadSound ("JAY Z.mp3");

  redSong2 = loadSound ("STILL DRE.mp3");

  redSong3 = loadSound ("50 CENT.mp3");

  redSounds = [redSong1, redSong2, redSong3]; // etc

​

  // YELLOW (HISTORY)

  yellowSong1 = loadSound ("APOLLO 11.mp3");

  yellowSong2 = loadSound ("CHAPLIN.mp3");

  yellowSong3 = loadSound ("MLK.mp3");

  yellowSounds = [yellowSong1, yellowSong2, yellowSong3]; // etc

  // GREEN (CLASSIC ROCK)

  greenSong1 = loadSound ("QUEEN.mp3");

  greenSong2 = loadSound ("PINK FLOYD.mp3");

  greenSong3 = loadSound ("NIRVANA.mp3");

  greenSounds = [greenSong1, greenSong2, greenSong3]; // etc

  // TEAL (CLASSICAL)

  tealSong1 = loadSound ("NUTCRACKER.mp3");

  tealSong2 = loadSound ("SWAN LAKE.mp3");

  tealSong3 = loadSound ("BEETHOVEN.mp3");

  tealSounds = [tealSong1, tealSong2, tealSong3]; // etc

  // BLUE (KHALEEJI)

  blueSong1 = loadSound ("MEHAD.mp3");

  blueSong2 = loadSound ("UMY KM AHWAHA.mp3");

  blueSong3 = loadSound ("EIDHA.mp3");

  blueSounds = [blueSong1, blueSong2, blueSong3]; // etc

​

}

​

// variable to hold an instance of the p5.webserial library:

const serial = new p5.WebSerial();

// HTML button object:

let portButton;

let inData;                   // measures serial monitor

let outByte = 0;              // outgoing data

function setup() {

  createCanvas(512, 384);

  // check to see if serial is available:

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

}

function draw() {

  // oldData holds the *previous* value of inData

  // if user changes station, p5 checks that oldData has changed into inData

  // then prints the change

  if (inData != oldData) {

    // The station changed

     console.log("changed from " + oldData + " to " + inData);

    // stops all songs if inData (new station value) is not equal to oldData (old station value)

    // RED SONGS

    redSong1.stop();

    redSong2.stop();

    redSong3.stop();

    // YELLOW SONGS

    yellowSong1.stop();

    yellowSong2.stop();

    yellowSong3.stop();

    // GREEN SONGS

    greenSong1.stop();

    greenSong2.stop();

    greenSong3.stop();

    // TEAL SONGS

    tealSong1.stop();

    tealSong2.stop();

    tealSong3.stop();

    // BLUE SONGS

    blueSong1.stop();

    blueSong2.stop(); 

    blueSong3.stop(); 

    if (inData == RED){

      hiphopChannel = random(redSounds);

      hiphopChannel.play();

    }

    if (inData == YELLOW){

      historyChannel = random(yellowSounds);

      historyChannel.play();

    }

    if (inData == GREEN){

      rockChannel = random(greenSounds);

      rockChannel.play();

    }

    if (inData == TEAL){

      classicalChannel = random(tealSounds);

      classicalChannel.play();

    }

    if (inData == BLUE){

      khaleejiChannel = random(blueSounds);

      khaleejiChannel.play();

    }

  }

   background(radioBackground);

    if (inData == OFF) { // OFF

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 62, 111); // (x1, y1, x2, y2)

    // TEXT

    noStroke();

    fill (128,172,57); // text color

    textFont(radioFont, 45); // (font name, font size)

    text ("OFF", 225, 148);

    glow(color(128,172,57), 19); // calls glow function

  } else if (inData == RED) { // HIP HOP

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 74, 115);

    // CHANNEL NAME TEXT

    noStroke();

    fill (128,172,57); 

    textFont(radioFont, 45); 

    text("HIP HOP", 194, 148); 

    glow(color(128,172,57), 19); 

  } else if (inData == YELLOW) { // HISTORY

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 80, 144);

    // CHANNEL NAME TEXT

    noStroke();

    fill (128,172,57);

    textFont(radioFont, 45);

    text("HISTORY", 188, 148);

    glow(color(128,172,57), 19);

  } else if (inData == GREEN) { // CLASSIC ROCK

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 60, 154);

    // CHANNEL NAME TEXT

    noStroke();

    fill (128,172,57);

    textFont(radioFont, 45);

    text("CLASSIC ROCK", 142, 148);

    glow(color(128,172,57), 19);

  } else if (inData == TEAL) { // CLASSICAL

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 41, 144);

    // CHANNEL NAME TEXT

    noStroke();

    fill (128,172,57);

    textFont(radioFont, 45);

    text("CLASSICAL", 168, 148);

    glow(color(128,172,57), 19);

  } else if (inData == BLUE) { // KHALEEJI

    // DIAL LINE

    stroke(255);

    strokeWeight(5);

    line(62, 132, 44, 117);

    // CHANNEL NAME TEXT

    noStroke();

    fill (128,172,57);

    textFont(radioFont, 45);

    text("KHALEEJI", 178, 148);

    glow(color(128,172,57), 19);

  }

  oldData = inData;

}

​

function glow(glowColor, blurriness) {

  drawingContext.shadowBlur = blurriness;

  drawingContext.shadowColor = glowColor;

}

​

// reads 10 lines per second, so removes the null p5 finds in between

function serialEvent() {

    rawData = serial.readLine(); // try reading the data

    if (rawData !== null) {

      inData = Number(rawData);

      console.log(inData);

    }

}

​

// if there's no port selected, 

// make a port select button appear:

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

}

// make the port selector window appear:

function choosePort() {

  if (portButton) portButton.show();

  serial.requestPort();

}

// open the selected port, and make the port button invisible:

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

}

// pop up an alert if there's a port error:

function portError(err) {

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

}

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

}