Pixel Sorter with Processing (lighter pixels rise)

Processing Coding Questions
1

Hi there!

I am trying to use this tutorial 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!

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);
  }
}
2

You changed the example from the tutorial which is unfortunate.

For example you call sort function only once in draw

3

And in draw you forgot loadPixels and

img.updatePixels();

(EDIT: not necessary!!!)

Check out the code in the tutorial

4

Also, you can leave the brackets empty

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

so you declare them in the function :

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)


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);
  }
}
1 Like
5

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

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);
  }
}
1 Like