Loading...
Logo
Processing Forum
Programming Questions
overmindf
overmindf

"Pixel Sorting"

in Programming Questions  •  2 years ago  
Hello everyone,

I'm incredibly intrigued by the techniques that the artist Kim Asendorf has employed in the creation of his stunning collection of works, entitled "Mountain Tour." They can be seen at his website, http://kimasendorf.com/images/mountain-tour/

I've scoured the internet and Processing resources attempting to find a way to achieve a similar effect. Everything I've found is either out-dated and obsolete, rendering it irreclaimable and unusable on account of my sub-par programming knowledge, or simply faulty. The programs that I've actually managed to run have simply returned with nothing - either the code is runnable but still faulty, or the code is achieving an effect that isn't similar to that of Kim Asendorf's.

Pasted below is what I am currently experimenting with. I'm extremely new to Processing and only capable of producing very simple programs/functions without consulting external resources. I recall locating the majority of the below code on a website a few weeks ago, and I'm unable to remember where I found it, or get the program to work. Does it actually achieve a similar effect to that of Kim Asendorf's when functional? I get the feeling I'm missing the actual meat of the program.

Any assistance would be greatly appreciated, be it in the form of explanation, confirmation, or programming. If someone could point me in the right direction, you would make my day week month! I am absolutely transfixed on this incredible technique!

Copy code
  1. PImage img;
    void setup() {
      size(750, 500);
      img=loadImage("darker branches.jpg");
    }
    void draw() {
      image(img, 0, 0);
      int P = int [2+K=+1];}
      for (int v= 1; v <= h-2; v++);
      for (int u = 1 ; u <= w-2; u++);
      for (int j = -1; j <= 1; j++)
        for (int j = -1; i <= 1; j++)
          P[k] = copy.getPixel(u+i, v+j);
      k++;
      Array.sort(P);
      orig.putPixel(u, v, P[K]);
    }

Replies(7)

tfguy44
tfguy44

Re: "Pixel Sorting"

2 years ago
Copy code
  1. PImage img;

  3. void setup() {
  4.   size(750, 500);
  5.   img=loadImage("darker branches.jpg");
  6. }

  8. void draw() {
  9.   image(img, 0, 0);
  10.   // Is this next line trying to define a single int, or an array of them?
  11.   int P = int [2+K=+1];
  12.   // Why is there a =+ operation in the array(?) size?
  13. } // draw() ends here!

  15. // The rest of this code is never called!

  17. // This for() does nothing, as it ends in a semicolon.
  18. for (int v= 1; v <= h-2; v++);
  19. // This for() does nothing, as it ends in a semicolon.
  20. for (int u = 1 ; u <= w-2; u++);

  22. // These for()s overwrite the same pixel over and over again.
  23. // To apply a for() to a block of code, use braces: {}
  24. for (int j = -1; j <= 1; j++)
  25.   for (int j = -1; i <= 1; j++) // You're r-defining and re-using the variable j. Don't.
  26.     // P is not a properly defined array, nor is it valid at this scope.
  27.     P[k] = copy.getPixel(u+i, v+j);

  29. // This looked fine to me until I realized that you've not defined a variable k anywhere!
  30. k++;
  31. // I'm not sure about this next line either.
  32. Array.sort(P);

  34. // What's orig? You've not defined that anywhere. Or P. Or K.
  35. orig.putPixel(u, v, P[K]);

  37. // This is a syntax error - there is no matching { for this to close.
  38. }
overmindf
overmindf

Re: Re: "Pixel Sorting"

2 years ago
Thanks for the insight! Every mistake I've made seems so stupid now.
tfguy44
tfguy44

Re: "Pixel Sorting"

2 years ago
What follows isn't exactly what you want, but it does do some kind of pixel sorting, at least. It picks which pixels to sort at random. It's a nice effect.

Copy code
  1. PImage img;

  3. void setup() {
  4.   size(480, 320);
  5.   img=loadImage("http://ed101.bu.edu/StudentDoc/current/ED101fa10/hillaryw/Images/mountain_landscape.jpg");
  6.   image(img, 0, 0);
  7. }

  9. void draw() {
  10.   int i;
  11.   int j;
  12.   color c;
  13.   loadPixels();
  14.   for (int w=0; w<500; w++) {
  15.     i = int(random(pixels.length));
  16.     j = int(random(i, pixels.length));
  17.     if ( j<pixels.length && i<pixels.length && pixels[i] > pixels[j] ) {
  18.       c = pixels[i];
  19.       pixels[i] = pixels[j];
  20.       pixels[j] = c;
  21.     }
  22.   }
  23.   updatePixels();
  24. }
