How to convert color data in Processing - processing

Question

My goal is to take each pixel from an input image, sort each pixel based on its value, and then output a reorganized version of the original image according to the sorted array of pixel values. I am fairly certain that I need to use the hex() function in order to format the color data so that Processing can interpret it again, however I'm not getting the desired result. As it is, I am only getting an all black array of pixels when I run my sketch..
size(150, 150);
PImage myImage = loadImage("image.jpg");
image(myImage, 0, 0);
int[] colors = new int[22500];
loadPixels();
for (int i = 0; i < 22500; i++) {
colors[i] = pixels[i];
}
updatePixels();
int x = 1;
int y = 1;
colors = sort(colors);
for (int i = 0; i < 22500; i++) {
color c = colors[i];
fill(c);
rect(x, y, 1, 1);
x = x + 1;
if (x > width-3) {
x = 1;
y = y + 1;
}
}

Answer 1

I think you are overcomplicating things a bit... You can just do this (this is the whole sketch):
PImage myImage = loadImage("image.jpg");
size(myImage.width*2, myImage.height);
myImage.loadPixels();
image(myImage, 0, 0);
myImage.pixels = sort(myImage.pixels);
myImage.updatePixels();
image(myImage, myImage.width, 0);
I have a feeling though that the result will not be exactly what you expect... If you wanted smooth transition between colours the "sort" function will not do as colours are not stored like that. A quick explanation:
Every pixel's colour is a combination of three colours Red Green and Blue (lets leave transparency our for the moment). So an orange with your typical colour selector is 255(R) 204(G) 0(B). These three values are appended next to each other to store the final colour. It easier to understand if you convert them to hex thus: FF(R) CC(G) 00(B). The final value in hex looks like this: FFCC00. If you translate this to decimal again so that you can store it you get 16763904, which is what the pixels[] array is filled with. Well if you sort the pixels[] array as you are trying to do, what you get is essentially an array sorted like this:
R G B
000 000 000
000 000 001 // a bit blue but almost black
000 000 002 // getting bluer
.
.
.
000 000 255 // all blue
000 001 000 // a bit green but almost black
000 001 001 // a bit green and a bit blue
.
.
.
000 255 000 // all green
000 255 001 // all green and a bit blue (going to cyan)
.
.
.
000 255 255 // cyan
001 000 000 // a bit red but almost black
001 001 000 // a bit red and a bit green
.
.
.
255 000 000 // all red
.
.
.
255 255 000 // yellow
.
.
.
255 255 255 // white
The final effect (on a mostly black + cyan image):

Answer 2

Your sketch is missing a noStroke(). You need to add it somewhere before the for loop that's drawing rectangles of side 1, otherwise the borders of the rectangles (that are black) will fill the whole sketch.
Alternatively, substitute
fill(c);
rect(x, y, 1, 1);
with
stroke(c);
rect(x, y, 1, 1);
You can also use a point instead of a rect but then you need to add a noSmooth()
noSmooth();
stroke(c);
point(x, y);
Just for fun, here is a Mondrian picture sorted with your script
unsorted: sorted:
If you are looking for other ways of sorting colors you can write your own methods or use an available library such as http://toxiclibs.org/.