1

I have a problem understanding the formula for rotating a point around another point.

On one side we have this code taken from here (a very popular answer from stackoverflow).

function rotate_point_1(pointX, pointY, originX, originY, angle) {
    angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
        y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY
    };
}

And on the other hand this one from here (another very popular answer), I just changed it a bit to make it very similar as the first one.

function rotate_point_2(pointX, pointY, originX, originY, angle) {
    angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) + Math.sin(angle) * (pointY-originY) + originX,
        y: Math.cos(angle) * (pointY-originY) - Math.sin(angle) * (pointX-originX) + originY
    }
}

When calling such formulas with small data the answer does not change too much, but when using complex quantities like the following:

consr r1 = rotate_point_1(-2682.124970310381, 1284.7120051002187, 2947.162670759748, 1163.2594358745218, -90);
const r2= rotate_point_2(-2682.124970310381, 1284.7120051002187, 2947.162670759748, 1163.2594358745218, -90)

Codepen

The results are different:

r1 = {x: 3068.615239985446, y: 6792.54707694465}
r2 = {x: 3068.615239985446, y: 1041.8068666488261}

Which of both is the correct to use?

Thanks in advance.

Victor
  • 71
  • 2
  • 11
  • IIRC matrix should be `[[c, -s], [s, c]]` so 1st one – Dimava Nov 22 '22 at 16:16
  • It's better to make a test case where you can test that on irl values, as formula may differ depending on environment (mostly in place of `-` in sin) – Dimava Nov 22 '22 at 16:18
  • I believe that you changed the behaviour of the second example when you edited it. The original code at https://stackoverflow.com/questions/17410809/how-to-calculate-rotation-in-2d-in-javascript should work fine. You want `y: Math.cos(angle) * (pointY-originY) + Math.sin(angle) * (pointX-originX) + originY` rather than `y: Math.cos(angle) * (pointX-originX) + Math.sin(angle) * (pointY-originY) + originY`. – Mark Dickinson Nov 22 '22 at 17:15
  • Hi @MarkDickinson Thank you for pointing that out, I have made the corresponding change but the discrepancy of results remains, please see the edited answer. I can't explain why they give different results and which one I should use. – Victor Nov 24 '22 at 17:30
  • So now you have a situation where one formula is rotating clockwise by `angle` and the other is rotating anticlockwise by `angle`. (I can't be more specific than that, since whether it's the first example or the second that's rotating clockwise depends on your conventions.) To determine which one is the "right" one to use, we'd need more information about (a) your conventions and (b) whether you want `angle` to represent a clockwise or an anticlockwise rotation with respect to those conventions. – Mark Dickinson Nov 24 '22 at 17:49
  • @MarkDickinson As for the conventions, I am using angles between -180 and 180, the given angle is always given clockwise. For some reason in my application using formula 1 (and not 2) works for some cases but 2 (and not 1) for others, it is clear that there is something I am not understanding correctly. – Victor Nov 24 '22 at 18:10

0 Answers0