colorDifferenceTester.js

var color1, color2;
var colorToSelect = 0;
function setup() {
  createCanvas(800, 800);
  
  color1 = color(0, 0, 0);
  color2 = color(0, 0, 0);

  //draw some random colors in a grid
  push();
  for(var row=0;row<10;row++) {
    push();
    for(var col=0;col<10;col++) {
      fill(random(0, 255), random(0, 255), random(0, 255));
      rect(0, 300, 30, 30);
      translate(40, 0);
    }
    pop();
    translate(0, 40);
  }
  pop();
  
  text("Click on the color palette to change the sampling colors.", 50, 250);
}

function draw() {
  fill(color1);
  rect(100, 100, 50, 50);
  fill(color2);
  rect(180, 100, 50, 50);
  
  fill(255);
  noStroke();
  rect(250, 100, 500, 75); //white rectangle to clear previous text
  fill(0);
  var distance = round(dist(red(color1), green(color1), blue(color1), red(color2), green(color2), blue(color2)));
  text("color distance: " + distance, 250, 150);
  stroke(0);
}

function mousePressed() {
  if(colorToSelect === 0) {
    color1 = get(mouseX, mouseY); //get color at these coordinates
  }
  else {
    color2 = get(mouseX, mouseY); //get color at these coordinates
  }
  colorToSelect = (colorToSelect + 1) % 2; //alternate between 0 and 1
}