Building Fragments — Utils

Getting started is the hardest part

One thing I really wanted to do with Fragments is to provide a way to get you started with your own creative coding projects as quickly and easily as possible.

To do this, I've built a set of components and utility functions that are battle-tested - they power this entire website - and all are designed to be flexible and easy to use.

Boilerplate utilities

All of the sketches I've made are built using a set of boilerplate components. These React components can easily be dropped into any project and abstract away a lot of the complexity around setting everything up; so you can just get to experimenting. Here's what's included:

• A WebGPUScene component that sets up a resizable WebGPU scene in React Three Fiber and Three.js
• A SketchComponent that creates a full screen sketch where any output can be dropped in
• Utilities to do ColorSpaceCorrection

All of it culminates in the Boilerplate Project - more on that soon.

Three Shading Language (TSL) utilities

Through all the experimentation and iteration of these sketches, I've pulled out a set of utility functions that I use heavily when working with TSL. These include:

• Procedural color and tonemapping functions
• Noise functions (transpiled from GLSL using the TSL Transpiler)
• Signed Distance Field functions (SDFs) and operations translated from Inigo Quilez
• A range of transformation functions, normalisation functions and effects

I genuinely use these functions in just about every single one of my creative coding projects. It saves me a lot of mental load being able to use these drop-in functions.

That's one of the super powers of TSL, the ability to write code once and then freely use it in other contexts - which is a massive quality of life feature over using straight GLSL or WGSL.

Github Repo

Finally, when you join Fragments, you get access to a Github repo that contains a fully cloneable starting project that you can you get started straight away with.

I use this project for my own sketches, so it's a great way to get started with your own projects, and see how I've built the utilities and components that power this website.

The project is built using Vite, React Three Fiber and Three.js, and my own Boilerplate Project utilities.

How is Fragments coming along?

I'm really excited to say that I'm extremely close to early access launch. There's a little bit more content I need to write, but it's at a point where I'd actually be happy for people to dive in and check it out.

For more on the status of everything, check out the Roadmap - I keep that updated with the latest progress on things.

The plan for Early Access

So, for early access - here's what's going to be included:

• 3 deep dive Technique breakdowns (Geometric Shapes, Procedural Color Palettes and Domain Repetition)
• 13 Utility components and functions
• 87 TSL sketches with full source code
• Access to the Github repo with the starting project

The plan is to launch Early Access with a special, heavily discounted price (which I'm still working on) as a big thank you to anyone that wants to jump in early.

As more content comes online, I'll reduce the discount all the way up to the final full price. So whenever you join during Early Access, you'll get the best price possible for the content available.

Just so everything is clear - no subscriptions, no recurring payments, nothing hidden. Early access will absolutely be the lowest price Fragments will ever be.

I'll let you know when I'm ready to announce a launch date - it's going to be soon!