Изменение порядка пикселей неверно при попытке обработать и отобразить копию изображения с меньшим разрешением

Question

В настоящее время я делаю приложение, использующее обработку, предназначенную для получения изображения и применения к нему обработки в 8-битном стиле: чтобы оно выглядело как пиксельное. Для этого у него есть метод, который принимает стиль и размер окна в качестве параметров (стиль - это форма, в которой должно отображаться окно - прямоугольник, эллипс, крест и т. Д., А размер окна - число от 1 до 10 в квадрате) - для получения результатов, аналогичных приложению iphone pxl (http://itunes.apple.com/us/app/pxl./id499620829?mt=8). Затем этот метод подсчитывает пиксели изображения, окно за окном усредняет цвет окна и отображает прямоугольник (или какую из выбранных форм / стилей) в эквивалентном пространстве на другой стороне окна эскиза (предполагается, что эскиз выполняется при выполнении). для отображения исходного изображения на левом зеркале его с обработанной версией справа).

Проблема, с которой я сталкиваюсь, заключается в том, что при рисовании усредненных цветовых линий порядок их отображения становится искаженным.

Хотя результаты довольно забавные, они не то, что я хочу. Вот код:

//=========================================================
//  GLOBAL VARIABLES
//=========================================================
PImage img;
public int avR, avG, avB;
private final int BLOCKS = 0, DOTS = 1, VERTICAL_CROSSES = 2, HORIZONTAL_CROSSES = 3; 
public sRGB styleColour;

//=========================================================
//  METHODS FOR AVERAGING WINDOW COLOURS, CREATING AN 
//  8 BIT REPRESENTATION OF THE IMAGE AND LOADING AN 
//                        IMAGE
//=========================================================
public sRGB averageWindowColour(color [] c){


  // RGB Variables
  float r = 0;
  float g = 0;
  float b = 0;

  // Iterator
  int i = 0;

  int sizeOfWindow = c.length;

  // Count through the window's pixels, store the
  // red, green and blue values in the RGB variables
  // and sum them into the average variables
  for(i = 0; i < c.length; i++){

     r = red  (c[i]);
     g = green(c[i]);
     b = blue (c[i]);

     avR += r;
     avG += g;
     avB += b; 
  }

  // Divide the sum of the red, green and blue
  // values by the number of pixels in the window
  // to obtain the average
  avR = avR / sizeOfWindow;
  avG = avG / sizeOfWindow;
  avB = avB / sizeOfWindow;


  // Return the colour
  return new sRGB(avR,avG,avB);
}

public void eightBitIT(int style, int windowSize){

  img.loadPixels();

  for(int wx = 0; wx < img.width; wx += (sqrt(windowSize))){
    for(int wy = 0; wy < img.height; wy += (sqrt(windowSize))){

      color [] tempCols = new color[windowSize];
      int i = 0;

      for(int x = 0; x < (sqrt(windowSize)); x ++){
        for(int y = 0; y < (sqrt(windowSize)); y ++){

          int loc = (wx+x) + (y+wy)*(img.width-windowSize);
          tempCols[i] = img.pixels[loc];
          // println("Window loc X: "+(wx+(img.width+5))+" Window loc Y: "+(wy+5)+" Window pix X: "+x+" Window Pix Y: "+y);


          i++;
        }
      }
      //this is ment to be in a switch test (0 = rect, 1 ellipse etc)

      styleColour = new sRGB(averageWindowColour(tempCols));
      //println("R: "+ red(styleColour.returnColourScaled())+" G: "+green(styleColour.returnColourScaled())+" B: "+blue(styleColour.returnColourScaled()));
      rectMode(CORNER);
      noStroke();
      fill(styleColour.returnColourScaled());
      //println("Rect Loc X: "+(wx+(img.width+5))+" Y: "+(wy+5));
      ellipse(wx+(img.width+5),wy+5,sqrt(windowSize),sqrt(windowSize));

    }

  }
}
public PImage load(String s){

  PImage temp = loadImage(s);
  temp.resize(600,470);
  return temp;

}
void setup(){
  background(0);

  // Load the image and set size of screen to its size*2 + the borders 
  // and display the image. 
  img = loadImage("oscilloscope.jpg");
  size(img.width*2+15,(img.height+10));
  frameRate(25);
  image(img,5,5);

  // Draw the borders
  strokeWeight(5);
  stroke(255);
  rectMode(CORNERS);
  noFill();
  rect(2.5,2.5,img.width+3,height-3);
  rect(img.width+2.5,2.5,width-3,height-3);
  stroke(255,0,0);
  strokeWeight(1);
  rect(5,5,9,9); //window example
  // process the image
  eightBitIT(BLOCKS, 16);
}
void draw(){
  //eightBitIT(BLOCKS, 4);
  //println("X: "+mouseX+" Y: "+mouseY);

} 

Это уже давно меня беспокоит, так как я не вижу, где в моем коде я смещаю координаты, поэтому они отображаются следующим образом. Я знаю, что это, вероятно, что-то очень тривиальное, но я, кажется, могу решить это. Если бы кто-нибудь мог определить, почему происходит этот перекос, я был бы очень благодарен, поскольку у меня есть много других идей, которые я хочу реализовать, и это сдерживает меня ...

Спасибо