Glitch-art pixel sorting run live on painted photos, at any angle.
Three 'photographs' are painted in code (a dusk coast, a neon city, an aurora over a lake) and then cut into parallel digital lines running in the sort direction, built by shearing so every pixel lands on exactly one line at any angle. A brightness threshold band picks out intervals along each line, and only those runs are sorted, by brightness, hue or saturation, which is why skies melt into streaks while silhouettes stay sharp. The animation is a real binary insertion sort running on every interval at once: the sorted part grows in the flow direction with its brightest pixel riding the front like a rising wave. While you drag, a stable counting sort per interval re-sorts the whole picture every frame.
Try it. Drag on the picture to set the direction pixels flow. Drag the handles on the histogram to move the threshold band (the sorted intervals light up while you do). Use the buttons to switch scenes, sort key and mask, or replay the animated sort; keys 1 to 3, K, I, the arrows and Space do the same.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a pixel sorting glitch-art tool with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Paint a "photo" in code on a 480x300 offscreen canvas: a sunset sky gradient, a bright sun, a few soft clouds, dark mountain silhouettes and a sea below. Read it back with getImageData.
- For every column of pixels, walk from top to bottom and find intervals: runs of consecutive pixels whose brightness is between a low and a high threshold (start with 70 and 255).
- Sort only the pixels inside each interval by brightness, so the bright end of each run lands at the top, and write the result back. Show the sorted image scaled up to fill the window with image smoothing turned off.
Once that works, make it beautiful:
- Animate the sort instead of jumping to the end: run an insertion sort on every interval at once, inserting a few pixels per frame, so you can watch the streaks grow.
- Draw a brightness histogram with two draggable handles for the thresholds, and tint the intervals that will sort while I drag.
- Add buttons to sort by hue or saturation instead of brightness, to sort rows instead of columns, and to reverse the direction.
- Re-sort instantly while I drag a handle, with a counting sort per interval (keys are 0 to 255, so it is linear time).
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as sorting along lines at any angle, masking intervals by edges instead of brightness, or loading my own photo from a file input.
