I'm currently making an application using processing intended to take an image and apply 8bit style processing to it: that is to make it look pixelated. To do this it has a method that take a style and window size as parameters (style is the shape in which the window is to be displayed - rect, ellipse, cross etc, and window size is a number between 1-10 squared) - to produce results similar to the iphone app pxl (http://itunes.apple.com/us/app/pxl./id499620829?mt=8 ). This method then counts through the image's pixels, window by window averages the colour of the window and displays a rect(or which every shape/style chosen) at the equivalent space on the other side of the sketch window (the sketch when run is supposed to display the original image on the left mirror it with the processed version on the right).

The problem Im having is when drawing the averaged colour rects, the order in which they display becomes skewed..

Although the results are rather amusing, they are not what I want. This has been bugging me for a while now as I can't see where in my code im offsetting the coordinates so they display like this. I know its probably something very trivial but I can seem to work it out. If anyone can spot why this skewed reordering is happening i would be much obliged as i have quite a lot of other ideas i want to implement and this is holding me back (I have also asked this on stackoverflow but this is the processing forum so I realised i was more likely to get an answer here :)). The sRGB class is essentially color() so you can replace with that to get it working (although if youd like that and the other colour space classes XYZ and LAB i can post but they aren't really used within the code). Anyway PLEASE Help me its a rather annoying bug...

Thanks,

Here the code:

2. //=========================================================\\
3. //=========================================================\\
4. //                        8BITIMG                          \\
5. //=========================================================\\
6. //  An Image Processing application for 8Bit Stylisation   \\
7. //=========================================================\\
8. //=========================================================\\
9. //          Copyright (C) 2012  Pierre Chanquion           \\
10. //              pierre.chanquion@gmail.com                 \\
11. //=========================================================\\
12. //=========================================================\\
13. //         This program is free software: you can          \\
14. //    redistribute it and/or modify it under the terms     \\
15. //    of the GNU General Public License as published by    \\
16. //    the Free Software Foundation, either version 3 of    \\
17. //    the License, or (at your option) any later           \\
18. //                      version.                           \\
19. //                                                         \\
20. //    This program is distributed in the hope that it      \\
21. //    will be useful, but WITHOUT ANY WARRANTY; without    \\
22. //    even the implied warranty of MERCHANTABILITY or      \\
23. //    FITNESS FOR A PARTICULAR PURPOSE.  See the GNU       \\
24. //       General Public License for more details.          \\
25. //=========================================================\\
26. //    You should have received a copy of the GNU General   \\
27. //     Public License along with this program.  If not,    \\
28. //    see <http://www.gnu.org/licenses/>.                  \\
29. //=========================================================\\
30. //=========================================================\\
31. 
    
32. // ControlP5 Library used for GUI objects 
33. import controlP5.*;
34. 
    
35. //=========================================================
36. //  GLOBAL VARIABLES
37. //=========================================================
38. PImage img;
39. public int avR, avG, avB;
40. private final int BLOCKS = 0, DOTS = 1, VERTICAL_CROSSES = 2, HORIZONTAL_CROSSES = 3; 
41. public sRGB styleColour;
42. 
    
43. //=========================================================
44. //  METHODS FOR AVERAGING WINDOW COLOURS, CREATING AN 
45. //  8 BIT REPRESENTATION OF THE IMAGE AND LOADING AN 
46. //                        IMAGE
47. //=========================================================
48. public sRGB averageWindowColour(color [] c){
49. 
    
50.   
51.   // RGB Variables
52.   float r = 0;
53.   float g = 0;
54.   float b = 0;
55.   
56.   // Iterator
57.   int i = 0;
58.   
59.   int sizeOfWindow = c.length;
60.   
61.   // Count through the window's pixels, store the
62.   // red, green and blue values in the RGB variables
63.   // and sum them into the average variables
64.   for(i = 0; i < c.length; i++){
65.    
66.       r = red  (c[i]);
67.       g = green(c[i]);
68.       b = blue (c[i]);
69.       
70.       avR += r;
71.       avG += g;
72.       avB += b; 
73.   }
74.   
75.   // Divide the sum of the red, green and blue
76.   // values by the number of pixels in the window
77.   // to obtain the average
78.   avR = avR / sizeOfWindow;
79.   avG = avG / sizeOfWindow;
80.   avB = avB / sizeOfWindow;
81.   
82.   
83.   // Return the colour
84.   return new sRGB(avR,avG,avB);
85. }
86. 
    
87. public void eightBitIT(int style, int windowSize){
88.   
89.   img.loadPixels();
90.    
91.   for(int wx = 0; wx < img.width; wx += (sqrt(windowSize))){
92.    for(int wy = 0; wy < img.height; wy += (sqrt(windowSize))){
93.      
94.       color [] tempCols = new color[windowSize];
95.       int i = 0;
96.       
97.       for(int x = 0; x < (sqrt(windowSize)); x ++){
98.         for(int y = 0; y < (sqrt(windowSize)); y ++){
99.     
100.           int loc = (wx+x) + (y+wy)*(img.width-windowSize);
101.           tempCols[i] = img.pixels[loc];
102.          // println("Window loc X: "+(wx+(img.width+5))+" Window loc Y: "+(wy+5)+" Window pix X: "+x+" Window Pix Y: "+y);
103.           
104.           
105.           i++;
106.         }
107.       }
108.       styleColour = new sRGB(averageWindowColour(tempCols));
109.      // println("R: "+ red(styleColour.returnColourScaled())+" G: "+green(styleColour.returnColourScaled())+" B: "+blue(styleColour.returnColourScaled()));
110.       ellipseMode(CORNER);
111.       noStroke();
112.       fill(styleColour.returnColourScaled());
113.      // println("Rect Loc X: "+(wx+(img.width+5))+" Y: "+(wy+5));
114.       ellipse(wx+(img.width+5),wy+5,sqrt(windowSize),sqrt(windowSize));
115.       
116.     }
117.   
118.   }
119. }
120. public PImage load(String s){
121. 
     
122.   PImage temp = loadImage(s);
123.   temp.resize(600,470);
124.   return temp;
125. 
     
126. }
127. void setup(){
128.   background(0);
129.   img = loadImage("nomadindia.png");
130.   size(img.width*2+15,(img.height+10));
131.   frameRate(1);
132.   image(img,5,5);
133.   strokeWeight(5);
134.   stroke(255);
135.   rectMode(CORNERS);
136.   noFill();
137.   rect(2.5,2.5,img.width+3,height-3);
138.   rect(img.width+2.5,2.5,width-3,height-3);
139.   stroke(255,0,0);
140.   strokeWeight(1);
141.   rect(5,5,9,9);
142.   eightBitIT(BLOCKS, 4);
143. }
144. void draw(){
145.  // eightBitIT(BLOCKS, 4);
146.   //println("X: "+mouseX+" Y: "+mouseY);
147. 
     
148. }