Sketches120Writing19

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Be the first to know what's next

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗
All rights reserved.
Building Fragments — Sketch Breakdowns
↑
Learning through examplesSketch breakdownsGetting up and runningVariationsRoadmap
↵Writing
←→

Building Fragments — Sketch Breakdowns

Talking about the sketches in Fragments and breaking down how they work.

Learning through examples

One of the first things I wanted to do when I started this project was to not just show you the things I made, but to reveal how I made them, and what my thought process was. This is where Sketch Breakdowns come in.

A screenshot of a sketch

Sketch breakdowns

Every single one of the sketches that you see on this website has a corresponding breakdown. In it, I share all of the code that I used to make the sketch and explain what each part actually does. Sometimes this will just be a simple explanation of say a transformation that's being done, to more complex discussions of what I was thinking when I was experimenting with different parts of the code.

A screenshot of a sketch's code

Getting up and running

The main idea here is I want to make it easy for you to take what's in Fragments and use it as a starting point for your own projects and experiments. So, with every sketch breakdown, you have easy access to:

  • The technique that I used to make the sketch (when it's completed, of course!) so you really get in depth with the base of the sketch
  • Links to all of the utilities I used to make the sketch that you can quickly copy and paste into your own projects

You can copy and paste everything into your own projects, and get started right away.

Variations

Finally, variations are a way to see how I've taken a particular technique and experimented with it in different ways. These related sketches are a great way to see just how much variety you can get out of a single technique. Here in this example, are all of the sketches that follow the Fractal technique, so while these are similar in theme, they all have unique little nuances and twists.

A screenshot of a sketch's variations

Roadmap

I'm starting to get really close to announcing the launch of Fragments - I'll make an announcement in the next little while. In the meantime, I wanted to be really transparent around where things are currently sitting in regards to content; so I made a roadmap just to give more of a sense of what's coming and potentially how far away it all is.

Check it out here: Fragments Roadmap

A screenshot of the roadmap

I'm going to continually evolve this page as things progress, so if you have any feedback or suggestions, please let me know!