var currentColor = 255;

let colorPicker;

let colorPickerColor = 255;

let scannedColor = 0;

let timerColor = 0;

let fadeAmount = 0;

let textFillColor = 255;

let amt = 0.1;

let end = 360;

let difference = 0;

let port;

let available = 1;

​

function setup() {

  createCanvas(1080, 1920);

  textFont('Gotham');

​

  port = createSerial();

  let usedPorts = usedSerialPorts();

  if (usedPorts.length > 0) {

    port.open(usedPorts[0], 9600);

  }

  if (port.opened()) {`1`

    console.log("Connected");

  } else {

      connectBtn = createButton('Connect to Arduino');

      connectBtn.position(80, 200);

      connectBtn.mousePressed(connectBtnClick);

      connectBtn.touchStarted(connectBtnClick);

    }

  colorArray = [

    color(52, 38, 36),   // Browns brown

    color(255, 60, 0),   // Browns orange

    color(0, 56, 93),    // Guardians blue

    color(229, 0, 34),   // Guardians red

    color(134, 0, 56),   // Cavs wine

    color(253, 187, 48), // Cavs Gold

    color(4, 30, 66),    // Cavs navy

    color(28, 86, 48),   // Metroparks green

    color(0, 103, 71),   // CSU Vikings green

    color(0, 86, 149),   // Monsters blue

    color(1, 107, 183),  // GLSC blue

    color(254, 190, 17), // GLSC yellow

    color(224, 21, 75),  // GLSC red

  ];

  scannedColor = color(0, 0, 0);

  scannedColor.setAlpha(0);

  background(bgColor);

  randomCircle();

}

​

function connectBtnClick() {

  if (!port.opened()) {

    port.open('Arduino', 9600);

  } else {

    port.close();

  }

  connectBtn.hide();

}

​

function draw() {  

  background(bgColor);

  currentColor.setAlpha(25);

  fill(currentColor);

  rect(0, 0, 1080, 1920);

  currentColor.setAlpha(255);

​

  if (port.opened()) {

    connectBtn.hide();

  }

​

  if (available == 1){

    let str = port.readUntil("\n");

     if (str.length > 6) {

        fillWithArduinoColor(str);

        port.write("PAUSE");

        available = 0;

      }

  }

​

  noStroke();

  //fill(currentColor);

  timerColor = currentColor;

  timerColor.setAlpha(100);

  fill(currentColor);

  currentColor.setAlpha(255);

  arc(width/2, height/2, 900, 900, radians(0), radians(end), PIE);

  end -= 0.2;

  if (end <= 0){randomCircle();}

  fill(scannedColor);

  ellipse(width/2, height/2, 900, 900);

  fill(colorPickerColor);

  circle(width/2, height/2, 700, 700);

  //currentColor.setAlpha(map(sin(frameCount * 0.01), -1, 1, 10, 50));

  fill(currentColor);

  instruction_ellipse = ellipse(width/2, height/2, 700, 700);

  currentColor.setAlpha(255);

  blendMode(REMOVE);

  fill(currentColor);

  //fill(0);

  //fill(map(sin(frameCount * 0.01), -1, 1, 0, 75));

  textSize(30);

  text("Can you match this color?", width/2-200, height/2-60);

  textSize(25);

  text("Hold an object in front of the sensor", width/2-221, height/2+10);

  text("and press the button to start", width/2-180, height/2+60);

  blendMode(BLEND);

}

​

function keyPressed(){

  if (key == ' '){

    randomCircle();

  }  

}

function randomCircle(){  

  loop();

  background(255); 

  currentColor = random(colorArray);

  colorPickerColor = color(255, 255, 255);

  end = 360;

  port.write("START");

  available = 1;

}

​

function fillWithArduinoColor(arduinoString){

  let color_nums = split(arduinoString, ',');

  if (color_nums[0] == 255 && color_nums[1] == 255 && color_nums[2] == 255){

    color_nums[0] = 200;

    color_nums[1] = 200;

    color_nums[2] = 200;

  }

  if (color_nums[0] == 0 && color_nums[1] == 0 && color_nums[2] == 0){

    color_nums[0] = 50;

    color_nums[1] = 50;

    color_nums[2] = 50;

  }

  colorPickerColor = color(int(color_nums[0]), int(color_nums[1]), int(color_nums[2]));

  scannedColor = color(int(color_nums[0]), int(color_nums[1]), int(color_nums[2]));

  scannedColor.setAlpha(255);

  timerColor.setAlpha(0);

  console.log(colorPickerColor);

  noLoop();

  setTimeout(() => pauseScreen(), 1500);

  return;

}

​

function fillWithChosenColor(){

  colorPickerColor = colorPicker.color();

  noLoop();

  setTimeout(() => pauseScreen(), 1500);

  return;

}

​

