Pixel Sorter

This is an interface to create glitch art with pixel sorting.

How Does It Work?

Pixel sorting re-orders the pixels in a row (or a column) accoding to some parameter. For example, you might sort the pixels in a row based on how red they are.

This gets cool when you use thresholds. You might set a threshold to only sort pixels that are somewhat light -- this will ignore pixels that are too light or too dark. This creates natural intervals within a row: a block of pixels within the threshold will be sorted, blocks of pixels outside the threshold will interrupt the sorting. This can create beautiful effects.

You can take this further by masking. This will set an area for the sorting to ignore, and can bring focus to a scene.

Try different modes and different thresholds. Sensible defaults have been chosen. Have fun!

Shout Outs

Original script by Kim Asendorf.

Shout outs to Satyarth for their great explanation.

Web worker usage inspired by Butter.js.

Project requested by Peter Sanfilippo.

If you've created great art with Pixel Sorter, message me and I'll link it in the showcase!

Pixel Sorter will always be free. All code is executed in your browser, so there are no server costs to pay. If you enjoy Pixel Sorter, you can leave a tip here: