// three images (two input and one output)
PImage img1, img2, out;
// for scaling the application, if needed
int screenScale = 1;

void setup() {
  // loading source photos
  img1 = loadImage("left.png");
  img2 = loadImage("right.png");
  
  // creating a blank image for the result
  out = new PImage(img1.width,img1.height);
  
  // enought to fit the output, and the two half-sized source images at the bottom
  int h = (3*img1.height)/(2*screenScale);
  
  // creating window, basic 2D renderer
  size(img1.width/screenScale, h, P2D);
}

// draw loop, interactive application
void draw() {
  // Y will scale from full light to one channel (blue for left and red for right)
  float normalizedY = map(mouseY, 0, height, 1,0);
  // to scale the contribution of each original image
  float normalizedX = map(mouseX, 0, width, -1,1);
  
  // capping the value for left and right intensities.
  float rightIntensity = 1;
  if (mouseX < width/2)
    rightIntensity += normalizedX;

  float leftIntensity = 1;
  if (mouseX > width/2)
    leftIntensity -= normalizedX;
    
  // filling in all the pixels of the output image (out)
  for(int i=0; i < out.pixels.length; i++) {

    // original colors from the original pictures
    color c1 = img1.pixels[i];
    color c2 = img2.pixels[i];
    
    // calculating the amount of each color channel to use from each image
    float rightR = red(c2)*rightIntensity;
    float rightG = green(c2)*normalizedY*rightIntensity;
    float rightB = blue(c2)*normalizedY*rightIntensity;
    
    float leftR = red(c1)*normalizedY*leftIntensity;
    float leftG = green(c1)*normalizedY*leftIntensity;
    float leftB = blue(c1)*leftIntensity;
    
    // filling the output by adding the calculated color channels from both sides
    out.pixels[i] = color( leftR+rightR , leftG+rightG, leftB+rightB, 255);
  }  
  // showing the result image and the original
  image(out, 0, 0, out.width/screenScale, out.height/screenScale);
  
  // representative color masks for each original image
  color leftMask = color(255*normalizedY*leftIntensity,255*normalizedY*leftIntensity,255*leftIntensity,255);
  color rightMask = color(255*rightIntensity,255*normalizedY*rightIntensity,255*normalizedY*rightIntensity,255);
  
  // original images, will not change
  image(img1,0,img1.height/screenScale,img1.width/(2*screenScale), img1.height/(2*screenScale));
  image(img2,img1.width/(2*screenScale),img1.height/screenScale,img2.width/(2*screenScale), img2.height/(2*screenScale));
  
  // explanatory texts
  fill(0);
  text("Color Mask (left)",42,height-13);
  fill(255);
  text("Color Mask (left)",40,height-15);
  
  fill(0);
  text("Color Mask (right)",width-137,height-13);
  fill(255);
  text("Color Mask (right)",width-135,height-15);
  
  fill(leftMask);
  ellipse(20,height-20,20,20);
  
  fill(rightMask);
  ellipse(width-20,height-20,20,20);
 
}