function pauseScreen(){

  /*

  rectMode(CENTER);

  blendMode(BLEND);

  fill(255, 255, 255, 255);

  rect(width/2, height/2-625, 350, 225, 5);

  rectMode(CORNER);

  blendMode(DIFFERENCE);

  colorPickerColor.setAlpha(255);

  fill(colorPickerColor);

  ellipse(width/2-50, height/2-625, 200, 200);

  currentColor.setAlpha(255);

  fill(currentColor);

  ellipse(width/2+50, height/2-625, 200, 200);

  blendMode(BLEND);

  */

  push();

  difference = 100 - calculateDifference();

  noStroke();

  fill(bgColor);

  textSize(50);

  text(difference + "% match", width/2-120, height/2);

  pop();

  fill(currentColor);

  // fill(0);

  // fill(map(sin(frameCount * 0.01), -1, 1, 0, 125));

  circle(width/2, height/2, 500, 500);

  fill(255);

  textSize(40);

  text(difference + "% match", width/2-115, height/2-70);

  textSize(50);

  text("Tap to continue", width/2-185, height/2+10);  

  t = color(currentColor);

  tR = red(t);

  tG = green(t);

  tB = blue(t);

  fill (t);

  rect(280, 65, 50, 50, 5);

  fill(0);

  textSize(30);

  text("Target color", 80, 100);

  textSize(22);

  fill(100, 17, 50);

  text("Red: " + tR, 85, 165);

  fill(15, 100, 40);

  text("Green: " + tG, 205, 165);

  fill(15, 50, 100);

  text("Blue: " + tB, 340, 165);

  c = color(colorPickerColor);

  cR = red(c);

  cG = green(c);

  cB = blue(c);

  fill (c);

  rect(width-225, 65, 50, 50, 5);

  fill(0);

  textSize(30);

  text("Your color", width-405, 100);

  textSize(22);

  fill(100, 17, 50);

  text("Red: " + cR, width-400, 165);

  fill(15, 100, 40);

  text("Green: " + cG, width-280, 165);

  fill(15, 50, 100);

  text("Blue: " + cB, width-150, 165);

  if (difference < 50){

    fill(0);

    textSize(30);

    text("Need some help?", width/2-150, height-250);

    text("Try holding your object closer or further away from the sensor", width/2-460, height-175);

  }

  stroke(0);

  strokeWeight(5);

  line(850, 200, 735, 600);

  stroke(255);

  strokeWeight(1);

  line(850, 200, 735, 600);

  stroke(0);

  strokeWeight(5);

  line(200, 200, 350, 750);

  stroke(255);

  strokeWeight(1);

  line(200, 200, 350, 750);

  noStroke();

  if (available == 1){

    let str = port.readUntil("\n");

     if (str == "GO") {

        port.write("START");

        available = 1;

      }

  }

}

​

function mousePressed() {

  //if (sqrt(sq(mouseX-width/2) + sq(mouseY-height/2)) < 150) {

    scannedColor.setAlpha(0);

    loop();

    randomCircle();

  //}

}

​

function touchStarted() {

  //for (let touch of touches) {

  //  console.log(sqrt(sq(touch.x-width/2) + sq(touch.y-height/2)));

  //  if (sqrt(sq(touch.x-width/2) + sq(touch.y-height/2)) < 150) {

      scannedColor.setAlpha(0);

      loop();

      randomCircle();

  //  }

  //}

}

​

function calculateDifference(){

  t = color(currentColor);

  tR = red(t);

  tG = green(t);

  tB = blue(t);

  c = color(colorPickerColor);

  cR = red(c);

  cG = green(c);

  cB = blue(c);

  // console.log("target: ", tR, tG, tB);

  // console.log("chosen: ", cR, cG, cB);

  let difference = round(deltaE([tR, tG, tB], [cR, cG, cB]));

  if (difference <= 12){ difference = 0 }

  return (difference);

}

​

function deltaE(rgbA, rgbB) {

  let labA = rgb2lab(rgbA);

  let labB = rgb2lab(rgbB);

  let deltaL = labA[0] - labB[0];

  let deltaA = labA[1] - labB[1];

  let deltaB = labA[2] - labB[2];

  let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);

  let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);

  let deltaC = c1 - c2;

  let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;

  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);

  let sc = 1.0 + 0.045 * c1;

  let sh = 1.0 + 0.015 * c1;

  let deltaLKlsl = deltaL / (1.0);

  let deltaCkcsc = deltaC / (sc);

  let deltaHkhsh = deltaH / (sh);

  let i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;

  return i < 0 ? 0 : Math.sqrt(i);

}

​

function rgb2lab(rgb){

  let r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255, x, y, z;

  r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;

  g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;

  b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;

  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;

  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;

  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;

  x = (x > 0.008856) ? Math.pow(x, 1/3) : (7.787 * x) + 16/116;

  y = (y > 0.008856) ? Math.pow(y, 1/3) : (7.787 * y) + 16/116;

  z = (z > 0.008856) ? Math.pow(z, 1/3) : (7.787 * z) + 16/116;

  return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)]

}