Pixel Sorter / Glitch Art Generator - Pixel Sorting Online

How to use this tool

1. Click "Choose Image" and upload a photo.
2. Select the Sort Axis, Sort By property, and Threshold.
3. Click "Apply Pixel Sort" to generate the glitch effect.
4. Click "Download PNG" to save the result.

How pixel sorting works

Each row (or column) is scanned for runs of "bright" pixels - those above the threshold. Pixels within each run are sorted by the selected property (brightness, hue, or color channel) while dark pixels remain in place, acting as natural separators. The result is the characteristic streaked, glitchy aesthetic used in digital art.

Creative tips

• Start with a low threshold (0–40) for dramatic full-image sorting.
• Use a high threshold (150–220) to sort only bright highlights.
• Try vertical sorting on portrait photos for unusual effects.
• Sorting by Hue creates rainbow-streaked patterns.

Privacy

All processing runs on an HTML5 canvas in your browser. Your image is never uploaded.

Pixel sorting in digital art

Pixel sorting was popularized as an art technique by Kim Asendorf, whose 2010 open-source Processing sketch ASDF Pixel Sort went viral and inspired thousands of artists. The technique is associated with the "glitch art" movement - using artifacts, errors, and unintended behaviors of digital systems as aesthetic elements.

Glitch aesthetics draw on a tradition going back to corrupted floppy disks, VHS tracking errors, and data compression artifacts, all of which produce visual distortions that are simultaneously familiar and uncanny.

Sort modes explained

• Brightness: pixels in each run are sorted from darkest to brightest (or reverse). The most common mode; creates smooth gradients within each sorted band.
• Hue: pixels sorted by their position on the color wheel (0–360°). Creates rainbow-gradient streaks rather than light-to-dark gradients.
• Saturation: sorts by color purity. Grays and pastels sort to one end; vibrant colors to the other.
• Red / Green / Blue channel: sorts by a single color component, producing color-shifted banding effects.

Threshold explained

The threshold determines which pixels are part of a "sortable run" vs. which act as fixed boundaries. Pixels with brightness below the threshold are treated as dark anchors that break up the sort runs. Lower threshold -> fewer anchors -> longer runs -> more dramatic sorting. Higher threshold -> many anchors -> shorter runs -> subtle sorting confined to highlights.