How to find intersection of two tangent lines in javascript

Question

I have two points(x1,y1 and x2,y2) on a circle and the center (c1,c2) of a circle and need javascript code to calcuate the intersection point of two tangent lines thru points x1,y1 and x2,y2.

I am using it to convert from a circle (really an arc defined by the above points) to a quadratic bezier curve.

You can get the linear equation of each (circleOrigin, point) lines. Then you can get the linear equation of the tangente. Then with the two linear equations, you can get the intersection coordinates. This is only trigonometry (and btw, I'm not english, so sorry if I don't use the exact words) — Seblor
– Seblor, Commented Dec 25, 2015 at 2:29
Are you using a canvas to draw the circle or are you just working with numbers rather then images. — Binvention
– Binvention, Commented Dec 25, 2015 at 2:36
There is no trigonometry needed to find the equation for a tangent line. It is the perpendicular of the radius. — Douglas Zare
– Douglas Zare, Commented Dec 25, 2015 at 2:56

Tamas Hegedus · Accepted Answer · 2015-12-25 03:49:42Z

3

The normals of the tangents are:

n1x = x1 - c1
n1y = y1 - c2
n2x = x2 - c1
n2y = y2 - c2

Using the following parameters:

d1 = n1x * x1 + n1y * y1
d2 = n2x * x2 + n2y * y2

the equations of the tangents can be written as:

x * n1x + y * n1y = d1
x * n2x + y * n2y = d2

Solving the linear equation system yields the following result in general case:

x = (d2 * n1y - d1 * n2y) / (n1y * n2x - n1x * n2y)
y = (d1 * n2x - d2 * n1x) / (n1y * n2x - n1x * n2y)

In javascript:

var x1,y1,x2,y2,c1,c2; // inputs
var x, y;              // outputs

... get the parameters somehow

var n1x = x1 - c1;
var n1y = y1 - c2;
var n2x = x2 - c1;
var n2y = y2 - c2;
var d1 = n1x * x1 + n1y * y1;
var d2 = n2x * x2 + n2y * y2;

var det = n1y * n2x - n1x * n2y;
if (det === 0) {
    // The lines are parallel
} else {
    x = (d2 * n1y - d1 * n2y) / det;
    y = (d1 * n2x - d2 * n1x) / det;
}

answered Dec 25, 2015 at 3:49

Tamas Hegedus

30.1k12 gold badges67 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pat Over a year ago

Thanks, this is just what I was looking for. I will give it a try. I guess I should have used cx,cy instead of c1,c2 but you seemed to have understood anyway.

Oriol · Accepted Answer · 2015-12-25 03:33:26Z

1

The vector from the center (c₁, c₂) to a point (xᵢ, yᵢ) on a circumference is (xᵢ-c₁, yᵢ-c₂).

That means the line through (c₁, c₂) and (xᵢ, yᵢ) has slope sᵢ = (yᵢ-c₂)/(xᵢ-c₁).

Let tᵢ be the slope of the tangent line on (xᵢ, yᵢ). tᵢ = -1/sᵢ = (c₁-xᵢ)/(yᵢ-c₂).

Let oᵢ = yᵢ-tᵢxᵢ. Then the tangent line through (xᵢ, yᵢ) is

y = tᵢ(x-xᵢ) + yᵢ = tᵢx + oᵢ

Doing this for i = 1, i = 2 produces a linear equation system.

y = t₁x + o₁
y = t₂x + o₂

Solving it gives the intersection of the tangent lines

    o₁-o₂
x = ─────
    t₂-t₁

       o₁-o₂
y = t₁ ───── + o₁
       t₂-t₁

answered Dec 25, 2015 at 3:33

Oriol

291k71 gold badges459 silver badges535 bronze badges

Collectives™ on Stack Overflow

How to find intersection of two tangent lines in javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related