How to implement this rotation?

Question

JavaScript

Good afternoon.
Tell me, the implementation of this movement (see figure):
1) Rotation of point A counterclockwise. Coordinates start (0, 0)
2) Rotation of point B counterclockwise. Point A is the origin.
I tried to implement this rotation using matrices. All is well only as long as the point is at rest. I did it according to the formula T ^-1 R T. (shift to 0, rotate, return). When point A starts rotating, in this implementation, it is clearly not what it should be. Although I'm not sure. Because I can’t mathematically substantiate what kind of movement will be as a result of these transformations.
The question is the following. Did I start right? (with displacement, rotation, return)
Or is it a more complex problem from the field of mechanics?

Is there an implementation in js?

Answer 1

Use oCanvas . The example from the main page is very similar to your task.

Answer 2

Yes, it seems simple - rotation around the center, whose coordinates move in a circular orbit.
If you do matrices, then it seems like you need to multiply in the order of displacement-rotation.
And if implemented with improvised means, then I prefer to move the coordinate system jsfiddle.net/4e4xtLng/1

Answer 3

Let R _a and R _b be the rotation matrices of point A with respect to O and B with respect to A. C is an arbitrary point of the object whose movement is specified by points A and B. Then the rotation of point C will look like this:
С' = R _a ×A + R _b ×(C-A)
Accordingly, movement of point A:
A' = R _a ×A
Movement of point B:
B' = R _a ×A+R _b ×(BA)

Answer 4

You can compare with the implementation of software rotation from the article ukrainoid.com/688x
, it may be useful