Image manipulation with Processing (part 2)

Here is another little project that illustrates the power of Processing.

The aim of this project is to take a photo, slice it into a 20×20 grid and save the individual slices as separate images. If you then print these 400 images to 7″x5″ (15cm x 10cm) and you put them together in the right order, you end up with an enormous 3m x 2m collage!

And all that using a piece of code that can be written with Processing.

In the example below, I’m slicing a photo into a 5×5 grid. I actually printed the resulted images in A4, taped them together and I got a pretty big (1m x 1.5m) poster.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

PImage myImage;
 
// Images must be in the "data" directory to load correctly
String myFile = "myphoto.jpg";
 
int slices = 5;
int sliceX = 0;
int sliceY = 0;
 
void setup(){
  frameRate = 1;
  myImage = loadImage(myFile);
  size(myImage.width / slices, myImage.height / slices);
 
}
 
 
void draw(){
  int myW = myImage.width / slices;
  int myH = myImage.height / slices;
 
  PImage mySlice = myImage.get( myW * sliceX, myH * sliceY, myW, myH);
  image(mySlice,0,0);
 
  saveFrame("Slice-" + nf(sliceX,2) + "-" + nf(sliceY,2) + ".jpg");
 
  //for debugging purposes...
  println(nf(sliceX,2) + "-" + nf(sliceY,2));
 
  //moving on to the next frame
  if (sliceX < slices - 1){
    sliceX = sliceX + 1;     
  }
 
  else if (sliceX == slices - 1){
    if (sliceY == slices - 1){
      exit();  
    }   
 
 
 
    else{
      sliceX = 0;
      sliceY = sliceY + 1;     
    }
  }
}