If you’ve ever used Processing you’ve probably used the ‘map’ function. From the Processing Reference section it reads: “Re-maps a number from one range to another.”

After seeing a post on the Puny Blog about displacement maps I became interested in how they did it. Unfortunately there wasn’t any source code so I’ve replicated the effect from scratch.
Turns out displacement maps are really hard to wrap your head around, so I’ll try to explain it very carefully and slowly.