Pixel Sort — Glitch Art from Any Photo
Generate pixel-sort glitch art in your browser. Sort rows or columns by luminance, hue, or channel, with adjustable threshold.
runs locally — nothing leaves your browser
What is Pixel Sort — Glitch Art from Any Photo?
Pixel Sort is a creative-coding technique that turns a photo into glitch art by sorting runs of pixels along each row or column by some key — usually luminance or hue. The signature look (smeared color streaks broken by sharp untouched regions) comes from sorting only the pixels above a threshold, leaving everything else untouched. Originally popularized by Kim Asendorf, pixel sort is now a staple of generative and glitch art.
When to use this
- →Generating album covers, posters, or social posts with a glitch-art aesthetic
- →Creating textures or background art for creative projects
- →Learning by example — comparing how luminance, hue, and channel-based sorts differ on the same image
How it works
For each row (or column, depending on direction), the algorithm walks pixels and identifies contiguous runs where the sort key exceeds the threshold. Each run is sorted in place by its key (and optionally reversed). The result writes back into a fresh ImageData buffer. The implementation runs on CPU because the variable-length run boundaries are inherently sequential per row; full-image sort completes in tens of milliseconds for typical web images.
Example use cases
Cover art
Apply a pixel-sort treatment to a photo to produce a striking, instantly-recognizable cover image.
Texture generation
Generate organic glitch textures from any source image for use in design or game art.
Generative experiments
Compare sort keys (hue vs. luminance vs. red) on the same photo to learn what each key emphasizes.
Pixel Sort — Glitch Art from Any Photo
Interactive ToolHow to use
- 1
Pick an image
Drop a JPG, PNG, or WebP.
- 2
Pick direction and key
Horizontal or vertical; sort by luminance, hue, or a single RGB channel.
- 3
Adjust threshold
Threshold decides which pixels qualify for sorting; sliders update live.
Why use this tool?
- Real-time pixel-sort glitch effect with five sort keys (luminance, hue, R, G, B)
- Horizontal and vertical modes
- Threshold and reverse controls let you tune the effect from subtle to extreme
- Export the result as a PNG; nothing is uploaded
Frequently asked questions
- Why does pixel sort look the way it does?
- Because only pixels above a threshold are sorted, you get smeared streaks where bright/dark regions get rearranged, and untouched islands where the threshold isn't crossed.
- Why is this in the WebGPU batch if it runs on CPU?
- The sort itself is inherently sequential per row, so CPU is the right tool. We bundle it with the WebGPU tools because it lives in the same 'image art' category and shares the same no-upload story.
- How big an image can it handle?
- Tested comfortably on 4K images. Very large captures may take a second or two; sliders feel snapper on web-resolution photos.
- Is my photo uploaded?
- No. Decoding, sorting, and PNG encoding all run in your browser.
Related tools
Real-time exposure, contrast, saturation, warmth, blur, sharpen, vignette, and grain. GPU-accelerated via WebGPU; nothing uploads.
Sobel edge detection in your browser, GPU-accelerated via WebGPU. Real-time preview, threshold and thickness controls, PNG export.
Invert, shift hue, adjust warmth, brightness, contrast, and saturation. Full-fidelity Canvas API processing — your images never leave your browser.
Popular right now
Format, validate, and minify JSON instantly in your browser. Your data never leaves your device.
Decode JWT tokens and inspect header and payload instantly in your browser. Your tokens never leave your device.
Count words, characters, sentences, and estimate reading time instantly in your browser. No sign-up required.