Calculate angle of rotation around an axis element from 2 or 3 points?

Question

JavaScript

Hey!
There are divs in the form of a square. If you hold down any of the corners and start moving the mouse, then with the help of either JS, I can get the delta value of the movement. For example, if the cursor is taken down by 2 pixels, then we get delta = { x: 0, y: 2 }, if the cursor is 10 to the left, then delta = { x: -10, y: 0 }, if diagonally to the upper right corner by 5 pixels then delta = { x: 5, y: -5 }.

I have already resized according to the following principle: width + delta.x, height + delta.y, everything works fine.

Now for the second day I have been trying to make the rotation of the figure relative to its center.



We know:
1. Center coordinates center = { x, y }
2. xy coordinate of the upper left corner before moving p1 = { x, y }
3. xy coordinate of the upper left corner after moving (xy before moving + delta xy) p2 = { x, y }
4. element width and height
5. initial rotation angle 0
degrees we know the upper left corner, width and height (suddenly the remaining corners are needed).

It seems that the task is simple: angle = atan2(center.y - p2.y, center.x - p2.x). Then we translate the radians into degrees, but for some reason we get the wrong angle, since the figure starts to twitch during rotation, the angle is calculated incorrectly.

I tried this: atan2(p1 .y - p2.y, p1 .x - p2.x), similar.
I also tried atan2(delta.y, delta.x), because delta is essentially the difference between the old and new coordinates, but the angle is also calculated incorrectly.

I'm sure the mistake is very banal, but for the second day I've been racking my brains, I've read so much information that it's already a mess in my head. Is there any other way to calculate the angle?

UPD: codepen

Answer 1

Vadim Stepanenko , You have some left coordinates, what is the center, what is the position of the cursor, hence the error

Answer 2