imgGrid - Processing sketch to add a pixel grid over an existing raster image

imgGrid.pde

/*

image processing sketch
puts a pixel grid of variable size over a picture

code for Processing 3

code © Alessio Erioli - Co-de-iT

Keys:

spacebar - toggles picture
2-5 - changes grid spacing
i, I - saves a screenshot as "pixelated.png"

*/


PImage img;
int step =3;
int im = 0;
float tr = 90;

void setup() {
  size(100,100,P2D);
  surface.setResizable(true);
  img = loadImage("img1.jpg"); // make sure you have 2 image files named img1.jpg and img2.jpg in your sketch data folder
  surface.setSize(img.width, img.height);
  smooth();

  fill(255, tr);
  stroke(255, tr);
  strokeWeight(1);
}

void draw() {
  background(0);
  image(img,0,0);
  for (int i=0; i<width; i=i+step) {
    for (int j=0; j<height; j=j+step) {
      point(i, j);
    }
  }
}

void keyPressed() {

  if (key == 'i'|| key == 'I') {
    saveFrame("images/pixelated.png");
  }

  switch(key) {
  case '2':
    step = 2;
    break;
  case '3':
    step = 3;
    break;
  case '4':
    step = 4;
    break;
  case '5':
    step = 5;
    break;
  case ' ':
    im++;
    load(im);
    break;
  }
}

void load(int im) {
  if (im%2==0) {
    img = loadImage("img1.jpg");
    surface.setSize(img.width, img.height);
    smooth();
  } 
  else {
    img = loadImage("img2.jpg");
    surface.setSize(img.width, img.height);
    smooth();
  }
}