Building Fragments

What is this thing?

Hey everyone! I'm phobon and I'm building Fragments. I'm pumped to have you along for the ride! Seeing as this is the first newsletter I've written, I thought it'd be good to give a bit of context about what this thing is, and why I'm making it.

Back in my 20s — a really long time ago now — I had a brainwave about an audio visualisation tool. Think the old milkdrop plugins for Winamp. Graphics programming and shaders seemed like the obvious way to go; so I have spent years trying to learn how they work with varying degrees of success. I could make a bunch of cool things, and I kind of knew how they worked, but I really struggled to translate that into the really amazing, creative stuff I wanted to make all those years ago.

I had to figure the creative side of creative coding out — but I had no idea what I was doing, and no idea where to start.

Pixel sorting? Volumetric raymarching? Flow fields? What on earth were those things?

I researched, experimented, and just started practicing making things. So much of it was not great, and I hit a million dead ends, but the more I made things, the more I learned and the better things became. I did really enjoy the process of learning, but thinking about where I started to now — I really wish it was easier to get started.

So, I decided to make something out of what I've learned — a platform with technique breakdowns, tools and utilities that help me sketch code, and other resources to help you get started experimenting with creative coding with shaders. It's the thing I wish I had when I was starting out.

I'll caveat this with — I'm not a shader expert. It's a passion of mine, and one I want to share; so everything you'll see in Fragments is something I've personally researched, learned and experimented with — it's a reflection of my own journey. I hope that inspires you to try something, from a really solid starting point using some excellent tools.

What is Fragments built with?

We're going to use React Three Fiber (I'm a developer by day, so React is my drug of choice), Three.js and the really new Three Shading Language (TSL). I've chosen these things for a few reasons:

• Modern and mature - you can't go wrong with React Three Fiber and Three.js as a starting point
• Future looking - TSL lets us dip into WebGPU and compute shaders that are extremely exciting
• Massive, fun community - there are so many great resources available for learning more if you want

What is coming with Fragments?

Fragments is a collection of techniques, tools and utilities, breakdowns and resources to help get you started experimenting with creative coding and shaders. Here's what I'm specifically aiming for in the next few months:

• 5-7 creative coding technique breakdowns
• 20+ utilities I use in my own work
• Git repo with all the code
• All of my (80+) sketches with full code breakdowns

I'm planning more things as well (configurators?) but not really sure what form that will take yet. I'm going to write some more about each of those different things as different newsletters for more information.

What's the plan for launch?

Things aren't quite ready yet, but I'm working on it when I can. Having a 3-year old kid and a full-time job — it's a bit of a challenge. I'm not entirely sure what form it will take either — I'm currently planning a paid (at a discount) early access period with a portion of content that's ready to go for those that want to check it out; then a full launch later.

It will be a single payment for everything — no subscriptions. The early access price will likely be the best I'll offer as thanks for joining early.

What's next?

While I'm making things, I'm going to send out this newsletter semi-regularly with updates. I'll also send out some full sketch breakdowns that you'll see on Fragments straight to your email as another thanks for coming along for the ride.

I'm super excited to see where this goes, and I really hope you all enjoy what comes out of this!