Angles From 3 Points

Given these 3 points:

Create the following animation:

The segment $\overline{AC}$ aligns with segment $\overline{AB}$...

This creates 2 vectors. Let's call them $\textbf{u}$ and $\textbf{v}$:

To produce the previous animation, we have to rotate the segment $\overline{AC}$, in such a way that its direction matches the direction of the segment $\overline{AB}$...

That is, we need a rotation point and an angle of rotation for segment $\overline{AC}$...

In this case the rotation point is the point $A$, and the angle of rotation is the inner angle between vectors $\textbf{u}$ and $\textbf{v}$:

The angle between vectors $\textbf{u}$ and $\textbf{v}$ can be derived from the formula of the dot product:

Which gives us:

We can express this angle in degrees if we need it:

Now we can start animating. In my case, I use SVG.js:

var A = {x:20, y:60}
var B = {x:80, y:60}
var C = {x:70, y:20}
 
var theta = 38.66
 
var rotationPointX = A.x;
var rotationPointY = A.y;
 
var segmentAB = canvas.line([A,B]).attr({
    ...
})
var segmentAC = canvas.line([A,C]).attr({
    ...
})
 
segmentAC.animate(time).rotate(theta, rotationPointX, rotationPointY);

Watch the video: