Vertical Pixel Sorting on image

Hi. I’m new to Processing. Hope someone is able to help me.

I have two answer:

  1. In my sketch the pixel sorting work on width, but I I need it to be vertical non horizontal … how?
  2. The pixel sorting start and finishing alone, how can I adjust these parameters to my liking?

Thank u.

This is the code:

int mode = 0;

int threshold;

PImage img;

String fileType = "jpg";

void setup() {
  
  img = loadImage("Tree.jpg");
  size(1200, 675);
  image(img, width, height);
  frameRate(60);
  
}

void draw() {
  img.loadPixels();
  
  for (int k=height; k<height*width; k++) {
    if (threshold < 150000) {
      if (brightness(img.pixels[k]) > threshold) {
        img.pixels[k] = color(
        int(red(img.pixels[height])),
        int(green(img.pixels[height])),
        int(blue(img.pixels[height])));
      }
      
      else {
        img.pixels[height] = color(
        int(red(img.pixels[k-1])),
        int(green(img.pixels[k-1])),
        int(blue(img.pixels[k-1])));
      }
      threshold = threshold+10;
    }
    
      else {
      threshold = 0;
    }
  }
  
  img.updatePixels();
  image(img, 0, 0); 
}
1 Like

One method is to rotate the image 90 degrees, sort its rows horizontally, then rotate the image back again.

One method is to loop over columns and march down, increasing the pixels[] index by width each time (that moves to the pixel below it).

You may not want to do your sort operation every single frame of draw. Perhaps once in setup, and / or on a keypress?

1 Like

I do not know how to do it …

This is the result for now. But pixel sorting is horizontal. I don’t understand to rotate the pixel sorting vertical with my code.

1 Like

Your current code is not sorting pixels horizontally. It loops over every pixel horizontally and, if it passes a brightness check, copies the previous value into it. This creates streaks.

I haven’t testsd it but there are some strange things about this code. First, it starts at height pixels, so it skips a small part of the picture (it should start at 1).

Second, it isn’t a 2D loop. Because it is 1D it blends the left and right edges where it wraps around.

Third, it performs a test that can only fail if the brightness (0-255) is less than the threshold (which increases from 0-150000). So it only checks the first 26 pixels, then fails for the next 14974 pixels. If it succeeds, it copies an arbitrary pixel [height] onto the value. I’m not sure that this ever happens…

1 Like

This is the only way I have found to do a “pixel sorting”. I don’t know how to change it to have vertical pixel sorting.

Thanks anyway

1 Like

But, I have also this code:

PImage img;

int minThreshold = 110;
int maxThreshold = 350;

float Time;
int restart = 0;

void setup() {
  
  size(1200, 675);
  
  frameRate(60);
  
  img = loadImage("Tree.jpg");
  
  
}

void draw() {
  //background(255);
  
  image(img, 0, 0);
  
  img.loadPixels();
  
  float sec = map(frameCount, 0, 60*60, 0,  TWO_PI);
  println(sec);
  
  pushMatrix();
  
  if (sec >= (0.03)){
    
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {

      if (brightness(img.pixels[y*width+x]) > minThreshold && brightness(img.pixels[y*width+x]) < maxThreshold) {
        color c = get(x, y);
        stroke(c,40);
        line(x, y, x, y+50);
        
      }
    }}
  }
  
  
  
  popMatrix();
  
}

And the is the result:

But he doesn’t follow the time indications I give him, because I would like to tell him that every few seconds he has to re-sort, but how?
So to increase the value that I have already given him?

2 Likes

Well, like I said, this is not sorting. The pixels are not sorted; they are not re-sorted. This is streaking.

If that is what you want, then to animate you can could change the parameter periodically at the top of draw.

For example, this decreases the minThreshold every second until it reaches 5:

void draw() {
  if(frameCount%60 == 1) {
    minThreshold = max(minThreshold - 5, 0);
  }

  // ...

}
1 Like

How I can “rotate the image 90 degrees, sort its rows horizontally, then rotate the image back again” ?