Fragments Early Access — Pixel Sorting
Week two of early access is in the books with the debut of probably the most advanced technique so far in Fragments - Pixel Sorting!
Early access is going great!
Not to sound like a broken record, but I'm really happy with how early access is going. It's given me a great opportunity to connect with so many amazing people, learn how they're feeling about Fragments, and to make sure what I'm making is something you enjoy and find useful.
This whole things has been a total blast, so I'm really happy you're all along for the ride! Let's get to it!
The Pixel Sorting technique
The next big technique breakdown is all about Pixel Sorting, and it's turned out to be probably the biggest, and maybe most advanced technique I've made. Pixel sorting is a technique that allows you to reorder pixels in an image based on their properties to create interesting visual effects.
I wasn't really familiar with it until I had a crack at it in Genuary 2025 with kind of terrible results. I mean, I really like how that sketch turned out, but it certainly wasn't pixel sorting.
These sorts of glitchy, cyber-punky, almost disturbing effects are what pixel sorting is all about, and the more I learned about it, the more I wanted to create something that was a bit more accessible that could be used to create these sorts of things:
The result here is a component that can be extended and modified to create a whole variety of different pixel sorting effects. The idea here is that you can use this component and pass in different validator
and sorting
functions to achieve almost anything you'd like to.
Similar to the Flow Field technique, this very heavily leverages the power of compute shaders
to process the pixels, as well as a technique called ping ponging
to actually sort the pixels themselves.
There have been a few wrinkles here, though. The biggest being that due to some TSL compatibility issues (namely textureLoad
not being supported), I've needed to implement this component using WGSL
instead of straight TSL
.
It means that the code itself is probably a fair bit more complex than other things in Fragments, but it's a necessary evil to get this working. I've done my best to explain everything, and I will refactor the component when things mature a bit more - but for now, this technique can pretty safely be put in the advanced difficulty
category.
The Shift series
From this exploration, I've created the Shift series of sketches that explore using pixel sorting on a variety of different images and inputs, layering in aspects of Noise and Domain Repetition to create beautiful, and sometimes alien pieces of art
The next technique
To round out early access - the final technique I've been working on is all about Mesh Gradients
. I've been obsessed with this stuff for as long as I knew they were a thing which. I've made a whole bunch of different versions of this technique over the years using vertex colors
, or blurred and distorted shapes
, or even just using noise
.
There are so many different ways you can achieve an interesting result here, there's no real one size fits all approach to it.
For this technique, I get into the fundamentals of what I think makes a great mesh gradient shader. It's a fun topic that uses a lot of different techniques and concepts we've covered in Fragments so far, and I think the results are spectacular. This one will be out next Wednesday!
What lies beyond techniques?
Once this technique is out, I'll be working on rounding out the collection with more utilities, and some sketches that have been on the backburner for a while.
Along with that, I'll be doing some more work on the website, making sure everything is working as expected, improving the documentation, adding some other things like a technique progression
to give an idea of how difficult the different techniques are, and how I think you can progress through them.
Beyond early access, I'll be taking a little break, but I have plans for new sections and content to come. I'm currently thinking about the following things:
Interactivity
- Making your sketches and work interactive and more dynamicAudio Reactivity
- Implementing elements that react to sound and music (I love this sort of thing)Volumetric Raymarching
- I've been wanting to dive deep into this for a while, it's something that people like XorDev have been doing a lot of with absolutely spectacular results
Sharing insights
Over the last couple of weeks, I've been sharing more utilities and insights over on my X account. I've found that to be a really great way to share little micro-posts of things that I think people will find useful, or interesting.
I'd love it if you could give it a follow, or the posts a like or a repost if you've found them useful as well - it really helps to get the word out about Fragments. I'd really appreciate it!