I came across this image-manipulating technique a few years ago and was immediately captivated by the unique look it can add to an image, such as a portrait photo.

After some research, I found that the technique is called pixel sorting. It uses sorting algorithms to rearrange the pixels in an image according to some criteria, such as brightness or saturation. When done right, it creates a slick glitch feel to the image.

Since the sorting algorithm is pretty basic if you know a bit of coding, I tried to implement it and did a fashion portrait project using this magic. I will share my process of how to use pixel sorting to make portrait photos more unique.

I also made a page here where you can have a go yourself.

Sorting algorithms are a set of instructions that take a list of numbers and arrange them into a particular order, descending or ascending.

For example, if you have a list [2, 3, 1, 5, 4], a sorting algorithm can automatically turn it into a list with some order, such as [1, 2, 3, 4, 5] (ascending).

You probably know that a digital photo is just a large grid of pixels, and each pixel has its own r, g, b values to represent its color. Thus, we can treat the pixel rows and columns as some kind of lists with numbers. And if we apply a similar type of algorithm, we can rearrange the position of pixels in a photo.

Since each pixel has r, g, b, three values, we can sort the pixels according to r, g, b values respectively. Or we can sort by brightness, hue, or saturation. Each is a blend of the r, g, b values.

Sorting direction tells the algorithm to sort the pixels either vertically or horizontally, i.e., if it is sorting the column pixels or row pixels. If we are sorting vertically, we can also decide if we want to reposition the sorted pixels on the top or bottom side of the image. For horizontal sorting, it will be left and right.

If we are sorting pixels by their brightness, the brightness values could range from 0 - 255 for 8-bit images. The two thresholds control the range of the sorting. Say we set the start threshold at 100 and the end at 200. The sorting algorithm will ignore the pixels that are darker than 100 brightness and brighter than 200 brightness, and only sort the range in between. It will put the lighter pixels at the beginning and the darker ones behind.

Note that you can also set the start threshold at 200 and the end at 100. It will sort the same range, but the order will be reversed!

These two parameters help to add more supervision to the image. The segments controller will divide each list (row or column) into a number of segments. This makes the sorting happen only in each segment. By default, the segments are divided into the same length, while the randomness controller will make the lengths more random as we increase the value.

Visually, these two help to create more "layers" of the sorting effect.

Here's a fashion portrait I shot for my portfolio many years ago. The model is young and good-looking, the lighting is a very soft Rembrandt style, and apart from these, there's not much more you can say about this image. It's a rather dull photo.

To spice it up, I applied the pixel sorting trick to it. I played with the parameters a bit to see what kind of effect it would have on this particular image.

Eventually, I ended up with an image (Figure 4.) I felt I could further develop. You can still recognize a distorted face, and the body/chest part is not altered much. My goal was to have some pixel sorting effect going on, but the face and garment are mostly preserved.

So, I put the altered image on top of the original image, picked a slice of the area that I thought might make the portrait more interesting, and only showed this slice of the altered image.

I felt I could probably add a bit more effect to the background, so I selected the background of the original image and unmasked this part on the altered image layer. After some subtle retouching, here we have the final image and some more from the project.