Question

I am doing some multi-touch support that allow 2 fingers to rotate a photos. There are four points: 2 for previous fingers and 2 for current finger positions.

I calculated a new point by subtract the 2 previous fingers, and the second new point was calculate by subtracting the other 2 current finger.

Then, I calculate the angle like this:

radian1 = atan ( p1.y / p1.x );
radian2 = atan ( p2.y / p2.x );

I subtract radian2 and radian1 to get the final angle.

The problem is I can rotate the image beautifully but sometime if I rotate to certain position the photo got flipped e.g. a photo supposed in 270 but it flipped and appeared in 90 degree.

This is the javascript I have written according to the reply below:

 var x1 = this.previousMousePoint.x * this.previousMousePoint2.x + this.previousMousePoint.y * this.previousMousePoint2.y;
var y1 = this.previousMousePoint.x * this.previousMousePoint2.y - this.previousMousePoint.y * this.previousMousePoint2.x;

var x2 = center.x * point.x + center.y * point.y;
var y2 = center.x * point.y - center.y * point.x;

var radian1 = Math.atan(y1 / x1);
var radian2 = Math.atan(y2 / x2);

this.anchor.matrix = this.anchor.matrix.rotate(radian2-radian1, pivot);

Is looking ok. but it’s kind of slow when i try to rotate an image

Answer 1

The clean way to do this is use angle-subtraction formulas to get values proportional to the sine and cosine of the difference angle, and use atan() only once:

relevant formulas:
  cos(a2 - a1) = cos(a1)*cos(a2) + sin(a1)*sin(a2)
  sin(a2 - a1) = cos(a1)*sin(a2) - sin(a1)*cos(a2)

  p1.x = cos(a1) * len(p1)
  p1.y = sin(a1) * len(p1)

  p2.x = cos(a2) * len(p2)
  p2.y = sin(a2) * len(p2)

-> angle-subtraction: compute values proportional to sin and cos of (a2 - a1)
  c12 =  p1.x*p2.x + p1.y*p2.y   [ = len(p1)*len(p2) * cos(a2 - a1)  ]
  s12 =  p1.x*p2.y - p1.y*p2.x   [ = len(p1)*len(p2) * sin(a2 - a1)  ]

-> final result:  find resulting difference angle a12 [ = a2 - a1  ]
  a12 = atan(s12 / c12)
or (if you want a full 360-degree range):
  a12 = atan2(s12, c12)

Also, if you want to rotate an image with the result, you may not need to convert (c12,s12) to an angle, anyway: ultimately, your image rotator will use a matrix with the sines and cosines of the resulting rotation angle. By normalizing (c12,s12), you will end up with (cos(a12), sin(a12)), which you may be able to use more directly.