/*
 * We create a mosaic form of the original image, by
 * creating k-by-k squares having color equal to
 * the top-left original pixel in that square. 
 *
 * The user can adjust the value of k with the up/down arrows.
 */

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

PImage slu;
int k = 2;
int w, h;      // dimensions of original image

void setup() {
  // Can either load an image stored locally or from a URL:
  slu = loadImage("campus4.jpg");
  //slu = loadImage("http://business.slu.edu/uploads/2012/11/08/slu-homepage-campus4.jpg");
  w = slu.width;
  h = slu.height;
  noStroke();
  size(w, h);
  createMosaic();
}

void draw() {
}

// recreate the necessary mosaic based on current k value
void createMosaic() {
  for (int x=0; x < w; x += k) {
    for (int y=0; y < h; y += k) {
      fill(slu.get(x, y));
      rect(x, y, k, k);
    }
  }
}

void keyPressed() {
  if (keyCode == UP) {
    k++;
    createMosaic();
  } else if (k > 1 && keyCode == DOWN) {
    k--;
    createMosaic();
  }
}