Question

I have a grid in a 2D system like the one in the before image where all points A,B,C,D,A’,B’,C’,D’ are given (meaning I know the respective x- and y-coordinates).

I need to calculate the x- and y-coordinates of A(new), B(new), C(new) and D(new) when the grid is distorted (so that A’ is moved to A'(new), B’ is moved to B'(new), C’ is moved to C'(new) and D’ is moved to D'(new)).

The distortion happens in a way in which the lines of the grid are each divided into sub-lines of equal length (meaning for example that AB is divided into 5 parts of the equal length |AB|/5 and A(new)B(new) is divided into 5 parts of the equal length |A(new)B(new)|/5).

The distortion is done with the DistortImage class of the Sandy 3D Flash engine. (My practical task is to distort an image using this class where the handles are not positioned at the corners of the image like in this demo but somewhere within it).

alt text http://www.gefragt.de/distorted_grid.png

Answer 1

Let (u,v) represent “texture” coordinates. Your handles stay at the same texture coordinates regardless of grid distortions.

So, in texture space, A=(0,0) B=(1,0) C=(1,1) D=(0,1) A’=(au,av) B’=(bu,bv) …

We can convert from texture space to pixel space.

P(u,v) = A*(1-u)(1-v) + Bu*(1-v) + Cuv + D*(1-u)*v

(u,v are texture coordinates, and A, B, C, D refer to pixel coordinates)

So, if your handle A’ is defined to have texture coordinate (.35,.15), then the position of A’ in pixel space is given by P(.35,.15).

Now, say the user drags handle A’. We need to solve for the new location of A. B,C,D remain fixed. It’s just simple algebra.

A' = A*(1-au)*(1-av) + B*au*(1-av) + C*au*av + D*(1-au)*av
A' - B*au*(1-av) - C*au*av - D*(1-au)*av = A*(1-au)*(1-av)
A = (A' - B*au*(1-av) - C*au*av - D*(1-au)*av) / ((1-au)*(1-av))

Not too bad. The same process gets formulas for the other handles. Here is my C# code. It gets called when any of the 8 “Thumbs” get dragged:

     double au = .35, av = .15; // texture coordinates of A'
     double bu = .8, bv = .2;   // texture coordinates of B'
     double cu = .8, cv = .6;   // texture coordinates of C'
     double du = .2, dv = .9;   // texture coordinates of D'

     // if we're dragging A' (AA), then move A, etc.
     if (sender == ThumbAA) A = (AA - B*au*(1-av) - C*au*av - D*(1-au)*av) / ((1-au)*(1-av));
     if (sender == ThumbBB) B = (BB - A*(1-bu)*(1-bv) - C*bu*bv - D*(1-bu)*bv) / (bu*(1-bv));
     if (sender == ThumbCC) C = (CC - A*(1-cu)*(1-cv) - B*cu*(1-cv) - D*(1-cu)*cv) / (cu*cv);
     if (sender == ThumbDD) D = (DD - A*(1-du)*(1-dv) - B*du*(1-dv) - C*du*dv) / ((1-du)*dv);

     // update position of A', B', C', D'   
     AA = A*(1-au)*(1-av) + B*au*(1-av) + C*au*av + D*(1-au)*av;
     BB = A*(1-bu)*(1-bv) + B*bu*(1-bv) + C*bu*bv + D*(1-bu)*bv;
     CC = A*(1-cu)*(1-cv) + B*cu*(1-cv) + C*cu*cv + D*(1-cu)*cv;
     DD = A*(1-du)*(1-dv) + B*du*(1-dv) + C*du*dv + D*(1-du)*dv;

video of my demo app:
http://screencast.com/t/NDU2ZWRj

This doesn’t answer your exact question about repositioning 4 handles at the same time. Is that what you really want? Also, let me know if your handles’ texture coordinates aren’t predetermined. You can convert from pixel to texture coordinates, but it is more complicated.