Editor’s notice: Right this moment we’re highlighting Fragments, a venture by Ben McCormick that helps creatives be taught and experiment with shaders. We love showcasing work from the neighborhood, so should you’re constructing one thing you’d wish to share, get in contact, we’d like to function it!
Hey everybody! I’m Ben, a design engineer, artistic coder, and shader artist based mostly in Perth, Western Australia. Final 12 months, I found one thing that fully modified the best way I strategy artistic 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 software. Consider one thing just like the MilkDrop plugins for Winamp (presumably displaying my age there). I used to be obsessive about the thought, however I had no concept methods to truly make it.
That’s once I first realized about graphics programming and shaders, and I developed a lifelong ardour for them.
I spent years attempting to find out how they labored with various levels of success — and principally failure. They are often extremely troublesome to jot down, particularly once you don’t know what you’re doing. I persevered by the battle and ultimately began to get the grasp of it.
I used to be in a position to make a bunch of cool issues, and I form of knew how they labored, however then I confronted one other drawback: I struggled to seek out the best option to translate the mechanical elements of what I’d realized into the wonderful, artistic issues I’d needed to make all these years in the past.
There was a lacking piece in the entire course of, a form of psychological block. I wanted to seek out one thing to assist me determine this artistic coding factor out.
The lightbulb second
Feeling a bit misplaced, I made a decision to strive one thing totally 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 could be an excessive amount of, however I actually simply needed to see if I may do it. It began off a bit tough.
My first try was a catastrophe. I attempted to create an attention-grabbing sample and mix it with some fluid movement, however I ended up with a static, lifeless triangle. It was uninspired and boring.
I actually felt like I’d failed. That is normally the purpose the place initiatives come to a screeching halt and I resolve to shelve issues and transfer on to one thing else, however this time, for no matter purpose, I simply saved 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 otherwise 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 needed to make however by no means had the boldness to strive.
It was an entire breakthrough. I used to be lastly creating the sorts of issues I had all the time needed to and actually beginning to discover the chance house. Having a brand new immediate to concentrate on every day saved me constant, saved me engaged, and helped me work out my very own course of.
It was a recreation changer for me, and I imagine it may very well be the identical for others. I needed to take that inspiration additional and share it, and that’s how Fragments was born.
A platform for artistic coding
After Genuary, I noticed I had stumbled onto one thing vital, a option to bridge the hole between studying shader fundamentals and truly creating authentic work. I began documenting all the pieces: the strategies that labored, the utilities I saved reaching for, and the sketches that taught me one thing new.
Fragments grew to become the platform I want I had once I was beginning out, not one other course however a set of artistic methods and constructing blocks.
It’s a fruits of all the pieces I’ve realized, experimented with, and researched, a mirrored image of my very own journey.
What makes it totally different
Relatively than one other fundamentals course, I needed to construct one thing totally different: a handbook of artistic coding strategies with deep methods for experimentation. Right here’s what you’ll discover:
10 Artistic Coding Strategies
Like constructing Movement Fields utilizing thousands and thousands of particles to create gorgeous, natural patterns; the Raymarching approach that permit me construct not possible 3D shapes in 2D house; or the Pixel Sorting approach that permit me create stunning, otherworldly patterns from static photographs.
15+ Utilities
A set 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 feel makes them attention-grabbing. Study what’s behind the art work, then take what’s there and remix it to make it your personal!
export const dawn1 = Fn(() => {
// Get aspect-corrected UVs for the display screen
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, enhance 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 Undertakings
Absolutely cloneable beginning initiatives with all the utilities it’s worthwhile to get began. You’ll find 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 neighborhood is unbelievable.
Trying ahead
What began as a private experiment has turn out to be 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 after they take these constructing blocks and make them their very own.
In case you’ve ever felt caught between studying the fundamentals and creating one thing authentic, perhaps Fragments can assist bridge that hole for you too.
