Well, the process actually goes from right to left, starting from a full image, then progressively pixelizing it more and more, ie. replacing each square of pixels (bigger squares when going to the left) with the a square of the uniform average color of the pixels in it.

Ok I try do this by using pixels table :)

I still don't know how do this can you describe me the algorithm that I should use? For example I need pixels array and what next how can I change 10x10 image to 8x8?

Just look at each pixel in turn and work out the average of the pixels surrounding it.

Here's a pixel 'P' and the 8 surrounding pixels...

XXX
XPX
XXX

Store the new value in another array (lets call it buffer[]). When you've done this for all the pixels copy the averages from buffer[] back into pixels[]. Repeat this step to increase the blur  or pixelisation.

Note - you'll need to take account of the edges and maybe 'wrap around' so the pixel 'above' screen location (0,0) is (0, height-1)!

I do not know how to start, because I do not understand how it works.
I have a picture 100 to 100 and change it to 2x2.
How do I know which pixels replace the other? 100 divided by 2? And for those 50 pixels computed the average color, and I set it?

OK, you're not going to make the final image 2x2 pixels it'll just look like that - each of the four squares will be 25x25 pixels (all the same colour) so your image will still be 100x100 pixels :D

Start by reading up on pixels[] here http://processing.org/reference/pixels.html and arrays here http://processing.org/reference/arrayaccess.html if you need to.



EDIT: I meant 50x50 pixels not 25x25.... doh!

Indeed check out not_55's links to get a grasp of the pixel array.

Also see: http://processing.org/learning/pixels/

For further inspiration see: https://forum.processing.org/topic/reducing-the-size-of-an-image

OK, you're not going to make the final image 2x2 pixels it'll just look like that - each of the four squares will be 25x25 pixels (all the same colour) so your image will still be 100x100 pixels :D

You consider each pixel in the image (or in the window) and get an average from the 8 surrounding pixels. Save that average in a 'buffer' array.

In the image below I've shown P as the pixel being considered and labelled three of the surrounding cells with their co-ords. Average all 8 and save in your buffer array - shown as P'. Now consider the next pixel (to the right of P) and do the same for that.

Eventually your buffer will be full of these average values and at that point, replace the image with the values from the buffer and start the sequence again - each step will blur the original more.

As I mentioned before, you need to take care of the cases where P is at the edge of the image and the usual way is to wrap around.

To make things easier you could just do the above with two arrays to begin with rather than messing around with images which will take more work. If you println() the two arrays you'll be able to see when it's going right :)


EDIT: This way it doesn't matter whether your image is odd or even sized :D

OK - you want more pixellation - instead of averaging just pick one pixel out of a block of 4 (for example) and put that into the buffer, like this...

Image         Buffer
ABCD          AACC
BBDD          AACC

...you will lose all the 'B'  and 'D' colour pixels. On the next pass you could loose all the C pixels and so on...

1. PImage original;
2. PGraphics pixelized;
3. final int TIME = 2000;
4. int lastTime = -TIME;
5. int level = 1;
6.  
7. void setup()
8. {
9.   size(400, 400);
10.   original = loadImage("G:/Images/Hugh-Lauries.jpg");
11.   pixelized = createGraphics(original.width, original.height, JAVA2D);
12. }
13.  
14. void draw()
15. {
16.   if (millis() - lastTime > TIME)
17.   {
18.     lastTime = millis();
19.     level *= 2;
20.     background(255);
21.     pixelize();
22.     image(pixelized, 20, 20);
23.   }
24. }
25.  
26. void pixelize()
27. {
28.   int w = original.width / level;
29.   int h = original.height / level;
30.   if (w < 1 || h < 1)
31.   {
32.     noLoop();
33.     return;
34.   }
35.   color[] colors = new color[w * h];
36.   println(level + " " + w + "x" + h);
37.  
38.   pixelized.beginDraw();
39.   pixelized.noStroke();
40.   for (int i = 0; i < level; i++)
41.   {
42.     for (int j = 0; j < level; j++)
43.     {
44.       int cellPos = i * w + j * h;
45.       for (int x = 0; x < w; x++)
46.       {
47.         for (int y = 0; y < h; y++)
48.         {
49.           int pixelPos = x + w * y;
50.           int pos = (i * w + x) + (j * h + y) * original.width;
51.           colors[pixelPos] = original.pixels[pos];
52.         }
53.       }
54.       color c = averageColors(colors);
55.       pixelized.fill(c);
56.       pixelized.rect(i * w, j * h, w, h);
57.     }
58.   }
59.   pixelized.endDraw();
60. }
61.  
62. color averageColors(color[] colors)
63. {
64.   long r = 0;
65.   long g = 0;
66.   long b = 0;
67.   for (color c : colors)
68.   {
69.     r += (c >> 16) & 0xFF;
70.     g += (c >> 8) & 0xFF;
71.     b += c & 0xFF;
72.   }
73.   int len = colors.length;
74.   int ar = (int) (r / len);
75.   int ag = (int) (g / len);
76.   int ab = (int) (b / len);
77.   return 0xFF000000 | (ar << 16) | (ag << 8) | ab;
78. }

Works better for images whose size is a power of 2...

Thank you once again :)

After compensating for extra pixels, it was easy to go one step further and have levels not power of two... This allows to have a more progressive (de-)pixelization.
Check my repository for this small update.

Ok I'll check :)

In a private message (why private? I missed it for some time...), you asked what the point is about these extra pixels.
If you check my repository, you will see I updated the code with much more comments.
Anyway, the base idea is to divide the image in cells, you have a number of cells horizontally. But these cells will have an integer size. Say we have an image of 250 pixels horizontally, and 6 cells to divide it. Each cell will have a width of 250 / 6 pixels, ie. 41 pixels. But 6 cells of 41 pixels only cover 6 x 41 = 246 pixels, so we have 4 pixels left away... To compensate this, we will make 4 cells one pixel larger, and put them in the center of the image.
Idem vertically, of course.
One more refinement might be to have a different number of cells horizontally and vertically, to have squarish cells in case of images of width / height ration quite different from 1.

Thank you :)