Finding tangent line to circle at point

[tangert]

I figure this should probably be a built in function to Circle or Pt or Line. I'm implementing it myself now though

[williamngan]

Thanks @tangert . That's a definitely a good function for Pts, and maybe also getting the 4 tangent lines between 2 circles.

I'll try to get to this soon. If you need it quickly, I think the simplest implementation would be using circle-circle intersection to find the 2 tangent points -- something like this:

[tangert]

Hm- but how easily does this solution all you to draw a tangent line at the point A? Maybe I'm not seeing it correctly. For now, the easiest solution for me was to create a vertical line at a given point, then rotate it by the angle between that point and the center of the circle. The example below creates a circle from a given center point and draws the tangent line according to the space's pointer.

    // Create a center point at (5,5) for the circle 
    let circleCenterPoint = Pt.make(5,5)

    // Function written to calcualte distance between two points
    let radius = Math.dist(
      circleCenterPoint.x,
      circleCenterPoint.y,
      this.space.pointer[0],
      this.space.pointer[1]
    );

    // Create a radius line and a circle from the given coordinates
    let radiusLine = new Group(circleCenterPoint, this.space.pointer);
    let radiusCircle = Circle.fromCenter(circleCenterPoint, radius);

    // First we create a vertical line reference
    // This line is always vertical and follows the pointer
    let tangent = new Group(
      Pt.make([this.space.pointer.x, this.space.pointer.y - radius]),
      Pt.make([this.space.pointer.x, this.space.pointer.y + radius])
    );
    // Rotate  by the angle from the origin anchored at the pointer
    // This essentially creates a tangent line
    let angleVec = radiusLine[1].$subtract(radiusLine[0]);
    tangent.rotate2D(angleVec.angle(), this.space.pointer);

You can play with what I'm doing with it here (it's a little slow): https://l9r723q4l9.codesandbox.io/

I think another good approach would be to simply have a function for Line that returns the slope of the line perpendicular to it, and another function that creates a Line with a given slope, magnitude, and anchor point.

[williamngan]

Hi Tyler, I see -- seems like you're looking for something simpler.

If I understand correctly, I think a simple way is to get a vector from pointer to circle's center, and then find its orthogonal vectors. You can use Geom.perpendicular or just flip the vector (eg, (x, y) to (-y, x)). Quick sample code:

    let vec = space.pointer.$subtract( space.center );
    let r = vec.magnitude();
    let circle = Circle.fromCenter( space.center, r );

    let ortho = Geom.perpendicular( vec );
    ortho.add( space.center.$add( vec ) ); // add circle's position back
    
    form.strokeOnly("#fff").circle( circle ).line( [space.center, space.pointer] );
    form.stroke("#fe0", 3).line( ortho );

Take a look also at these demos which may be relevant to what you want to do:
https://ptsjs.org/demo/?name=geom.perpendicular
https://ptsjs.org/demo/?name=line.perpendicularFromPt

Some quick tips:

• you can get a new Pt by space.pointer.$subtract( 0, radius ), instead of Pt.make( space.pointer.x, space.pointer.y - radius )
• you can calculate the distance between two points by a.$subtract( b ).magnitude()
• The Line class has slope and intercept functions if you need them

Hope these helps!

[tangert]

Awesome! That helps a lot. I tried using the perpendicular function earlier but couldn't get it to work- this makes it a lot more clear.