# Reordering Pixels

I played with reordering pixels in an image based on their brightness or color. It’s not particularly novel, but I thought it would be fun.

I started with black/white/grey images since ordering on a greyscale is straightforward while ordering color is not.

The first attempt reordered horizontally, as shown below and in the code here.

and

However, I thought a circle would be more appealing. Implementing this was non-trivial, as I had to figure out how to assign the ordered colors into a spiral in the final image.

It was tempting to try to figure out how to map the i^{th} color in the ordered color list to some particular x/y coordinate in the final image. Instead, I ended up ordering the x/y coordinate pairs in the final image based on “spiral order.” Then I used a for loop to go through the color list and assign each color to the matching element in the sorted vector of x-y pairs. This way I never needed to figure out a mapping to a particular pixel, but rather just match up each color and pixel in order.

This code shows how I created and walked through the color list.

```
<em>vector <int> colors;
for (int i = 0; i < width * height; i++){
colors.push_back(pixOrig[i]);
}
ofSort(colors);
// create a vector of all pixels, and sort them by spiral order from center
vector <ofVec2f> coords;
for (int i = 0; i < width; i++){
for (int j = 0; j < height; j++){
// redefine coordinates from center for sorting, note the offset needed for the center
coords.push_back(ofVec2f(float(i) - width / 2,float(j) - height / 2));
}
}
// sort the ordered pairs of pixels into a spiral, using function declared above
ofSort(coords, orderPixels);
// walk through the vector of ordered pixels and assign colors in order
for (int i = 0; i < colors.size(); i++){
ofVec2f k = coords[i];
pixFinal[int((k.y + height/2) * width + (k.x + width/2))] = colors[i];
}</em>
```

And, this is the sorting function “orderPixels” which was used to sort the vector of ordered pairs of coordinates.

```
bool ofApp::orderPixels(ofVec2f a, ofVec2f b){
// goal: return true if a > b
// check if radius a is larger than radius b, using pythagorian theorem
if(sqrt(a.x * a.x + a.y * a.y) > sqrt(b.x * b.x + b.y * b.y) + 1){
return true;
//check if radius b is larger than radius a
} else if (sqrt(a.x * a.x + a.y * a.y) + 1 < sqrt(b.x * b.x + b.y * b.y)){
return false;
// if the radius is within 1, check the angles
} else {
// both points below midpoint?
if(a.y < 0 and b.y < 0){
// and further left?
if(a.x < b.x){
return true;
} else {
return false;
}
// both points above midpoint?
} else if(a.y > 0 and b.y > 0){
// and further right?
if(a.x > b.x){
return true;
} else {
return false;
}
// one point above midpoint, and the other below?
} else if(a.y > b.y){
return true;
} else {
return false;
}
} }
```

The rest of the code is here.

The result is this:

and

and

and

I also played with reversing the order:

and

Next up will be defining functions to order color. This harkens back in a way to the color interpolation tests I did in D3/JS last year.