Building Fragments — The Collection

The heart of Fragments

Getting closer to the launch of this thing, I wanted to show a bit of a behind-the-scenes look at the core of what this is all about - the Fragments Collection.

The collection is a set of creative coding techniques that I've personally learned and experimented with to make some really cool visualisations. My goal here is to provide a solid platform to help you both get started with a particular technique, and then the confidence to really push the boundaries and make something of your own.

Who is this for?

If you're interested in creating unique, beautiful and/or interesting visualisations, creative coding, or shaders in general - then this is something built especially for you.

Ideally you have a basic understanding of GLSL and Three.JS so you can get started super quickly. You can absolutely use these techniques in your day-to-day work, or practical applications - but our main focus really is on creative coding.

What about absolute beginners?

Beginners can definitely get started with this - everything is copy-pastable. I personally built this to be more advanced than some of the other really stellar introductory courses on shader authoring there is. Think of this as complementary rather than a replacement.

What's in each technique?

Each technique is broken down into a few key parts:

The fundamentals

A dive into how each of the techniques work, what they can be used for and a super high-level overview of what we'll be making.

Full implementation with code

A complete build from start to finish with a full code breakdown. The goal here is to go through the entire process of building the technique from scratch, and then have the full finished code available for you to copy and paste into your own projects.

The code will be written using React Three Fiber, Three.JS and TSL. I usually write things with typescript, too.

Strategies to experiment with

Multiple, in-depth strategies to experiment with the technique. My aim here is to provide a bunch of different ways to approach pushing the boundaries with the technique we built. Getting an idea of where and how you can really stretch the technique is absolutely key to unlocking your creativity.

Sketch breakdowns and Additional resources

Finally, there are full breakdowns of all of the sketches I've made using that particular technique (there will be overlap), and resources to get more information. These resources really helped me when I was getting started.

For example, here's part of the draft for the Procedural Color Palettes technique. We create a full sketch from scratch with a full code breakdown, then go through a bunch of different experiments with that same technique to create unique and beautiful variations.

What techniques are in early access?

For the early access launch, I'm working really hard to finish up on 3 techniques. These represent a really great mix of techniques that I use almost all the time in my own work.

Each of these techniques are at least 80% complete, and I'm working really hard to get them ready for the early access launch.

Geometric Shapes

The fundamentals of building unique shapes and patterns, and learning how to use them to create amazing patterns, but also how to use them to do other interesting, compounding effects like masking.

Procedural Color Palettes

Simple, powerful techniques to generate amazing, smooth color palettes, and how to layer, shape and manipulate them to create stunning visualisations.

Domain Repetition

A technique that I use a lot to create interesting fractal-like patterns, dystopian cityscapes and neon wonders.

What else is there?

Overall I'm planning on at least 10 techniques to go in the collection. The plan here is to have 3 techniques at early access launch, and then continue to release more over time as they're completed. Here is what I'm currently planning (all subject to change):

• Raymarching
• Subdivision
• Flow Fields
• Pixel Sorting
• Mesh Gradients
• Noise
• Fractals
• Volumetric Raymarching

Here's a look at part of the volumetric raymarching technique.

Phew! That was a lot to go over! I'm really excited to share this all with you, and I can't wait to see what you create with it. The early access launch is coming soon (sooner than you might think?).