Is there any logic to how the image gets distorted? I find that it is useful to think about, or I am crippled with the possibilities.

It is difficult to form an equation which does non-affine transformations. However, it is easy to have equations which can do affine transformations. The current interface works on this principle and so it divides the image into a number of triangles and does affine transformations on them. Due to a large number of triangles undergoing simpler transformations, the image as a whole appears to have undergone a complex non-affine transformation. Here is how it works:

We can imagine a parallelogram having 3 edges fixed and one edge being dragged. When this happens, we can visualize that only half of the parallelogram will get affected by this event i.e. the triangle formed by joining the edge being moved and it's neighboring edges. The other half will remain unaltered. To solve this, it is further broken down into more number of triangles so that the effect of the movement of an edge gets propagated throughout. (Credits: btbonval)

This link: http://tulrich.com/geekstuff/canvas/perspective.html can help understand how the image gets divided into triangles and how the accuracy of transformation varies by changing the subdivision factor.

This is a well written summary, Anish.

@eustatic There is a logic to the distortion. As Anish said, the end result of these affine transformations looks like a projective distortion. The projective distortion is the logic. It is a specific kind of distortion that is calculated, in this case, given the four control points.

I think it is implied in step 3 that the control points drive the projective distortion, but that fact could be made more clear.