Extension for my AIO Project

AIO_Extension.js

var tR, tG, tB, cR, cG, cB = 0;

var serial; //variable to hold an instance of the serial port library
var portName = 'COM3'; //fill in with YOUR port

function setup() {
  createCanvas(400, 400);

  serial = new p5.SerialPort(); //a new instance of serial port library

  //set up events for serial communication
  serial.on('connected', serverConnected);
  serial.on('open', portOpen);
  serial.on('data', serialEvent);
  serial.on('error', serialError);
  serial.on('close', portClose);

  //open our serial port
  serial.open(portName);
}

function draw() {
  noStroke();
  fill(tR,tG,tB);
  rect(200,0,200,400);
  fill(cR,cG,cB);
  rect(0,0,200,400);
  fill(0);

  var spacer = 40;
  var uiY = 320;
  var rG = 55;
  var gG = rG + spacer;
  var bG = gG + spacer;
  
  //Red Guide
  fill(255,0,0);
  if(cR + 40 < tR){ // If the current value is too low...
    triangle(rG,uiY,rG+10,uiY+20,rG-10,uiY+20);
  }
  else if (Math.abs(cR-tR) <= 40){ //If the current value is within the range...
    rect(rG-10,uiY+20,20,10);
  }
  else if(cR - 40 > tR){ // If the current value is too high...
    triangle(rG,uiY+50,rG+10,uiY+30,rG-10,uiY+30);
  }
  
  //Green Guide
  fill(0,255,0);
  if(cG + 40 < tG){ // If the current value is too low...
    triangle(gG,uiY,gG+10,uiY+20,gG-10,uiY+20);
  }
  else if (Math.abs(cG-tG) <= 40){ //If the current value is within the range...
    rect(gG-10,uiY+20,20,10);
  }
  else if(cG - 40 > tG){ // If the current value is too high...
    triangle(gG,uiY+50,gG+10,uiY+30,gG-10,uiY+30);
  }
  
  //Blue Guide
  fill(0,0,255);
  if(cB + 40 < tB){ // If the current value is too low...
    triangle(bG,uiY,bG+10,uiY+20,bG-10,uiY+20);
  }
  else if (Math.abs(cB-tB) <= 40){ //If the current value is within the range...
    rect(bG-10,uiY+20,20,10);
  }
  else if(cB - 40 > tB){ // If the current value is too high...
    triangle(bG,uiY+50,bG+10,uiY+30,bG-10,uiY+30);
  }
  fill(255);
}

function serverConnected(){
	console.log('connected to the server');
}

function portOpen(){
  console.log('the serial port opened!');
}

function serialEvent(){
	//receive serial data here
  var incomingString = serial.readLine();
  if (incomingString.length > 0){
    var values = split(incomingString, " ");
    tR = Number(values[0]);
    tG = Number(values[1]);
    tB = Number(values[2]);
    cR = Number(values[3]);
    cG = Number(values[4]);
    cB = Number(values[5]);
    console.log(incomingString);
  }
}

function serialError(err){
  console.log('something went wrong with the port. ' + err);
}

function portClose(){
  console.log('the port was closed');
}

// get the list of ports:
function printList(portList) {
 // portList is an array of serial port names
 for (var i = 0; i < portList.length; i++) {
 // Display the list the console:
 print(i + " " + portList[i]);
 }
}