How to find an end point of an arc given another end point, radius, and arc direction?

Question

Given an arbitrary arc, where you know the following values: end point (x1,y1), radius (r) and arc direction (e.g. clockwise or counterclockwise from start to end), how can I calculate the other endpoint of the arc (and I say endpoint because I think of an arc as line segment that is curved, which happens to lie on the circumference of the circle and it has two end points).

Though that's just how I interpret the problem and maybe I'm not thinking about it correctly.

EDIT: Yes, I know the Origin point and the length of the arc. Sorry I forgot to mention. Also, the that circle would be on a 2D Cartesian plain (x and y axis.) Sorry, my math terminology is lacking.

Also, I'm not trying to cheat on homework or anything. This is a legitimate problem for an SVG graph I'm trying to create using JavaScript and I've tried my best but I need help.

Thanks in advance.

Answer 1

Welcome to Math.SE! Here is my sketch for the case of clockwise direction: initial point is $A$, the endpoint you want is $B$, and $C$ is the radius of the circle on which the arc lies.

I will use polar angles: you can see the description in Wikipedia. The formulas for conversion from polar to Cartesian (on the same wiki article) will also be used.

On the picture, $\theta$ is the polar angle of the direction in which the curve departs from point $A$. Since any radius of a circle is perpendicular to the circle, the polar angle of the vector $\vec{CA}$ is $\theta+\pi/2$. The length of $\vec{CA}$ is $r$. Therefore, its Cartesian coordinates are $$\vec {CA} = ( r\cos(\theta+\pi/2), r\sin(\theta+\pi/2)) = ( -r\sin(\theta), r\cos(\theta)) $$ Next, we need the coordinates of the vector $\vec{CB}$. Its length is also $r$. Since $\angle ACB$ is $L/r$ radian, the polar angle of $\vec{CB}$ is $\theta+\pi/2-L/r$. Convert to Cartesian: $$\vec {CB} = ( r\cos(\theta+\pi/2-L/r), r\sin(\theta+\pi/2-L/r)) = ( -r\sin(\theta-L/r), r\cos(\theta-L/r)) $$ Finally, $\vec{AB}=\vec{CB}-\vec{CA}$, which yields $$\boxed{\vec {AB} = ( -r\sin(\theta-L/r)+r\sin(\theta), r\cos(\theta-L/r)-r\cos(\theta)) } $$

These can be rewritten using some trigonometric identities, but I don't think it would win anything. As a sanity check, consider what happens when $L=0$: the vector is zero, hence $B$ is the same as $A$. As an aside, if $r\to \infty$ the curve becomes a straight line segment, but figuring out the limit is an exercise in calculus. :-)

---

If the curve bends counterclockwise, the signs will be different in a few places. Namely, the polar angle of $\vec{CA}$ will be $\theta-\pi/2$, hence $$\vec {CA} = ( r\sin(\theta), -r\cos(\theta)) $$ The polar angle of $\vec{CB}$ will be $\theta-\pi/2+L/r$, hence $$\vec {CB} = ( r\sin(\theta+L/r), -r\cos(\theta+L/r)) $$ The conclusion in this case is $$\boxed{\vec {AB} = ( r\sin(\theta+L/r)-r\sin(\theta), -r\cos(\theta+L/r)+r\cos(\theta))}$$

---

Later: a simpler solution for the case when $C$ is given. First, calculate the vector $\vec{CA}$ and convert it to polar coordinates using these formulas. Then either increase or decrease the angle by $L/r$, depending on counterclockwise/clockwise choice.

Since you wanted JavaScript, I made a jsfiddle and also copied the code below. The parameters are coordinates of A and C, as well as length of the arc and the direction. The radius $r$ is calculated within the function.

function findB(Ax, Ay, Cx, Cy, L, clockwise) {
    var r = Math.sqrt(Math.pow(Ax - Cx, 2) + Math.pow(Ay - Cy, 2));
    var angle = Math.atan2(Ay - Cy, Ax - Cx);
    if (clockwise) {
        angle = angle - L / r;
    }
    else {
        angle = angle + L / r;
    }
    var Bx = Cx + r * Math.cos(angle);
    var By = Cy + r * Math.sin(angle);
    return [Bx, By];
}
document.write(findB(0, 1, 1, 0, 1, true));