PImage img;
int s = 10;

void setup() {
  img = loadImage("baby.jpg");   
  size(img.width, img.height);   
  img.loadPixels();
  for (int y=0; y<img.height; y+=s) {
    for (int x=0; x<img.width; x+=s) {
      addShape(x, y);
    }
  }
}

// comment and uncomment each block to see different visualization effects
void addShape(int x, int y) {
  int i = x + width*y;
  color c = img.pixels[i];
  
  //drawn as dots
  //noStroke();
  //fill(c);
  //ellipse(x, y, s+2, s+2);

  // drawn as squares
  //fill(c);
  //rect(x, y, s, s);
  
  // drawn as empty squares
  //stroke(c);
  //noFill();
  //rect(x, y, s, s);

  // drawn as lines
  //stroke(c);
  //strokeWeight(3);
  //line(x, y, x+s, y+s);
  
  // drawn as text
  // convert to grayscale
  float gray = red(c)*0.3+green(c)*0.59+blue(c)*0.11;
  // map the grayscale value to a font size between 10 and 25
  float fontSize = map(gray, 0, 255, 10, 25);
  // also try mapping the size the other way, i.e. darker colors get bigger fonts
  //float fontSize = map(gray, 0, 255, 20, 10);
  fill(c);
  textSize(fontSize);
  text(x%9, x, y);
}