Diagonal Sorting
While experimenting with ways to I created the Triangle Pattern Glitch Sort. This method sorts the pixels in a diagonal pattern.
The technique,
the diagonal sort creates a glitch effect by calculating each pixel's position along diagonal lines in the image. It works by adding a pixel's x and y coordinates together and using modulo 16 ((x + y) % 16) to create 16 repeating diagonal bands across the image. When sorting, pixels are grouped based on their diagonal band value (0-15), which causes pixels with the same diagonal position to cluster together. The quicksort algorithm then rearranges all pixels based on these diagonal values, quick you might miss it. If you want to create your own diagonal sort, you can do so by clicking the "Triangle Pattern Glitch Sort" option in the dropdown menu on the art maker at the bottom of the page.
The photos used above was notably taken at an unoffical SXSW bridge party in Austin in 2022
Going in Circles
While exploring circular patterns, I developed two distinct sorting methods that create circular effects: the Spiral Pattern Sort and the Rings Glitch Sort.
Spiral Pattern Sort
The Spiral Pattern Sort creates a hypnotic spiral effect by combining the angle and distance of each pixel from the center of the image. It works by calculating each pixel's angular position (using Math.atan2) and its distance from the center, then combining these values with a modulo operation ((angle * 10 + distance / 10) % 50) to create repeating spiral bands. When sorted, pixels with similar spiral positions cluster together, creating a swirling, vortex-like pattern that radiates from the center of the image.
Rings Glitch Sort
The Rings Glitch Sort (labeled as "concentric" in the code) creates a series of concentric circular bands by calculating each pixel's distance from the center of the image and using modulo 30 to create repeating rings. This sorting method groups pixels that are equidistant from the center, resulting in a series of circular bands that ripple outward from the image's center. The effect is reminiscent of sound waves or ripples in water, frozen in digital form.
Sometimes gravity becomes to much and we spiral into the abyss. Try to hide there, cover it up. We might build high castles in that abyss. The weeds may find a way to grow though. The graffiti on the wall, tho it may of been made with a sharpie will remain a reminder, but your be okay. Keep building castles.
Repeating Dimensions Fall into Static
Fractals are one of the most beautiful mathematical structures. An infinity of shape, reaching as deep as the light wants to go.
Can we create order from chaos by sorting it?
This sorting algorithm transforms your image by mapping each pixel to the Mandelbrot set's escape-time values. It works by treating each pixel's position as a point in the complex plane (scaled to the region [-2, 1] × [-1.5, 1.5]), then calculating how quickly that point's orbit escapes the Mandelbrot set's boundary. The algorithm iterates the function f(z) = z² + c up to 100 times for each pixel, tracking how many iterations it takes for the value to escape. When sorted, pixels cluster together based on their escape-time values, creating intricate fractal-like patterns that echo the visual complexity of the Mandelbrot set itself. Unfortunately, there are only so many pixels in a png so we can only go so deep.r
Order
The following are more examples of the basic sorting methods and the abstract gradients that they muster. All but one of the photos taken by me, can you guess which one?
