Noise: Combining and Cutting
Part one was a catalogue: six functions, six ways of being smoothly random. It ended on the complaint that none of them look like anything. A field of fBm isn't marble or a coastline or cloud cover, it's raw material.
This part is about the four moves that make it specific. They're all cheap, they all compose, and between them they cover most of what procedural texture work actually consists of: cut the field, stack fields, fold the values, and — the one that changes everything — let one field bend the space another is read in.
Same convention as before: the fields are ink on paper, 0 is the page and 1 is full ink, and the sliders are live.
Cutting: a threshold makes a shape
A noise field is continuous. Almost everything you want to do with one — islands, cave walls, cloud cover, dalmatian spots, which tiles get a tree — is discrete. The bridge is one comparison: ink where the field is above some level, page where it isn't.
Drag it slowly. Nothing about the underlying field changes — the same values are there at every position throughout — but the shape goes from a few scattered islands to an almost solid mass, passing through the interesting middle where the coastline is intricate and the topology keeps changing: islands merge, lakes open, isthmuses pinch off. Around 0.5 the cut is at the field's median, which is where the boundary is longest and the result looks most like a map.
That's worth holding onto: the threshold isn't really a brightness control, it's a coverage control. If you need 30% of a surface rusted, you're looking for the level with 30% of the field above it.
A hard comparison gives a hard edge, which is right for a stencil and wrong for anything atmospheric. Widening the step into a band is the difference between a cut-out and a fog bank:
Pull Soften to zero and you're back to the stencil. Push it wide and the cut stops being visible at all — you've turned the threshold into a contrast curve, which is the same operation seen from the other end.
The sibling of the threshold is quantisation: instead of one level, slice the field into bands. Terraces, contour lines, posterised skies, the stepped look of a topographic map.
Stacking: two fields, one operator
Part one already used stacking once. fBm is a stack — the same function at doubling frequencies, summed. Nothing says the layers have to be the same function, or that summing is the only way to put them together.
The operator is the whole vocabulary, and it's short:
- Multiply — a mask. Wherever either field is near the page, so is the result. This is how you get "detail, but only where there's already something": fine noise times a broad field.
- Min / max — decisive. The result follows whichever field is closer to the page (or to the ink) at each point, so where the two swap places you get a crease rather than a blend.
- Difference — ink only where the two fields disagree. Two smooth fields, neither of which has an edge in it, produce veins and seams where one is high and the other low.
Three operators, two fields, and none of the results look like either input. This is where a texture starts to have a material in mind.
Folding: the value curve
Everything above operates on where the values are. This one operates
on what they mean. Take a field, fold it at its midpoint — 1 - |2n-1|
— and every place the field crossed the middle becomes a crease.
Ridged noise. The smooth hills of fBm become sharp-crested ridges, because a fold turns a smooth zero-crossing into a corner. This is the standard trick for mountain ranges, and with the fold applied per octave rather than at the end (a variant worth implementing when you need it) it gives you the branching, eroded ridgelines that read as real terrain.
The general point is that the curve you push values through matters as much as the function that produced them. A power curve deepens the valleys and flattens the peaks, which is a crude but effective stand-in for erosion. A smoothstep softens everything. And a two- or three-stop colour ramp — the moment you stop drawing in greys — is what turns a field into a material.
Warping: one field bends another
The moves so far all read the field at the position you asked for. The last one doesn't: before sampling, displace the position by another noise field.
const dx = noise(p.x + 31.4, p.y) - 0.5;
const dy = noise(p.x, p.y + 57.1) - 0.5;
const n = noise(p.x + strength * dx, p.y + strength * dy);
Three lines. It is, by a distance, the highest-yield trick in this whole series.
At zero warp it's plain fBm. Turn it up and the field starts to flow: the blobs stretch, curl and shear, because they're being read through a distorted coordinate system rather than being redrawn. Add a second pass — warp the position that was already warped — and it goes from "stretched" to "stirred". Marble, smoke, wood grain, topographic swirls, the eddies in a river: nearly all of it is domain warping.
Worth noticing what didn't change. The noise function is the same. The octaves are the same. The only difference is where each pixel decided to look.
Composing them
These stack in an obvious order, and in practice it's the order a shader would run them:
- Warp the position.
- Sample the field (itself usually a stack of octaves).
- Mix in a second field.
- Curve the value.
- Cut it — threshold, or quantise into bands.
Every field on this page is that pipeline with most stages switched off. The one below runs two of them — warp the position twice, then fold the value — and that is the entire recipe for polished stone. Add bands with the third slider and it becomes a contour map of the same stone.
Which is also the point at which drawing this on the CPU, one pixel at a time in a loop, starts to hurt — every one of those stages is another few noise evaluations per pixel, and this page is doing that work for a few thousand pixels at a time on demand.
A shader does it for two million, sixty times a second, and the reason it can is the subject of part three — along with what you get when you stop reading a noise field as a picture and start reading it as a force.