Pixel reordering is wrong when trying to process and display image copy with lower res

Question

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..

Screenshot of Application when run: Normal Image on the left, Skewed pixelated version of the image displayed with rects on the right (window size 4)

Screenshot of Application when run: Normal Image on the left,Skewed pixelated version of the image displayed with ellipses on the right (window size 16)

enter image description here

Although the results are rather amusing, they are not what I want. Here the code:

//=========================================================
//  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);

}

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...

Thanks,

Just a note the first image is using rects with a window size of 4 and the second image is using ellipses with a window size of 16 and the third is using ellipses with a window size of 121 — schanq, Mar 16 '12 at 20:32
I also forgot to mention that the sRGB class is just another version of the color class — schanq, Mar 16 '12 at 21:37
The Problem has been solved by a kind individual on the processing forum: minusing the window size from the img size in the declaration of the loc integer: int loc = (wx+x) + (y+wy)*(img.width-windowSize); was the cause of the strange reordering, the reason this was here in the first place was to prevent windowing outside the the pixel limit of the image. So instead I used constrain... int loc = constrain((wx+x) + (y+wy)*(img.width), 0 , (img.width*img.height)); — schanq, Mar 17 '12 at 16:56

Pixel reordering is wrong when trying to process and display image copy with lower res

0 Answers0