PImage a;
int rgbwidth = 25; // width of zoom section
int rgbheight = 25; // height of zoom section
int imgwidth = 800; // width of image
int imgheight = 600; // height of image
int dp = 50; // displacement of image to center it
int pixheight = 6; // height of a zoomed "pixel" rectangle
int pixwidth = pixheight / 2; // width of a zoomed "pixel" rectangle
int pos;
int truex, truey;
float r, g, b;

void setup() {
  a = loadImage("Water lilies.jpg");
  size(imgwidth + 2 * dp, imgheight + 2 * dp);
  noStroke();
}

void draw() {
  background(255);
  image(a, dp, dp);
  a.loadPixels();
  int startpixel = (mouseY - dp) * a.width + mouseX - dp;
  for (int x = -rgbwidth/2; x < rgbwidth/2; x++) { // loop through 1st rgbheight rows
    for (int y = -rgbheight/2; y < rgbheight/2; y++) { // loop through 1st 10 cols
      truex = x + mouseX - dp;
      truey = y + mouseY - dp;
      if ((truex < imgwidth) && (truex >= 0) && (truey < imgheight) && (truey >= 0)) {
        pos = startpixel + x + imgwidth * y;
        r = red(a.pixels[pos]);
        g = green(a.pixels[pos]);
        b = blue(a.pixels[pos]);
      } 
      else {
        r = g = b = 255;
      }
      int basex = x * pixheight + mouseX;
      int basey = y * pixheight + mouseY;
      if (y % 2 == 0) { // even row
        fill(r, 0, 0);
        rect(basex, basey - pixwidth, pixwidth, pixheight);
        fill(0, g, 0);
        rect(basex + pixwidth, basey, pixwidth, pixheight);
        fill(0, 0, b);
        rect(basex, basey + pixwidth, pixwidth, pixheight);
      } 
      else { // odd row
        fill(r, 0, 0);
        rect(basex, basey, pixwidth, pixheight);
        fill(0, g, 0);
        rect(basex + pixwidth, basey - pixwidth, pixwidth, pixheight);
        fill(0, 0, b);
        rect(basex + pixwidth, basey + pixwidth, pixwidth, pixheight);
      }
    }
  }
}

void keyPressed() {
  switch (key) {
  case '+':
  case '=':
    rgbwidth = constrain(rgbwidth + 1, 2, 100);
    rgbheight = rgbwidth;
    break;
  case '-':
  case '_':
    rgbwidth = constrain(rgbwidth - 1, 2, 100);
    rgbheight = rgbwidth;
    break;
  case '.':
  case '>':
    pixheight = constrain(pixheight + 2, 2, 30);
    pixwidth = pixheight / 2;
    break;
  case ',':
  case '<':
    pixheight = constrain(pixheight - 2, 2, 30);
    pixwidth = pixheight / 2;
    break;
  default:
    break;
  }
}