# Pixel sorting (time and pixel increment)

**URL:** <https://discourse.processing.org/t/pixel-sorting-time-and-pixel-increment/18321>\
**Category:** Coding Questions\
**Created:** [March 2, 2020, 6:19pm UTC](https://discourse.processing.org/t/pixel-sorting-time-and-pixel-increment/18321 "2020-03-02T18:19:08Z")\
**Posts on this page:** 2\
**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:** [March 2, 2020, 6:19pm UTC](https://discourse.processing.org/t/pixel-sorting-time-and-pixel-increment/18321/1 "2020-03-02T18:19:08Z")

</div>

Hi!  
In this sketch by Kim Asendorf a pixel sorting is performed only once.

**Is it possible to give movement to this pixel sorting?**  
**And most importantly, how can you increase this pixel sorting?**

```auto
int mode = 1;

PImage bg;
String imgFileName = "MyImage";
String fileType = "jpg";

// valori di soglia per determinare i pixel di inizio e fine
int blackValue = -20000000;
int brightnessValue = 20;
int whiteValue = -13000000;

int column = 1;

float Time;
int restart = 0;

void setup() {
  
  bg = loadImage("Tree.jpg");
  
  size(1200, 675);
  frameRate(60);
  // ridimensionamento alla schermata - aggiorna la superficie alle dimensioni dell'immagine
 // surface.setResizable(true);
 // surface.setSize(img.width, img.height);
  
  // immagine aggiornata sulla superficie e ridimensionata per adattarla a larghezza e altezza del display
  image(bg, 0, 0, width, height);
}

void draw() {
  
  float sec = map(frameCount, 0, 60*60, 0, TWO_PI);
  
  pushMatrix();
  
   if (sec >= random(0.1,0.12)){
     
  // sorting su colonne
  while(column < bg.width) {
    bg.loadPixels(); 
    sortColumn();
    column++;
    bg.updatePixels();
  }
  
}

  popMatrix(); 
  
  image(bg, 0, 0, width, height);
 
}

void sortColumn() {
  
  int x = column;
  
  // inizio sorting
  int y = 0;
  
  // fine sorting
  int yend = 0;
  
  while(yend < bg.height) {
    switch(mode) {
      case 0:
        y = getFirstNotBlackY(x, y);
        yend = getNextBlackY(x, y);
        break;
      case 1:
        y = getFirstBrightY(x, y);
        yend = getNextDarkY(x, y);
        break;
      case 2:
        y = getFirstNotWhiteY(x, y);
        yend = getNextWhiteY(x, y);
        break;
    }
    
    if(y < 0) break;
    
    int sortLength = yend-y;
    
    color[] unsorted = new color[sortLength];
    color[] sorted = new color[sortLength];
    
    for(int i=0; i<sortLength; i++) {
      unsorted[i] = bg.pixels[x + (y+i) * bg.width];
    }
    
    sorted = sort(unsorted);
    
    for(int i=0; i<sortLength; i++) {
      bg.pixels[x + (y+i) * bg.width] = sorted[i];
    }
    
    y = yend+1;
  }
}

// black y
int getFirstNotBlackY(int x, int y) {

  if(y < bg.height) {
    while(bg.pixels[x + y * bg.width] < blackValue) {
      y++;
      if(y >= bg.height)
        return -1;
    }
  }
  
  return y;
}

int getNextBlackY(int x, int y) {
  y++;

  if(y < bg.height) {
    while(bg.pixels[x + y * bg.width] > blackValue) {
      y++;
      if(y >= bg.height)
        return bg.height-1;
    }
  }
  
  return y-1;
}

// brightness y
int getFirstBrightY(int x, int y) {

  if(y < bg.height) {
    while(brightness(bg.pixels[x + y * bg.width]) < brightnessValue) {
      y++;
      if(y >= bg.height)
        return -1;
    }
  }
  
  return y;
}

int getNextDarkY(int x, int y) {
  y++;

  if(y < bg.height) {
    while(brightness(bg.pixels[x + y * bg.width]) > brightnessValue) {
      y++;
      if(y >= bg.height)
        return bg.height-1;
    }
  }
  return y-1;
}

// white y
int getFirstNotWhiteY(int x, int y) {

  if(y < bg.height) {
    while(bg.pixels[x + y * bg.width] > whiteValue) {
      y++;
      if(y >= bg.height)
        return -1;
    }
  }
  
  return y;
}

int getNextWhiteY(int x, int y) {
  y++;
  
  if(y < bg.height) {
    while(bg.pixels[x + y * bg.width] < whiteValue) {
      y++;
      if(y >= bg.height) 
        return bg.height-1;
    }
  }
  
  return y-1;
}

```

---

<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:** [March 5, 2020, 7:42pm UTC](https://discourse.processing.org/t/pixel-sorting-time-and-pixel-increment/18321/2 "2020-03-05T19:42:14Z")

</div>

> [@Alexx](#):
>
> **Is it possible to give movement to this pixel sorting?**  
> **And most importantly, how can you increase this pixel sorting?**

By “give movement” do you mean sort one column at a time, one each frame? There are many kinds of movement. Can you describe what you want to achieve, as carefully as possible?

Right now the sketch uses `while(column < bg.width) {` to keep increasing `column` until it is done sorting all of them – all in a single frame.

Instead, you could remove the `while{}`, unindent the contents, and replace it with a statement: `if (column == bg.width) column = 1;`. Then draw() will sort one column each frame, and keep sorting forever.

When you say “increase” what do you mean? I don’t understand.