Pixel Sort: How Glitch Art Became an Algorithm

In 2010, German artist Kim Asendorf published a Processing sketch that rearranged the pixels of a photograph in horizontal streaks. The result didn't look like any traditional image filter. It looked like a memory error rendered as art — sharp untouched regions of the original photo, broken by smeared color streaks that maintained the original's tones but lost its structure.

The technique is pixel sort. The algorithm is two lines of pseudocode. The visual signature comes from one design choice. This post unpacks what pixel sort is doing, why the result looks the way it does, and what the different sort keys produce on the same input.

The Algorithm

Pixel sort, at its core:

for each row of the image:
  walk the row from left to right
  identify runs of contiguous pixels whose <key> exceeds <threshold>
  sort each run in place by <key>

That's the whole algorithm. The output is the same image with some pixels rearranged within their original rows. No pixel value changes; no pixel moves between rows; the histogram is identical to the input. Yet the result looks dramatically different.

Three parameters control the output:

• Direction. Horizontal (sort within rows) or vertical (sort within columns).
• Sort key. What aspect of each pixel to sort by — luminance, hue, red, green, blue.
• Threshold. The cutoff that decides which pixels are eligible to participate in a sorted run.

The threshold is where the magic happens.

Why Threshold Produces Streaks

If you sort every pixel in a row, the row becomes a smooth gradient from dark to light — no detail, no structure, just a gradient. Run this on the whole image and you get a series of horizontal gradient bands. Boring.

Pixel sort isn't that. It sorts runs: contiguous stretches of pixels that all exceed the threshold. A bright region of the image (above threshold) gets sorted; a dark region (below threshold) is left untouched. The transitions between sorted and untouched regions appear as sharp visual breaks. The sorted regions appear as smooth streaks because their pixels are now in order.

