var currentColor = 255;

let colorPicker;

let colorPickerColor = 255;

let fadeAmount = 0;

let textFillColor = 255;

let amt = 0.1;

let end = 360;

let difference = 0;

​

function setup() {

  createCanvas(500, 500);

  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

  ];

  colorPicker = createColorPicker('black');

  colorPicker.position(25, 25);

  background(bgColor);

  randomCircle();

}

​

function draw() {

  background(255);

  colorPicker.changed(fillWithChosenColor);

  /*

  strokeWeight(50);

  stroke(currentColor);

  fill(colorPickerColor);

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

  */

​

  //push();

  noStroke();

  fill(currentColor);

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

  end -= 0.2;

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

  fill(colorPickerColor);

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

  //pop();

  /*

  stroke(200);

    // Update start and stop angles.

  let biteSize = PI / 16;

  let startAngle = biteSize *  amt + biteSize;

  let endAngle = TWO_PI - startAngle;

  arc(width/2, height/2, 400, 400, startAngle, endAngle, PIE);

  amt += 0.01;

  */ 

​

  push();

  difference = 100 - calculateDifference();

  console.log(difference);

  noStroke();

  fill(color(255));

  textSize(25);

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

  pop();

}

​

function keyPressed(){

  if (key == ' '){

    randomCircle();

  }  

}

function randomCircle(){

  loop();

  background(255); 

  currentColor = random(colorArray);

  colorPickerColor = color(255, 255, 255);

  end = 360;

​

  /*

  noStroke();

  fill(currentColor);

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

  fill(bgColor);

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

  */

}

​

function fillWithChosenColor(){  

  colorPickerColor = colorPicker.color();

  //fill(colorPickerColor);

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

  //stroke(currentColor);

  //fill(colorPickerColor);

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

  noLoop();

  // setTimeout(() => randomCircle(), 3000);

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

  return;

}

​

function pauseScreen(){

  fill(0);

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

  fill(255);

  textSize(15);

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

  textSize(20);

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

​

}

​

function mousePressed() {

  if (insideCircle()) {

    loop();

    randomCircle();

  }

}

​

function insideCircle() {

    return Math.sqrt(sq(mouseX-width/2) + sq(mouseY-height/2)) < 300/2 ? true : false;

}

​

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

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

}

​