Put simply, the principle behind warping is pixel displacement.
A pixel (blue square at [1,3]) gets moved visually to another location (dotted square).Mathematically this can be expressed by a vector which has an angle and a length (here: distance). These two, let's call them α and d, are the only components we need when it comes down to calculations.
Since in practice our algorithm will render the resulting image on a straight pixel grid, we simply reverse this approach:
Instead of moving regular pixels onto floating point coordinates (as shown above), we calculate the destination RGB-value from an irregular source position.Our new vector looks very similar, because d (the distance) hasn't changed; the only difference is α, whose angle is rotated by 180°.
Side note: This reversal step has to be considered when writing a mouse controlled warp effect inside an editor. While in the first case the question was "where does a (source) pixel go to?", we now ask "where does a (destination) pixel come from?".
The target RGB-value can be calculated via bilinear interpolation of the (yellow) area in which the virtual source pixel resides.And that's pretty much it.
Experiments
Our reference picture will (of course) show Lena S., the standard test subject in the history of image processing:
Original
Let's examine single pixel manipulation for a warm-up. Here we see each pixel displaced individually by a random angle and a random distance (within a defined range), which gives quite noisy results:
