/*
 * An interactive sketch that allows user to adjust saturation levels with
 * up and down arrows. (The 'r' key resets to original.)
 */

// following is only used for javascript version in browser
/* @pjs preload="campus4.jpg"; */

PImage original, grayscale, current;

int w,h;            // dimensions for reference image
float t=1.0;        // weight for linear interpolation of original and grayscale
float tIncr = 0.1;  // step size for adjustments

void setup() {
  //  original = loadImage("http://business.slu.edu/uploads/2012/11/08/slu-homepage-campus4.jpg");
  original = loadImage("campus4.jpg");  // use locally saved version
  w = original.width;
  h = original.height;
  size(w, h);

  // create grayscale version for later reference
  grayscale = createImage(w, h, RGB);
  for (int x=0; x < w; x++) {
    for (int y=0; y < h; y++) {
      grayscale.set(x, y, color(luminensce(original.get(x, y))));
    }
  }

  // build 'current' version, which is same as original for t=1.0
  current = createImage(w, h, RGB);
  recomputeCurrent();
}

float luminensce(color c) {
  return 0.21*red(c) + 0.72*green(c) + 0.07 * blue(c);
}

// recomputes current image based on value of t for interpolation
void recomputeCurrent() {
  for (int x=0; x < w; x++) {
    for (int y=0; y < h; y++) {
      color c1 = original.get(x,y);
      color c2 = grayscale.get(x,y);
      float r = t * red(c1) + (1-t) * red(c2);
      float g = t * green(c1) + (1-t) * green(c2);
      float b = t * blue(c1) + (1-t) * blue(c2);
      // although some of r,g,b may be out of range. Processing clips values for us
      current.set(x, y, color(r,g,b));
    }
  }
}

void draw() {
  image(current, 0, 0);
}

void keyPressed() {
  if (keyCode == UP) {
    t += tIncr;
    recomputeCurrent();
  } else if (keyCode == DOWN) {
    t -= tIncr;
    recomputeCurrent();
  } else if (key == 'r') { // reset
    t = 1.0;
    recomputeCurrent();
  }
}