Editor’s note: Today we’re highlighting Fragments, a 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, get in touch, we’d love to feature it!
Hey 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’ve been building Fragments to share it.
How it all started
Back in my 20s, a really long time ago now, I had a brainwave about building an audio visualisation tool. Think of something like the MilkDrop plugins for Winamp (possibly showing my age there). I was obsessed with the idea, but I had no idea how to actually make it.
That’s when I first learned about graphics programming and shaders, and I developed a lifelong passion for them.
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 when you don’t know what you’re doing. I persevered through the struggle and eventually started to get the hang of it.
I was able to make a bunch of cool things, and I kind of knew how they worked, but then I faced another problem: I struggled to find the right way to translate the mechanical parts of what I’d learned into the amazing, creative things I’d wanted to make all those years ago.
There was a missing piece in the whole process, a kind of mental block. I needed to find something to help me figure this creative coding thing out.
The lightbulb moment
Feeling a bit lost, I decided to try something different, and at the end of last year I joined the Genuary 2025 challenge. I hadn’t done anything like that 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 some fluid motion, but I ended up with a static, lifeless triangle. It was uninspired and boring.
I honestly felt like I’d failed. This is usually the point where projects come to a screeching halt and I decide to shelve things and move on to something else, but this time, for whatever reason, I just kept going — and something changed almost immediately.
With every prompt I attempted, I started to simply play with the code: changing variables, using values as inputs for other variables, and looping things differently from how I used to. Things just started to click.
By day 11, I was experimenting with a visualisation inspired by Sunnk‘s work, something I had always wanted to make but never had the confidence to try.
It was a complete breakthrough. I was finally creating the kinds of things I had always wanted to and really starting to explore the possibility space. Having a new prompt to focus on each day kept me consistent, kept me engaged, and helped me figure out my own process.
It was a game changer for me, and I believe it could be the same for others. I wanted to take that inspiration further and share it, and that’s how Fragments was born.
A platform for creative coding
After Genuary, I realized I had stumbled onto something important, a way to bridge the gap between learning shader fundamentals and actually creating original work. I started documenting everything: the techniques that worked, the utilities I kept reaching for, and the sketches that taught me something new.
Fragments became the platform I wish I had when I was starting out, not another course but a collection of creative strategies and building blocks.
It’s a culmination of everything I’ve learned, experimented with, and researched, a reflection of my own journey.
What makes it different
Rather than another fundamentals course, I wanted to build something different: a manual of creative coding techniques with deep strategies for experimentation. Here’s what you’ll find:
10 Creative Coding Techniques
Like building Flow Fields using millions of particles to create stunning, organic patterns; the Raymarching technique that let me build impossible 3D shapes in 2D space; or the Pixel Sorting technique that let me create beautiful, otherworldly patterns from static images.
15+ Utilities
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations. From noise functions, to SDFs, to procedural colour palettes – a ton of really useful stuff.
120+ Sketches
Complete with commented source code for every piece of artwork I’ve written with breakdowns of what I think makes them interesting. Learn 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 starting projects with all of the utilities you need to get started. You can find them here:
Built on Three.js Shading Language (TSL)
I chose TSL because it sits in this sweet spot – mature enough to be reliable, but modern enough to explore cutting-edge features like WebGPU. Plus, the Three.js community is incredible.
Looking forward
What started as a personal experiment has become something I’m genuinely excited 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, maybe Fragments can help bridge that gap for you too.
0 Comments