# Vertical Pixel Sorting on image

**URL:** <https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419>\
**Category:** Coding Questions\
**Created:** [January 29, 2020, 4:39pm UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419 "2020-01-29T16:39:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://discourse.processing.org/u/Alexx)\
**Post date:** [January 29, 2020, 4:39pm UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/1 "2020-01-29T16:39:51Z")

</div>

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:

```auto
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); 
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 19, 2020, 4:57am UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/2 "2020-02-19T04:57:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://discourse.processing.org/u/Alexx)\
**Post date:** [February 21, 2020, 5:16pm UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/3 "2020-02-21T17:16:04Z")

</div>

I do not know how to do it …

 ![Schermata 2020-02-21 alle 18.39.28](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b7dd6c0700d5448b3fbe8030588b57c6330c5cba.png)

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 22, 2020, 4:15am UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/4 "2020-02-22T04:15:37Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://discourse.processing.org/u/Alexx)\
**Post date:** [February 22, 2020, 8:25am UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/5 "2020-02-22T08:25:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://discourse.processing.org/u/Alexx)\
**Post date:** [February 22, 2020, 8:48am UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/6 "2020-02-22T08:48:05Z")

</div>

But, I have also this code:

```auto
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:

 ![Schermata 2020-02-22 alle 09.46.23](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fa278d5e9c546f13366823fc1b8c71baabd9e8a4.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 22, 2020, 10:09pm UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/7 "2020-02-22T22:09:24Z")

</div>

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:

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

  // ...

}

```

---

<div class="post-metadata">

**Author:** ![Alexx](https://avatars.discourse-cdn.com/v4/letter/a/ee59a6/32.png) [@Alexx](https://discourse.processing.org/u/Alexx)\
**Post date:** [March 3, 2020, 9:50am UTC](https://discourse.processing.org/t/vertical-pixel-sorting-on-image/17419/8 "2020-03-03T09:50:40Z")

</div>

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