Pixel sorting is the coolest thing you’ve never tried

First, you need an image. Any image that you think will yield an interesting result. This is entirely subjective, so I don’t want to guide you too much as to what I personally think works best. One of the nicest things about pixel sorting is how varied the results can be.

I will say, however, that I like using Flickr’s The Commons to source images. Not the Creative Commons search they have, but the one that’s just called The Commons, made up of museums and public archives. It’s full of high quality images with no known copyright restrictions.

Here’s one I found on NASA’s photo stream. It’s what I used to generate the header image above.

After you’ve settled on an image you want to use, download a program called Processing. It’s free and open source. Version 3.2.3 (the latest version as I write this) should work perfectly.

The next thing you want is ASDFPixelSort from Github. This is the specific bit of code that Processing will use to sort your image. It was written by Kim Asendorf in 2010, but he’s recently updated it to work with the latest release.

When you first open the code “ASDFPixelSort.pde,” you should see the following message in Processing, telling you that you need to create a folder:

Go ahead and click ok. You’ll now have a directory that you can place the image you selected earlier into.

Now, when you look at the code in Processing you should see this pretty much right at the top:

/*sorting modes0 = black1 = brightness2 = white*/int mode = 1;

If you don’t know much about code, don’t worry! This is actually incredibly easy. Sorting modes are the controls you’ll use to specify the level of sorting you want to achieve.

If you’d like to know more about what the ASDFPixelSort code does to your image, there’s a more in-depth tutorial on pixel sorting, here. I’d suggest reading it if you want to get more into sorting.

For now, I’m going to keep things relatively short and just describe the few steps you need to take in order to produce your first sorts.

First, you’ll need to specify the filename and file type of the image you’ve selected. You do so here:

String imgFileName = "MyImage";String fileType = "png";

For my example, “MyImage” becomes “red_planet” (the name of my file that you saw a few paragraphs ago). I’ll also need to replace “png” with my filetype, which is “jpg.”

For the first sort, we’ll keep the sorting mode set to “int mode = 1;” (the default value). Let’s go ahead and press “Run.”

You just pixel sorted!

You should have seen Processing open up what looks like a stretched and distorted version of your file in a new window. And you should also now have a brand new file in your folder. Take a look!

Behold, your first pixel sort.

Pretty cool, huh?

Let’s see what changing the “int mode” to one of the other values gives us. Set “int mode = 0;” and press run.

One of my favorite things about pixel sorting is that because the image is being glitched to all hell, you don’t really have to worry about image quality. You can zoom way in and nothing really looks pixelated because, well, the pixels themselves have been rearranged into a new order.

It’s a great method for producing interesting patterns and backgrounds to use in other projects. By simply taking the result of “red_planet_0,” rotating it a bit, and cropping, for instance, I can produce something that feels entirely different:

Each pixel sort produces a unique image, and the look and feel you achieve is in large part due to the source material you choose.

Running my red_planet image with an “int mode” of 2, for example, creates even more of a sci-fi vibe. Like a planet that’s just been hit by solar radiation. You can almost hear it crumbling.

The space for experimentation with this process is enormous. It unlocks a lot of imagination. If you know a bit of code or don’t mind hunting around for other people’s open-sorced work, you can easily expand on what I’ve shown you and push pixels even further.

You’ll start to see images around the web in a whole new light, as a sort of raw material you can tap into to create something entirely new. Like the game Monster Rancher (for all the kids out there, this was a game in the 90s where you discovered Pokémon-like monsters by putting in random CDs), you never know what you’ll get until you put an image in and try.

I’d love to see what you make! Get sortin’ and tweet me what you come up with. Bonus points for whoever sorts an image from Monster Rancher! ;)