Editor’s be aware: Right this moment we’re highlighting Fragments, a undertaking by Ben McCormick that helps creatives study and experiment with shaders. We love showcasing work from the group, so for those who’re constructing one thing you’d wish to share, get in contact, we’d like to characteristic it!
Hey everybody! I’m Ben, a design engineer, inventive coder, and shader artist primarily based in Perth, Western Australia. Final 12 months, I found one thing that utterly modified the best way I method inventive coding, and I’ve been constructing Fragments to share it.
How it began
Again in my 20s, a extremely very long time in the past now, I had a brainwave about constructing an audio visualisation device. Consider one thing just like the MilkDrop plugins for Winamp (presumably exhibiting my age there). I used to be obsessive about the thought, however I had no thought methods to truly make it.
That’s once I first discovered about graphics programming and shaders, and I developed a lifelong ardour for them.
I spent years making an attempt to learn the way they labored with various levels of success — and largely failure. They are often extremely troublesome to put in writing, particularly once you don’t know what you’re doing. I persevered via the wrestle and finally began to get the grasp of it.
I used to be capable of make a bunch of cool issues, and I sort of knew how they labored, however then I confronted one other downside: I struggled to search out the fitting approach to translate the mechanical components of what I’d discovered into the superb, inventive issues I’d wished to make all these years in the past.
There was a lacking piece in the entire course of, a sort of psychological block. I wanted to search out one thing to assist me determine this inventive coding factor out.
The lightbulb second
Feeling a bit misplaced, I made a decision to attempt one thing completely different, and on the finish of final 12 months I joined the Genuary 2025 problem. I hadn’t executed something like that earlier than; I all the time thought it will be an excessive amount of, however I actually simply wished to see if I might do it. It began off a bit tough.
My first try was a catastrophe. I attempted to create an fascinating sample and mix it with some fluid movement, however I ended up with a static, lifeless triangle. It was uninspired and boring.
I truthfully felt like I’d failed. That is normally the purpose the place tasks come to a screeching halt and I resolve to shelve issues and transfer on to one thing else, however this time, for no matter motive, I simply stored going — and one thing modified nearly instantly.
With each immediate I tried, I began to easily play with the code: altering variables, utilizing values as inputs for different variables, and looping issues in a different way from how I used to. Issues simply began to click on.
By day 11, I used to be experimenting with a visualisation impressed by Sunnk‘s work, one thing I had all the time wished to make however by no means had the boldness to attempt.
It was a whole breakthrough. I used to be lastly creating the sorts of issues I had all the time wished to and actually beginning to discover the likelihood area. Having a brand new immediate to deal with every day stored me constant, stored me engaged, and helped me determine my very own course of.
It was a recreation changer for me, and I imagine it could possibly be the identical for others. I wished to take that inspiration additional and share it, and that’s how Fragments was born.
A platform for inventive coding
After Genuary, I noticed I had stumbled onto one thing necessary, a approach to bridge the hole between studying shader fundamentals and truly creating authentic work. I began documenting all the things: the methods that labored, the utilities I stored reaching for, and the sketches that taught me one thing new.
Fragments turned the platform I want I had once I was beginning out, not one other course however a group of inventive methods and constructing blocks.
It’s a fruits of all the things I’ve discovered, experimented with, and researched, a mirrored image of my very own journey.
What makes it completely different
Relatively than one other fundamentals course, I wished to construct one thing completely different: a handbook of inventive coding methods with deep methods for experimentation. Right here’s what you’ll discover:
10 Inventive Coding Strategies
Like constructing Stream Fields utilizing thousands and thousands of particles to create beautiful, natural patterns; the Raymarching approach that permit me construct not possible 3D shapes in 2D area; or the Pixel Sorting approach that permit me create stunning, otherworldly patterns from static photos.
15+ Utilities
A group of utilities to streamline your TSL workflow with copy-pasteable implementations. From noise capabilities, to SDFs, to procedural color palettes – a ton of actually helpful stuff.
120+ Sketches
Full with commented supply code for each piece of art work I’ve written with breakdowns of what I believe makes them fascinating. Study what’s behind the art work, then take what’s there and remix it to make it your individual!
export const dawn1 = Fn(() => {
// Get aspect-corrected UVs for the display
const _uv = screenAspectUV(screenSize).toVar()
const uv0 = screenAspectUV(screenSize).toVar()
// Coloration 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 utilizing cosine palette
const col = cosinePalette(uv0.y.add(0.5).add(time.mul(0.01)), a, b, c, d)
// Repeated sawtooth sample in Y, softened
const repeatedPattern = fract(_uv.y.mul(24)).mul(0.3)
// Add sample to paint, increase 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 Ventures
Totally cloneable beginning tasks with the entire utilities you might want to get began. Yow will discover them right here:
Constructed on Three.js Shading Language (TSL)
I selected TSL as a result of it sits on this candy spot – mature sufficient to be dependable, however fashionable sufficient to discover cutting-edge options like WebGPU. Plus, the Three.js group is unimaginable.
Trying ahead
What began as a private experiment has develop into one thing I’m genuinely excited to share. Each new approach I uncover opens up dozens of recent prospects, and I really like seeing what others create once they take these constructing blocks and make them their very own.
For those who’ve ever felt caught between studying the fundamentals and creating one thing authentic, possibly Fragments will help bridge that hole for you too.
