let freqValue = 0, speedValue = 0, modValue = 0, ratioValue = 0, speedLEDBlinkRate = 0;

​

let serialConnectedFrame = -1;

let musicCircleImg;

let initialScreenImg;

​

function preload() {

    musicCircleImg = loadImage('assets/music note circle.png');

    initialScreenImg = loadImage("assets/initial screen.png")

}

​

function setup() {

    createCanvas(windowWidth, windowHeight);

}

​

function draw() {

    if (!serialActive) {

        image(initialScreenImg, 0, 0, width, height);

        return;

    } else if (serialConnectedFrame == -1) {

        serialConnectedFrame = frameCount;

    }

    background(255);

​

    // 4 vertical bars, representing the values

    noStroke();

    fill("#ffb7b2");

    rect(0, map(freqValue, 0, 1000, height, 0), width/4, height);

    fill("#ffdac1");

    rect(width/4, map(speedValue, 0, 1000, height, 0), width/4, height);

    fill("#e2f0cb");

    rect(width/2, map(modValue, 0, 1000, height, 0), width/4, height);

    fill("#b5ead7");

    rect(3/4 * width, map(ratioValue, 0, 1000, height, 0), width/4, height);

​

​

    // Text labels for each bar

    fill(0, 160);

    textSize(32);

    textStyle(BOLD);

    textAlign(CENTER, CENTER);

    text("Pitch", (0 + width/4)/2, height - 100);

    text("Speed/Tempo", (width/4 + width/2)/2, height - 100);

    text("< Mix Ratio >", (width/2 + 3/4 * width)/2, height - 100);

    text("Harmonic Multiplier", (3/4 * width + width)/2, height - 100);

​

    // Bars & width:

    //   freq        speed        mod        ratio

    // 0 ----- 1/4 w ----- 1/2 w ----- 3/4 w ----- w

    //   1/4 w       1/4 w       1/4 w       1/4 w

    // For circular image in the middle:

    // Stretch based on frequency

    let xStretch = map(freqValue, 0, 1000, 1.5, 1/1.5);

    let yStretch = map(freqValue, 0, 1000, 1/1.5, 1.5);

​

    translate(width/2, height/2);

    scale(xStretch, yStretch);

    // Smoothly blink/scale based on speed

    let speedLEDBlinkRateSmoothProgress = sin(map(millis() % speedLEDBlinkRate, 0, speedLEDBlinkRate, 0, radians(TWO_PI)))/2 + 0.5; // Converts the speed's blink rate, into a smooth progress amount, between 0 - 1.

​

    // tint(255, map(speedLEDBlinkRateSmoothProgress, 0, 1, 128, 255)); // blink

    // scale(map(speedLEDBlinkRateSmoothProgress, 0, 1, 1/1.1, 1.1)); // scale

    // After all these transfomations and effects, actually draw the image

    image(musicCircleImg, -200, -200, 400, 400);

}

​

function keyPressed() {

    if (key == "c") {

        setUpSerial();

    } else if (key == "f") {

        fullscreen(!fullscreen());

    }

}

​

function windowResized() {

    resizeCanvas(windowWidth, windowHeight);

}

​

// This function will be called by the p5.web-serial library with each new line of data.

// The serial library reads the data until the newline and then gives it to us through this callback function

function readSerial(data) {

    // Reading from Arduino

​

    if (data != null) { // make sure there is actually a message

        let fromArduino = split(trim(data), ","); // split the message

​

        if (fromArduino.length == 5) { // if the right length, then proceed

            // Only store values (do everything with them in the main draw loop)

            // We take the string we get from Arduino and explicitly

            // convert it to a number by using int()

​

            // Values in range 0 - 1000

            freqValue = int(fromArduino[0]);

            speedValue = int(fromArduino[1]);

            modValue = int(fromArduino[2]);

            ratioValue = int(fromArduino[3]);

​

            speedLEDBlinkRate = int(fromArduino[4]);

        }

​

        // Sending to Arduino (handshake)

        let sendToArduino = /* left + "," + right + */ "\n";

        writeSerial(sendToArduino);

    }

}