Image manipulation with Processing (part 2)

Posted by admin on June 06, 2009
Processing, examples

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;     
    }
  }
}

Tags: , ,