The result is the signature look: smeared color streaks (the sorted runs) interrupted by sharp untouched regions (the original image, where the threshold wasn't crossed). The interruptions preserve enough of the original structure that the viewer can still tell what the image was. The streaks add the glitch character.

Pick a low threshold and most pixels qualify — the image becomes mostly streaks with small untouched islands. Pick a high threshold and most pixels don't qualify — the image looks mostly untouched with occasional thin streaks. Tuning the threshold tunes the intensity of the effect.

Sort Keys: Five Different Effects

Different keys produce visually distinct results on the same image.

Luminance. Sort by perceived brightness (Y = 0.2126R + 0.7152G + 0.0722B). Streaks go from dark to light smoothly. This is the default and produces the cleanest, most "photographic" streaks.

Hue. Sort by position on the color wheel. Streaks transition through the spectrum — red, orange, yellow, green, blue, magenta. Visually striking but less natural; produces rainbow-banded streaks that read as more aggressively artificial.

Red, Green, Blue. Sort by a single channel. Streaks emphasize the relationship of that channel to overall brightness. Sorting by red on a sunset photo produces dramatically warm streaks; sorting by blue on the same image produces cooler ones. Useful when you want to bias the effect toward a color.

The choice of key is creative, not technical. Pixel sort is one of the few image effects where the parameter changes the character of the result, not just its intensity. Different keys make different images out of the same source.

Direction: Horizontal vs. Vertical

Horizontal sorting is the canonical Asendorf style. It works because most photographs have stronger horizontal structure than vertical (horizons, ground planes, faces). Sorting along the strong axis preserves the most recognizable structure while creating streaks across the weaker axis.

Vertical sorting flips this. Sorting along the weaker axis breaks more of the recognizable structure but produces longer, more cohesive streaks. The result is more abstract and less photographic.

Some artists use both — vertical pass then horizontal pass — to produce a "blocky" disintegration effect where the image becomes a quilt of colored rectangles. This composes well but loses almost all of the original content.

For a single pass, horizontal on a landscape and vertical on a portrait are reasonable defaults.

Why It's a Sequential Algorithm

Pixel sort doesn't parallelize well. The reason is the run-detection step: walking a row, you don't know where a run ends until you find a pixel below the threshold. Each row's runs depend on the previous pixel in that row. You can parallelize across rows (each row is independent of every other row), but within a row the work is sequential.

This is why pixel sort runs on CPU rather than GPU even when it's bundled with WebGPU tools. The variable-length-run problem doesn't fit the GPU's fixed-throughput parallel model. A GPU implementation is possible (using scan primitives) but adds complexity for marginal speedup; the CPU implementation is fast enough for interactive use on web-resolution images.

The Utilora Pixel Sort tool is therefore CPU-based despite being grouped with the WebGPU image batch. The grouping is editorial (shared "image art" category) rather than technical.

Performance

A web-resolution image (say, 1920×1080) has about 2 million pixels. The sort is O(n log n) per row; the run-detection is O(n). For 1080 rows of 1920 pixels, the work is small enough to complete in tens of milliseconds.

4K images (3840×2160, ~8 million pixels) take a few hundred milliseconds — fast enough that the user feels a small pause but doesn't lose interactivity. Larger captures (16K, panoramic stitches) can take a few seconds; this is the regime where you'd want to consider GPU implementation.

In practice, most pixel-sort use cases — album art, social posts, posters, textures — sit comfortably in the web-resolution range. The CPU sort is the right tool for the size.

Combining With Other Effects

Pixel sort composes naturally with other image operations:

Before pixel sort. Boost saturation and contrast before sorting. The streaks become more vivid because the sort key range expands. Apply a slight blur before sorting to make the runs longer and the streaks smoother.

After pixel sort. Apply a film-grain or noise pass to break the smoothness of the streaks. Add a vignette to focus attention. Apply a slight color tint to unify the streaks visually.

The Filter Studio covers the pre- and post-sort effects. The two tools together let you build a complete glitch-art pipeline: tune exposure and contrast in Filter Studio, pixel-sort the result, finish with grain and vignette back in Filter Studio.

A Brief History

Pixel sort is one of the youngest established generative-art techniques. The timeline:

• 2010, Kim Asendorf. First Processing sketch publishing the technique. The original code sorted by luminance with a threshold; the visual style became instantly recognizable.
• 2012–2014. The technique spread through Processing, openFrameworks, and Python ecosystems. Variants appeared: angled sorts, mask-controlled sorts, animated sorts that change threshold over time.
• 2016, ASDF Pixel Sort (Java). Cross-platform desktop tool that brought pixel sort to artists without coding experience.
• 2018 onward. Web implementations (in p5.js, then in Canvas, now in WebGPU-adjacent JavaScript) put the technique in the browser. The barrier to trying it dropped from "install Processing" to "open a tab".

The technique is unusual for staying so close to its original algorithmic form. Most generative-art techniques evolve heavily after their initial publication. Pixel sort has been refined (different keys, masks, anti-aliasing of run boundaries) but the core sketch is still recognizable.

Practical Tips

A few things that consistently produce good pixel-sort output:

1. Start with a high-contrast source. Photos with strong tonal range produce more dramatic streaks. Flat, even-lit images produce subtle results.
2. Crop tight. Wide landscapes have too much variation; tighter crops produce more cohesive streaks.
3. Try multiple sort keys on the same image. The keys behave so differently that exploration is part of the workflow.
4. Find the threshold by sweeping. A live slider is essential — you can't predict the right threshold from the image content. Most images have a sweet spot you'll only find by dragging.
5. Reverse for a different look. Reversed sort (high to low instead of low to high) flips the visual direction of the streaks. On hue-sorted images this changes the color flow direction; on luminance it changes whether streaks point toward bright or dark.
6. Combine direction passes carefully. A vertical-then-horizontal pass produces strong abstraction; a horizontal-then-vertical pass produces a different aesthetic. The order matters because the second pass operates on the first pass's output.

When Pixel Sort Is the Wrong Tool

A few times pixel sort isn't what you want:

• Photo retouching. Pixel sort is destructive in the structural sense — the result is recognizably not the original photo. If you want corrections that preserve identity, use levels and curves.
• Print at large sizes. The streaks read well on screen but can look pixelated when printed at large sizes. Either sort at higher resolution (and accept longer runtime) or apply at smaller output sizes.
• Subtle stylization. Pixel sort doesn't do subtle. The minimum-perceptible effect already shifts the image visibly. For gentle stylization, look at color grading and grain effects instead.

Conclusion

Pixel sort is one of the cleanest examples of generative art coming from a single algorithmic insight. The technique is two lines of pseudocode. The aesthetic is fifteen years of artists using those two lines in different combinations on different images. Both the algorithm and the look continue to feel fresh because they're so specific — there's nothing else in image processing that produces the same character.

For practical work, try the Utilora Pixel Sort tool when you want cover art, textures, or a quick aesthetic break from photorealism. Pair it with Filter Studio for pre- and post-finishing, and Color Transform for the simpler color adjustments that don't need WebGPU. Everything runs in your browser. Nothing uploads.