overmindf
overmindf

Re: Re: "Pixel Sorting"

2 years ago
That's actually really groovy! It really makes me wonder how Asendorf managed to retain the original image throughout the transformation, whilst keeping a cool glitch-y effect, though. I'm going to experiment with this for a bit in order to familiarize myself a bit more, thanks! :-)

In the mean time, my quest for Asendorf-esque sorting continues. Do you have any idea how he could have possibly achieved it? They all seem so crisp and clean, yet chaotic... almost post-Processing-like. I thought it may involve sampling random sections/pixel clusters according to colour and then drawing -that- colour to another colour/area on the image, but I've no idea how I'd even start writing something as complicated as that which is actually functional. Meh, what do I know?

I might shoot him an email querying just how it works.
amnon.owed
amnon.owed

Re: "Pixel Sorting"

2 years ago
Kim's work is really a great inspiration for these types of artworks. Pixel sorting has been on my to-do-list as well.

My intention was to use the color library of Toxiclibs, which has many options, including sorting. But I haven't done it yet. I will at some point certainly be looking into this. I've worked with pixel arrays a lot, but not yet with sorting them. I guess if you are just starting with Processing, then you should check out this page and try to alter the code there.

With regard to your question how Kim does it, we can only guess. There are probably many different parameters. But in general I think the color sorting is controlled by things like the brightness of the pixels, the contours of the image (lines where there are major color changes) and/or by the amount of color difference of an area. It seems to me that that there is more color sorting on lighter and 'equal color areas' and less color sorting on areas with a lot of color changes. And the sorting seems horizontally and vertically oriented if you know what I mean. So there are probably at least two sequential operations. And he's allowing some noise/deviation/chaos here and there. But that's pure guessing.

Anyway, the great thing about Processing is that it's pretty easy to experiment and small changes can lead to very unexpected results.
kooogy
kooogy

Re: "Pixel Sorting"

2 years ago
there's an animated gif here (scroll down)

http://www.flickr.com/photos/kimasendorf/4850644061/in/set-72157624625319366/

but i'm not sure that makes it clearer or more confusing 8)

but yes, some threshold going on


aferriss
aferriss

Re: "Pixel Sorting"

2 years ago
Forgive me for I'm not exactly a brilliant coder but I've come up with something that can get you close or move you in the right direction.  I've been working on this for a few months now, this is a little bit of what I've managed to come up with. Apologies in advance, it may not be the most efficient code.
Copy code
  2. PImage img;

  4. void setup() {
  5.   img = loadImage("image.jpeg"); //change this to whatever the file name of your image is
  6.   size(img.width,img.height);
  7. }

  9. void draw() {
  10.   background(255);
  11.   loadPixels();  
  12.   for (int y = 0; y<height; y+=1 ) {
  13.     for (int x = 0; x<width; x+=1) {
  14.       int loc = x + y*img.width;
  15.       float r = red (img.pixels[loc]);
  16.       float g = green (img.pixels[loc]);
  17.       float b = blue (img.pixels[loc]);
  18.       float av = ((r+g+b)/3.0);

  20.     pushMatrix();
  21.     translate(x,y);
  22.       stroke(r,g,b);
  23.       if (r > 100 && r < 255) {
  24.         line(0,0,(av-255)/3,0); //change these values to alter the length. The closer to 0 the longer the lines. 
  25.        // you can also try different shapes or even bezier curves instead of line();
  26.       }
  27.     popMatrix(); 
  28.       
  29.     }
  30.   }
  31. println("done");
  32. noLoop();
  33. }
As I understand it, you calculate your pixel locations with the for loops. Then you figure out the color of the pixels and use the the if statement to filter out certain color ranges. You turn the pixels into lines and their length is changed based on the number value calculated from their color. 

Let me know if you have any questions, good luck!

I also noticed that the wind filter in CS5 will give a somewhat similar effect, albeit with less control. 

I would second getting in touch with him. My correspondences with him in the past have always been very pleasant. 
Top Reply

Statistics

  • 7 Replies
  • 9950  Views
  • 1 Followers

Actions

Related Posts