# Pixel Sorter with Processing (lighter pixels rise)

**URL:** <https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413>\
**Category:** Coding Questions\
**Created:** [December 7, 2023, 2:01pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413 "2023-12-07T14:01:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 7, 2023, 2:01pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413/1 "2023-12-07T14:01:35Z")

</div>

Hi there!

I am trying to use this [tutorial](https://happycoding.io/tutorials/p5js/images/pixel-sorter) in processing. I know this function needs some values

> sortPixels();

but I don’t know how to do it. Could you please help me? Thanks!

```auto
PImage img;

void setup() {
  size (1024,1024);
  img = loadImage("ciudad.png");
  noSmooth();
}

void draw() {
   image(img, 0, 0);
   sortPixels();
}
void sortPixels(float x, float y, PImage colorOne, PImage colorTwo, float totalOne, float totalTwo) {
  // Get a random pixel.
  x = random(img.width);
  y = random(img.height - 1);

  // Get the color of the pixel.
  colorOne = get(x, y);

  // Get the color of the pixel below the first one.
  colorTwo = get(x, y + 1);

  // Get the total R+G+B of both colors.
  totalOne = red(colorOne) + green(colorOne) + blue(colorTwo);
  totalTwo = red(colorTwo) + green(colorTwo) + blue(colorTwo);

  // If the first total is less than the second total, swap the pixels.
  // This causes darker colors to fall to the bottom,
  // and light pixels to rise to the top.
  if (totalOne < totalTwo) {
    img.set(x, y, colorTwo);
    img.set(x, y + 1, colorOne);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 7, 2023, 3:32pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413/2 "2023-12-07T15:32:36Z")

</div>

You changed the example from the tutorial which is unfortunate.

For example you call sort function only once in draw

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 7, 2023, 3:33pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413/3 "2023-12-07T15:33:27Z")

</div>

And in draw you forgot loadPixels and

```auto
img.updatePixels();

```

(EDIT: not necessary!!!)

Check out the code in the tutorial

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [December 7, 2023, 3:46pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413/4 "2023-12-07T15:46:44Z")

</div>

> [@humano](#):
>
> ```auto
> void sortPixels(float x, float y, PImage colorOne, PImage colorTwo, float totalOne, float totalTwo) {
>  
> 
> ```

Also, you can leave the brackets empty

Just move their content down and separate them by `;` (semicolon).

so you declare them in the function :

```auto
int x;
int y;

color colorOne;
color colorTwo;

float totalOne;
float totalTwo;

```

* * *

**Here is a working example**

replace your file name please

(it’s faster using `pixels[]` instead of `get()`, but then you’ll need loadPixels and updatePixels again)

(EDITED)

```auto

PImage img;

void setup() {
  size (1024, 1024);

  frameRate(1000);

  img = loadImage("IMG_1502.PNG");
  img.resize(0, height);
  // noSmooth();
}

void draw() {
  image(img, 0, 0);

  // img.loadPixels();
  for (int i=0; i<1000; i++)
    sortPixels();
  // img.updatePixels();
}

void sortPixels() {
  int x;
  int y;

  color colorOne, colorTwo;

  float totalOne, totalTwo;

  // Get a random pixel.
  x = int(random(img.width));
  y = int(random(img.height - 1));

  // Get the color of the pixel.
  colorOne = img.get(x, y);

  // Get the color of the pixel below the first one.
  colorTwo = img.get(x, y + 1);

  // Get the total R+G+B of both colors.
  totalOne = red(colorOne) + green(colorOne) + blue(colorOne);
  totalTwo = red(colorTwo) + green(colorTwo) + blue(colorTwo);

  // If the first total is less than the second total, swap the pixels.
  // This causes darker colors to fall to the bottom,
  // and light pixels to rise to the top.
  if (totalOne < totalTwo) {
    img.set(x, y, colorTwo);
    img.set(x, y + 1, colorOne);
  }
}

```

---

<div class="post-metadata">

**Author:** ![humano](https://avatars.discourse-cdn.com/v4/letter/h/dbc845/32.png) [@humano](https://discourse.processing.org/u/humano)\
**Post date:** [December 8, 2023, 8:42pm UTC](https://discourse.processing.org/t/pixel-sorter-with-processing-lighter-pixels-rise/43413/5 "2023-12-08T20:42:15Z")

</div>

Thank you so much, it works! Indeed, lighter pixel rise as an animation, but how could I speed it up? Happy codding key is not working on my code

```auto
PImage img;

void setup() {
  size (1024, 1024);

  frameRate(1000);

  img = loadImage("ciudad.png");
  img.resize(0, height);
  // noSmooth();
}

void draw() {
  img.updatePixels();
  
  // Loop 100 times to speed up the animation.
  for (int i = 0; i < 100; i++) {
    sortPixels();
  }

  img.updatePixels();

  image(img, 0, 0);

  // img.loadPixels();
  for (int i=0; i<1000; i++)
    sortPixels();
  // img.updatePixels();
}

void sortPixels() {
  int x;
  int y;

  color colorOne, colorTwo;

  float totalOne, totalTwo;

  // Get a random pixel.
  x = int(random(img.width));
  y = int(random(img.height - 1));

  // Get the color of the pixel.
  colorOne = img.get(x, y);

  // Get the color of the pixel below the first one.
  colorTwo = img.get(x, y + 1);

  // Get the total R+G+B of both colors.
  totalOne = red(colorOne) + green(colorOne) + blue(colorOne);
  totalTwo = red(colorTwo) + green(colorTwo) + blue(colorTwo);

  // If the first total is less than the second total, swap the pixels.
  // This causes darker colors to fall to the bottom,
  // and light pixels to rise to the top.
  if (totalOne < totalTwo) {
    img.set(x, y, colorTwo);
    img.set(x, y + 1, colorOne);
  }
}

```