let RED = 6; // HIP HOP AND AFRICA

let YELLOW = 5; // HISTORY AND ASIA

let GREEN = 4; // CLASSIC ROCK AND AMERICA

let TEAL = 3; // CLASSICAL AND EUROPE

let BLUE = 2; // KHALEEJI AND MIDDLE EAST

​

let station;

let oldData = OFF; // Start with radio off

​

// visualizer

let sound;

let fft;

let imageToVisualize; // Image to visualize

let scaledWidth, scaledHeight; // Variables to store scaled dimensions

​

function preload() {

  // radioBackground = loadImage ("radio.png");

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

​

  soundFormats("mp3");

  // RED (HIP HOP) AFRICA

  redSong1 = loadSound("EGYPT.mp3");

  redSong2 = loadSound("GHANA.mp3");

  redSong3 = loadSound("SOUTH AFRICA.mp3");

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

​

  // YELLOW (HISTORY) ASIA

  yellowSong1 = loadSound("CHINA.mp3");

  yellowSong2 = loadSound("INDIA.mp3");

  yellowSong3 = loadSound("JAPAN.mp3");

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

​

  // GREEN (CLASSIC ROCK) AMERICA

  greenSong1 = loadSound("BRAZIL.mp3");

  greenSong2 = loadSound("MEXICO.mp3");

  greenSong3 = loadSound("VENEZUELA.mp3");

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

​

  // TEAL (CLASSICAL) EUROPE

  tealSong1 = loadSound("ITALY.mp3");

  tealSong2 = loadSound("SPAIN.mp3");

  tealSong3 = loadSound("GERMANY.mp3");

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

​

  // BLUE (KHALEEJI) MIDDLE EAST

  blueSong1 = loadSound("UAE.mp3");

  blueSong2 = loadSound("SAUDI ARABIA.mp3");

  blueSong3 = loadSound("KUWAIT.mp3");

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

​

  // Load the image file

  imageToVisualize = loadImage("brazil2.png");

}

​

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

  redSong1.loop();

  print("Press f (possibly twice) to toggle fullscreen");

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

​

  // Create a new instance of p5.FFT() object

  fft = new p5.FFT();

​

  // Resize the image to fit within canvas dimensions

  resizeImage();

​

  // Hide the stroke for the image

  noStroke();

}

​

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

    }

​

    // IF redSong1 IS PLAYING THEN DO THIS:

    if (redSong1.isPlaying()) {

      console.log("redSong1 is playing");

      // analyze() method returns an array of amplitude values across the frequency spectrum

      // Amplitude values range between 0 and 255, where at 0, the sound at the specific frequency band is silent and at 255, the sound at the specific frequency band is at its loudest

      let spectrum = fft.analyze();

​

      // Scale the image based on amplitude

      let scaleAmount = map(spectrum[0], 0, 255, 0.5, 2);

      scaledWidth = imageToVisualize.width * scaleAmount;

      scaledHeight = imageToVisualize.height * scaleAmount;

​

      // Draw the scaled image at the center of the canvas

      image(

        imageToVisualize,

        width / 2 - scaledWidth / 2,

        height / 2 - scaledHeight / 2,

        scaledWidth,

        scaledHeight

      );

    }

  }

​

  // background(radioBackground);

​

  if (inData == OFF) {

    // OFF

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 124, 222); // (x1, y1, x2, y2)

​

    // TEXT

    noStroke();

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

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

    text("OFF", 450, 296);

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

  } else if (inData == RED) {

    // HIP HOP

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 148, 230);

​

    // CHANNEL NAME TEXT

    noStroke();

    fill(128, 172, 57);

    textFont(radioFont, 90);

    text("AFRICA", 388, 296);

    // glow(color(128,172,57), 38);

  } else if (inData == YELLOW) {

    // HISTORY

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 160, 288);

​

    // CHANNEL NAME TEXT

    noStroke();

    fill(128, 172, 57);

    textFont(radioFont, 90);

    text("ASIA", 376, 296);

    // glow(color(128,172,57), 38);

  } else if (inData == GREEN) {

    // CLASSIC ROCK

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 120, 308);

​

    // CHANNEL NAME TEXT

    noStroke();

    fill(128, 172, 57);

    textFont(radioFont, 90);

    text("AMERICA", 284, 296);

    // glow(color(128,172,57), 38);

  } else if (inData == TEAL) {

    // CLASSICAL

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 164, 288);

​

    // CHANNEL NAME TEXT

    noStroke();

    fill(128, 172, 57);

    textFont(radioFont, 90);

    text("EUROPE", 336, 296);

    // glow(color(128,172,57), 38);

  } else if (inData == BLUE) {

    // KHALEEJI

​

    // DIAL LINE

    stroke(510);

    strokeWeight(10);

    line(124, 264, 88, 234);

​

    // CHANNEL NAME TEXT

    noStroke();

    fill(128, 172, 57);

    textFont(radioFont, 90);

    text("MIDDLE EAST", 356, 296);

    // glow(color(128,172,57), 38);

  }

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

}

​

function keyPressed() {

  if (key === "s") {

    toggleFullscreen();

  }

}

​

// activate fullscreen - by Mang

function toggleFullscreen() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  resizeImage();

}

​

function resizeImage() {

  // Calculate the aspect ratio of the image

  let aspectRatio = imageToVisualize.width / imageToVisualize.height;

​

  // Determine whether width or height should be resized based on aspect ratio

  if (aspectRatio > 1) {

    // If width is greater than height, resize width and calculate height accordingly

    scaledWidth = width;

    scaledHeight = scaledWidth / aspectRatio;

  } else {

    // If height is greater than width, resize height and calculate width accordingly

    scaledHeight = height;

    scaledWidth = scaledHeight * aspectRatio;

  }

​

  // Resize the image

  imageToVisualize.resize(scaledWidth, scaledHeight);

}

​