Why I wrote a glossary
I've lost count of how many times I've sat in front of an empty editor window thinking I've got this great idea and then struggled to actually materialize it. It wasn't because the math was impossible; it was more that I didn't quite know what I wanted.
"I want an iridescent, swirly, glowing effect" sounds clear enough, but when you try to build it, you realise that you're missing the detail that actually makes it work.
Compare that to something like: "a kaleidoscopic fractal with a cosine palette and a touch of bloom." Suddenly you've dispelled the fog and you can see the path forward. You know which techniques to reach for, which utilities to stack, and what to tweak when it's almost right.
Clarity was what was missing. Knowing what you're aiming for, even if it's just specific techniques, can be a huge help.
That idea stuck with me when I came across Animation Vocabulary by Emil Kowalski. It's essentially a shared language for talking about animation, or motion. It's specifically targeted at AI, which is not necessarily how I work, but the principles are the same. I wanted something like that for shaders and creative coding in general.
So I wrote A vocabulary for shaders — a glossary of the terms I use across Fragments, in the techniques, the utilities, and the shader breakdowns. It's a new addition to the fundamentals section, and I think it's one of the most useful things I've added in a while.
Naming the Beast
A bit dramatic, but I find the fastest way to actually get to a result you're after is to start by describing what you want to achieve. The fastest way to describe what you want to achieve is to name its headline technique. Each one in Fragments is a whole approach captured in a couple of words. It can cut through all the noise and get you focused on the right things.
Some of the ones I reach for most often:
- Mesh gradient — smooth color blends warped through space. One of my favorites.
- Domain repetition — tiling a shape infinitely with
fractormod. One of the first techniques that really stuck for me. - Raymarching — stepping through a 3D scene inside a flat shader. A little setup, but once it clicks, it's pretty magical.
- Flow field — particles following direction vectors for organic, swirling streams.
- Procedural color palettes — whole color schemes from math, usually a cosine palette.
Say "mesh gradient" and you've already narrowed the field. Say "flow field" and everyone knows you're not building a raymarched city.
The full list of technique names lives in the glossary — geometric shapes, kaleidoscopic fractal, pixel sorting, cellular automata, and more. If you're stuck describing what you want, start here.
The words behind the work
Most shader work happens before you pick a color. You're bending coordinates, defining shapes, or layering noise — and there's a whole vocabulary for that part of the process.
A few terms show up in almost everything I make:
- UV — the normalized 0–1 coordinates you transform before drawing anything
- Polar — angle and radius instead of rows and columns; natural for anything radial
- SDF — a shape defined by distance to its surface; great for blending and crisp edges at any scale
- smoothstep — a soft 0→1 ramp; the workhorse for anti-aliased edges
- fbm — stacked noise layers that build up rich, natural detail
You rarely draw a shape directly. You bend the space first, then ask what color each point should be. That's a principle I come back to constantly — and one I see people struggle with when they're starting out.
The glossary covers all of this in more detail — space and coordinates, shapes and SDFs, noise and randomness. Worth bookmarking when you're reading a breakdown and a term doesn't quite land.
Color, light, and the finishing pass
There's a whole layer of vocabulary for turning values into something you'd actually want to look at — and for the post-processing passes that give a piece its final character.
Some of the ones I use all the time:
- Cosine palette — a harmonious palette from a handful of coefficients
- Tonemapping — compressing bright values so highlights don't blow out
- Bloom — bright areas bleeding light into their surroundings
- Grain — fine noise that adds texture and hides gradient banding
Then there's the post-processing vocabulary — chromatic aberration, vignette, CRT scanlines, LED grid, dithering. You see these terms almost everywhere on social media these days — so knowing what they mean is not only a great way to level up your own understanding, but also to communicate better with others. Just name one of these and you get a recognizable look straight away. Each has a utility in Fragments you can drop on top of a finished image.
I wrote about entering my post-processing era a while back — that's when a lot of these terms went from "things I'd heard of" to "things I actually reach for." Having the words made it easier to know what to try next.
Motion, interaction, and the rest
Almost everything animated in a shader runs on time. When I'm describing motion — to myself or in a breakdown — I tend to reach for words like drift, pulse, swirl, or seamless loop rather than trying to explain the sine wave behind it.
For interactive pieces, the vocabulary shifts again — pointer uniform, trail, feedback / ping-pong. These are the terms I use when a shader needs to respond to whoever's looking at it, not just the clock.
The glossary also covers performance — reduce raymarch steps, drop an octave, lower the render scale — and a handful of principles that hold everything up:
- (Almost) everything is a function of
uvandtime - Soften your edges — hard cutoffs alias (creating "jaggies");
smoothstepis what actually reads as crisp - Cheap before expensive — math and
mixare (generalizing) a great first pass; spend them before texture reads or raymarch steps
How I'd use it
You don't need to memorize every term on day one. I'd treat it more like a reference you return to when something's fuzzy — or when you're trying to articulate what you want before you open the editor.
A few starting points depending on what you're making:
- Building organic motion? Look up noise, flow, and warp
- Going for a polished look? Palette, tonemapping, and bloom
- Something running hot on mobile? The performance section pairs well with Optimization strategies
The full glossary is at A vocabulary for shaders. I wrote it to be the language I wish I'd had when I started — something concrete to work from instead of chasing a vibe.
Fragments is your creative coding toolkit
Fragments is built around this kind of shared language — named techniques you can stack, utilities for every finishing pass, and over 170 shaders with full breakdowns so you can see the vocabulary in action.
If you'd like to unlock Fragments and get access to the full collection — including the new fundamentals like the shader vocabulary.