Processing - Rough pixel sorting algorithm stops after a part of the image

Question

I wrote a code for processing and had formerly sorted pixels with selection sort. I have to hand it in and the teacher said it is taking to long like this, so I decided to divide the pixels brightness into parts of 50 and just sort it very roughly. The image that comes out isn't completely sorted though and I really don't know where it went wrong. I doesn't have to be sorted perfectly - it's really just about having a cool-looking image as a result. I hope some can help me and it is understandable what I mean! Thanks in advance

PImage img; 
PImage two;
PImage sorted;
int j = 0;
int x = j;
int y = x;
int u = y;
int h = u;
int d = 1;

void setup() {

    size(736,1051); 
    img = loadImage("guy.png");
    two = loadImage("guy2.png");

    background(two); 
}

void draw() {
   loadPixels();

    for (int y = 0; y < height; y++) { 
        for (int x = 0; x < width; x++) {
            int loc = x + y*width;

            float r = red(img.pixels[loc]);
            float g = green(img.pixels[loc]);
            float b = blue(img.pixels[loc]);
            float av = ((r+g+b)/3.0);

            pixels[loc] =  color(g,b,r, 17); //I know r, g, b are switched here
        }    
    }  

    updatePixels();
    save("guy_coloured.png"); 
}

void keyPressed(){
    sorted = loadImage("guy_coloured.png");
    sorted.loadPixels();
    image(sorted, 0, 0);

    System.out.print("doing it");

    for (int i = 0; i < sorted.pixels.length; i++){

        color colours = sorted.pixels[i]; 
        float b = brightness(colours); 
        if(b<50){                      
            sorted.pixels[j] = sorted.pixels[i];
            j++;}
    }
    for (int f = 0; f < img.pixels.length; f++){ 

        color colours = sorted.pixels[f];
        float b = brightness(colours);
        if(b<100 && b>50){
            sorted.pixels[x] = sorted.pixels[f];
            x++;} 
    }
    for (int k = 0; k < img.pixels.length; k++){ 

        color colours = sorted.pixels[k];
        float b = brightness(colours);
        if(b<150 && b>100){
            sorted.pixels[y] = sorted.pixels[k];
            y++;}
    }
    for (int t = 0; t < img.pixels.length; t++){ 

        color colours = sorted.pixels[t];
        float b = brightness(colours);
        if(b<200 && b>150){
            sorted.pixels[u] = sorted.pixels[t];
            u++;}
    }
    for (int o = 0; o < img.pixels.length; o++){ 

        color colours = sorted.pixels[o];
        float b = brightness(colours);
        if(b>200){
            sorted.pixels[h] = sorted.pixels[o];
            h++;}
    }

    System.out.print("done");
    sorted.updatePixels();


    image(sorted, 0, 0);
    save("guy_sorted.png"); 
    noLoop();
}

I want the whole image to be sorted, but it gives me back the normal image with about 1/4 sorted from the top. This is the current result: https://i.stack.imgur.com/KVAxo.jpg

Full code including irrelevant parts: https://docs.google.com/document/d/1YC97YMq9fKcbCAn3_RvLIm1bNo72FrNnHT3obc9pp7U/edit?usp=sharing

Answer 1

You do not sort the pixels. What you actually do is to arrange the dark pixel at the begin of the image and overwrite the pixels which are there. If you want to sort the pixels, then you've to swap them.

Write a function which can swap 2 pixel:

void Swap(PImage toSort, int i1, int i2) {
    color c = toSort.pixels[i1];
    toSort.pixels[i1] = toSort.pixels[i2];
    toSort.pixels[i2] = c;
}

Once some pixels have been sorted, and are arranged at the begin of the image, this area doesn't need to be investigated further.

Write a function which sorts pixels dependent on a brightness range [b_min, b_max] and start at a certain index start:

int Sort(PImage toSort, int start, float b_min, float b_max) {

    for (int i = start; i < toSort.pixels.length; i++) {
        float b = brightness(toSort.pixels[i]);
        if (b >= b_min && b < b_max) {
            Swap(toSort, i, start);
            start ++;
        }
    }
    return start;
}

Sort the image by ascending brightness. e.g:

PImage img, two, sorted;

void setup() {
    size(736,1051); 
    img = loadImage("guy.png");
    two = loadImage("guy2.png");
    background(two);  
}

void draw() {
    loadPixels();
    for (int y = 0; y < height; y++) { 
        for (int x = 0; x < width; x++) {
            int loc = x + y*width;
            float r = red(img.pixels[loc]), g = green(img.pixels[loc]), b = blue(img.pixels[loc]);
            pixels[loc] =  color(g,b,r, 17); //I know r, g, b are switched here
       }  
    }        
    updatePixels();
    save("guy_coloured.png"); 
}

void Swap(PImage toSort, int i1, int i2) {
    color c = toSort.pixels[i1];
    toSort.pixels[i1] = toSort.pixels[i2];
    toSort.pixels[i2] = c;
}

int Sort(PImage toSort, int start, float b_min, float b_max) {

    for (int i = start; i < toSort.pixels.length; i++) {
        float b = brightness(toSort.pixels[i]);
        if (b >= b_min && b < b_max) {
            Swap(toSort, i, start);
            start ++;
        }
    }
    return start;
}

void keyPressed(){
    sorted = loadImage("guy_coloured.png");
    sorted.loadPixels();
    image(sorted, 0, 0);

    System.out.print("doing it");

    int j = 0;
    j = Sort(sorted, j, 0.0, 50.0);
    j = Sort(sorted, j, 0.50, 100.0);
    j = Sort(sorted, j, 0.100, 150.0);
    j = Sort(sorted, j, 0.150, 200.0);
    j = Sort(sorted, j, 0.200, 256.0);

    System.out.print("done");
    sorted.updatePixels();

    image(sorted, 0, 0);
    save("guy_sorted.png"); 
    noLoop();
}