Editor’s note: Today we’re highlighting Fragmentsa project by Ben McCormick that helps creatives learn and experiment with shaders. We love showcasing work from the community, so if you’re building something you’d like to share, please contact us. We would like to show it!
Hello everyone! I’m Ben, a design engineer, creative coder and shader artist based in Perth, Western Australia. Last year I discovered something that completely changed the way I approach creative coding, and I built Snippets to share it.
How it all started
When I was in my twenties, a long time ago, I had a brainwave about building an audio visualization tool. Think of something like the MilkDrop plugins for Winamp (which may display my age). I was obsessed with the idea, but I had no idea how to actually make it.
That’s when I first learned about graphical programming and shaders, and I developed a lifelong passion for it.
I spent years trying to learn how they worked, with varying degrees of success – and mostly failure. They can be incredibly difficult to write, especially if you don’t know what you’re doing. I persevered in the struggle and eventually started to get the hang of it.
I could make a lot of cool things, and I knew roughly how they worked, but then I faced another problem: I was struggling to find the right way to translate the mechanical parts of what I had learned into the amazing, creative things I had wanted to make all those years ago.
There was a piece missing in the whole process, a kind of mental block. I had to find something that could help me figure out this creative coding thing.
The light bulb moment
Feeling a bit lost, I decided to try something different, and late last year I took part in the Genuary 2025 challenge. I had never done anything like this before; I always thought it would be too much, but I really just wanted to see if I could do it. It started off a bit rough.
My first attempt was a disaster. I tried to create an interesting pattern and combine it with fluid movement, but I ended up with a static, lifeless pattern triangle. It was uninspired and boring.
I honestly felt like I had failed. This is usually the point where projects come to an abrupt halt and I decide to put things aside and move on to something else, but this time, for whatever reason, I just kept going – and things changed almost immediately.
With each prompt I tried, I just started playing with the code: changing variables, using values ​​as inputs to other variables, and looping things in a different way than before. It just started clicking.
On day 11 I experimented with a visualization inspired by Sunday’s work, something I always wanted to make but never had the confidence to try.
It was a complete breakthrough. I finally created the kind of things I’d always wanted and really started to explore the possibilities of space. Having a new assignment to focus on every day kept me consistent, kept me engaged, and helped me discover my own process.
For me it was a game changer, and I believe it can be for others too. I wanted to take that inspiration further and share it, and so Fragments was born.
A platform for creative coding
After Genuary, I realized I had stumbled upon something important: a way to bridge the gap between learning shader basics and actually creating original work. I started documenting everything: the techniques that worked, the tools I kept reaching for, and the sketches that taught me something new.
Fragments became the platform I wished I had when I started, not just another course but a collection of creative strategies and building blocks.
It’s a culmination of everything I’ve learned, experimented and researched, a reflection of my own journey.
What makes it different
Instead of another basic course, I wanted to build something different: a guide to creative coding techniques with deep experimentation strategies. This is what you will find:
10 creative coding techniques
Like building Flow fields using millions of particles to create stunning, organic patterns; the Raymarching technique that allowed me to build impossible 3D shapes in 2D space; or the Pixel sorting technique that allowed me to create beautiful, otherworldly patterns from static images.
15+ utilities
A collection of tools to streamline your TSL workflow with copy-paste implementations. From noise functions to SDFs and procedural color palettes – a lot of really useful stuff.
120+ sketches
Complete with commented source code for every artwork I’ve written, with an overview of what I think makes them interesting. Find out what’s behind the artwork, then take what’s there and remix it to make it your own!
export const dawn1 = Fn(() => {
// Get aspect-corrected UVs for the screen
const _uv = screenAspectUV(screenSize).toVar()
const uv0 = screenAspectUV(screenSize).toVar()
// Color accumulator
const finalColor = vec3(0.0).toVar()
// Palette setup
const a = vec3(0.5, 0.5, 0.5)
const b = vec3(0.5, 0.5, 0.5)
const c = vec3(1.0, 1.0, 0.5)
const d = vec3(0.8, 0.9, 0.3)
// Animated vertical gradient using cosine palette
const col = cosinePalette(uv0.y.add(0.5).add(time.mul(0.01)), a, b, c, d)
// Repeated sawtooth pattern in Y, softened
const repeatedPattern = fract(_uv.y.mul(24)).mul(0.3)
// Add pattern to color, boost with pow for punch
finalColor.assign(col.add(pow(repeatedPattern, 2.0)))
// Add grain for texture
const _grain = grainTextureEffect(_uv).mul(0.2)
finalColor.addAssign(_grain)
return finalColor
})
Boilerplate projectS
Fully cloneable starter projects with all the tools you need to get started. You can find them here:
Built on Three.js Shading Language (TSL)
I chose TSL because it’s in this sweet spot: mature enough to be reliable, but modern enough to explore advanced features like WebGPU. Plus, the Three.js community is incredible.
I look ahead
What started as a personal experiment has become something I would like to share. Every new technique I discover opens up dozens of new possibilities, and I love seeing what others create when they take these building blocks and make them their own.
If you’ve ever felt stuck between learning the basics and creating something original, Fragments may be able to help bridge that gap for you too.
#Fragments #platform #learning #creative #coding #shaders #Codrops