Find ellipses constrained by 2 points and their respective tangents. Parametric form.

Question

The goal is to programmatically draw a path between the 2 points that follows a conic curve if one exists. Approximations and iterative methods are acceptable.

Let's start with a simple, parametric ellipse.

$$ \bar{x}(t) = \begin{bmatrix}x(t)\\y(t)\end{bmatrix} = \begin{bmatrix}a\cos{t}\\b\sin{t}\end{bmatrix} $$

Next, apply some rotation $\theta$ and translation $(c_x,c_y)$.

$$ \begin{bmatrix} \cos{\theta} & -\sin{\theta}\\ \sin{\theta}\ & \cos{\theta} \end{bmatrix} \begin{bmatrix} a\cos{t}\\b\sin{t} \end{bmatrix} + \begin{bmatrix} c_x\\c_y \end{bmatrix} = \begin{bmatrix} a\cos{t}\cos{\theta}-b\sin{t}\sin{\theta}+c_x\\ a\cos{t}\sin{\theta}+b\sin{t}\cos{\theta}+c_y \end{bmatrix} $$

Now we have a general, parametric equation of an ellipse. Let's try out some product-to-sum identities.

$$ \begin{bmatrix} a\frac{\cos(t-\theta)+\cos(t+\theta)}{2}-b\frac{\cos(t-\theta)-\cos(t+\theta)}{2}+c_x\\ a\frac{\sin(t+\theta)-\sin(t-\theta)}{2}+b\frac{\sin(t+\theta)+\sin(t-\theta)}{2}+c_y \end{bmatrix} = \begin{bmatrix} \frac{a-b}{2}\cos(t-\theta)+\frac{a+b}{2}\cos(t+\theta)+c_x\\ \frac{a+b}{2}\sin(t+\theta)-\frac{a-b}{2}\sin(t-\theta)+c_y \end{bmatrix} $$

Let $C=\frac{a-b}{2}$ and $D=\frac{a+b}{2}$.

$$ \begin{bmatrix} x(t)\\ y(t) \end{bmatrix} = \begin{bmatrix} C\cos(t-\theta)+D\cos(t+\theta)+c_x\\ D\sin(t+\theta)-C\sin(t-\theta)+c_y \end{bmatrix} $$

Since tangents are available, taking a derivative makes sense to me.

$$ \begin{bmatrix} x'(t)\\ y'(t) \end{bmatrix} = \begin{bmatrix} -C\sin(t-\theta)-D\sin(t+\theta)\\ D\cos(t+\theta)-C\cos(t-\theta) \end{bmatrix} $$

Let's set up the constraints. The points are $(x_1,y_1)$ and $(x_2,y_2)$ and their respective tangents are $(x'_1,y'_1)$ and $(x'_2,y'_2)$. Let $t_1$ and $t_2$ correspond to the points. For $i=1,2$:

$$ x(t_i) = x_i \quad y(t_i) = y_i \quad x'(t_i) = x'_i \quad y'(t_i) = y'_i $$

Rearranging the equations.

$$ x(t_i)+y'(t_i)=x_i+y'_i=2D\cos(t_i+\theta)+c_x\\ x(t_i)-y'(t_i)=x_i-y'_i=2C\cos(t_i-\theta)+c_x\\ y(t_i)+x'(t_i)=y_i+x'_i=-2C\sin(t_i-\theta)+c_y\\ y(t_i)-x'(t_i)=y_i-x'_i=2D\sin(t_i+\theta)+c_y\\ $$

Applying Pythagorean identity.

$$ (x_i+y'_i-c_x)^2+(y_i-x'_i-c_y)^2=4D^2\\ (x_i-y'_i-c_x)^2+(y_i+x'_i-c_y)^2=4C^2 $$

There are four free variables $(c_x,c_y,C,D)$ and four quadratic equations.

Let $$ k_{i,1}=x_i+y'_i \quad k_{i,2}=y_i-x'_i \quad k_{i,3}=x_i-y'_i \quad k_{i,4}=y_i+x'_i $$

$$ (k_{i,1}-c_x)^2+(k_{i,2}-c_y)^2=4D^2\\ (k_{i,3}-c_x)^2+(k_{i,4}-c_y)^2=4C^2 $$

These aren't any quadratic equations. These are equations for circles. There are four circles. Two centered on $(k_{1,3},k_{1,4})$ and $(k_{2,3},k_{2,4})$ with radius $2C$. And another two centered on $(k_{1,1},k_{1,2})$ and $(k_{2,1},k_{2,2})$ with radius $2D$.

$$ (k_{1,1}-c_x)^2+(k_{1,2}-c_y)^2=4D^2=(k_{2,1}-c_x)^2+(k_{2,2}-c_y)^2\\ (k_{1,3}-c_x)^2+(k_{1,4}-c_y)^2=4C^2=(k_{2,3}-c_x)^2+(k_{2,4}-c_y)^2 $$

Let's move everything to the left hand side and do some factoring.

$$ (k_{1,1}-c_x)^2-(k_{2,1}-c_x)^2+(k_{1,2}-c_y)^2-(k_{2,2}-c_y)^2=0\\ (2c_x-(k_{2,1}+k_{1,1}))(k_{2,1}-k_{1,1})+(2c_y-(k_{2,2}+k_{1,2}))(k_{2,2}-k_{1,2})=0\\ 2(k_{2,1}-k_{1,1})c_x+2(k_{2,2}-k_{1,2})c_y+(k_{1,1}^2+k_{1,2}^2)-(k_{2,1}^2+k_{2,2}^2)=0 $$

Similarly,

$$ 2(k_{2,3}-k_{1,3})c_x+2(k_{2,4}-k_{1,4})c_y+(k_{1,3}^2+k_{1,4}^2)-(k_{2,3}^2+k_{2,4}^2)=0 $$

$$ \begin{bmatrix} 2(k_{2,1}-k_{1,1}) & 2(k_{2,2}-k_{1,2})\\ 2(k_{2,3}-k_{1,3}) & 2(k_{2,4}-k_{1,4}) \end{bmatrix} \begin{bmatrix} c_x\\ c_y \end{bmatrix} + \begin{bmatrix} (k_{1,1}^2+k_{1,2}^2)-(k_{2,1}^2+k_{2,2}^2)\\ (k_{1,3}^2+k_{1,4}^2)-(k_{2,3}^2+k_{2,4}^2) \end{bmatrix} =0 $$

To be continued...

Answer 1

Let the points be $a_k(x_k,y_k)$ for $k=1,2$.

Let $a_3(x_3,y_3)$ be the intersection point of the tangents in $a_1$ and $a_2$.

The general equation of ellipses both tangent to $[a_1a_3]$ in $a_1$ and to $[a_2a_3]$ in $a_2$ will be obtained as an image by an affine mapping from a simpler configuration as shown on the figure below :

the points in correspondence by this affine transformation (together with their coordinates) being denoted by capital letters (see eq. (2) and (2') in Appendix below), with :

$A_1=(1,0);A_2=(0,1),A_3=(0,0)$

Using a classical result on pencils of conics, the generic implicit equation of ellipses tangent to points $A_1(1,0)$, and $A_2(0,1)$ along coordinate axes is :

$$\underbrace{[(X-1)^2+(Y-1)^2-1]}_{\text{recognize LHS of circle equ.}} \ \ + \ \ \ \lambda \underbrace{[XY]}_{\text{LHS of coord. axes}=0}, \tag{1}$$

It remains now to plug into (1) the expressions of $X$, resp. $Y$ as functions of $x$ and $y$ issued from (2') below in order to have the implicit equation of all ellipses we are interested in.

Appendix : the direct mapping is :

$$\pmatrix{x\\y}=\underbrace{\pmatrix{(x_1-x_3)&(x_2-x_3)\\(y_1-y_3)&(y_2-y_3)}}_T\pmatrix{X\\Y}+\underbrace{\pmatrix{x_3\\y_3}}_{A_3}\tag{2}$$

Its inverse being :

$$ \pmatrix{X\\Y}=T^{-1}\pmatrix{x-x_3\\y-y_3}\tag{2'}$$

Matlab program for the figure :

    a=[2,1,2
       3,4,4]; % order : a1 a3 a2
    a1=a(:,1);a2=a(:,3);a3=a(:,2);
    A=[1,0,0;
       0,0,1];
    plot(a(1,:),a(2,:),'k','LineWidth',2);axis equal tight;hold on;
    plot(A(1,:),A(2,:),'k','LineWidth',2);hold on;
    text(a(1,:)-0.15,a(2,:)+0.15,{'a_1','a_3','a_2'});hold on
    text(A(1,:)-0.15,A(2,:)+0.15,{'A_1','A_3','A_2'});hold on
    % inverse affine transform : (X,Y) as function(s) of (x,y)
    Ti=inv([a1-a3,a2-a3]);
    V=-Ti*a3;
    X=@(x,y)(Ti(1,1)*x+Ti(1,2)*y+V(1));
    Y=@(x,y)(Ti(2,1)*x+Ti(2,2)*y+V(2));
    for a=0:0.2:0.8
       ff=fimplicit(@(x,y)(x-1).^2+(y-1).^2 - 1+a*x.*y);axis equal;hold on
       set(ff, 'Color', 'b');
       ff=fimplicit(@(x,y)(X(x,y)-1).^2+(Y(x,y)-1).^2 - 1+a*X(x,y).*Y(x,y));axis equal;hold on
       set(ff, 'Color', 'r');
    end;

Answer 2

You can also use the generic equation of a conic:

$$ A x^2 + B x y + C y^2 + D x + E y + F = 0 $$

And you have two points on the conic $P_1 = (x_1, y_1)$ , $P_2 = (x_2, y_2) $ as well as the two slopes at the two points, $s_1 = \dfrac{dy}{dx} \bigg|_{P_1} $ , $s_2 = \dfrac{dy}{dx} \bigg|_{P_2} $

Therefore,

$ A x_1^2 + B x_1 y_1 + C y_1^2 + D x_1 + E y_1 + F = 0 $

$ A x_2^2 + B x_2 y_2 + C y_2^2 + D x_2 + E y_2 + F = 0 $

$ 2 A x_1 + B (y_1 + x_1 s_1) + 2 C y_1 s_1 + D + E s_1 = 0 $

$ 2 A x_2 + B (y_2 + x_2 s_2) + 2 C y_2 s_2 + D + E s_2 = 0 $

These are $4$ linear homogenous equations in $6$ unknowns, so they will give a solution of the form

$ (A,B,C,D, E, F) = \lambda_1 V_1 + \lambda_2 V_2$

where $\lambda_1, \lambda_2 \in \mathbb{R}$, and $V_1$ and $V_2$ have been determined by solving the above linear system.

Since scaling does not change the conic, then factoring $\lambda_1$ gives

$ (A,B,C,D,E,F) = V_1 + \lambda V_2 $

where $ \lambda \in \mathbb{R} $. This gives all the conics satisfying the given conditions.

Answer 3

Your system of equations is fine, but you have one degree of freedom left. That means you can choose at will (for instance) the position of the center. If $T$ is the meeting point of the tangent lines and $M$ is the midpoint of tangency points $P_1P_2$: $$ M=\left({x_1+x_2\over2},{y_1+y_2\over2}\right), \quad T=\left( {x'_1 x'_2 (y_1 - y_2) - x_1 x'_2 y'_1 + x_2 x'_1 y'_2 \over x'_1 y'_2-x'_2 y'_1 }, {y'_1 y'_2 (x_2-x_1 ) -x'_2 y_2 y'_1 + x'_1 y_1 y'_2 \over x'_1 y'_2-x'_2 y'_1} \right). $$ then the center (by a property of the ellipse) must lie on line $TM$, more precisely on the ray opposite to ray $MT$. Once you have chosen $(c_x,c_y)$ at will on that ray, you can find coefficients $C$ and $D$ from your equations, and subsequently $t_1$, $t_2$ and $\theta$.

Answer 4

As noted above by Intelligenti pauca

This problem has been already discussed on MSE, see for instance: math.stackexchange.com/q/891085/255730, math.stackexchange.com/q/109890/255730 and math.stackexchange.com/a/2210480/255730. I'm not voting to close it just because you asked for a very specific parametric form of the ellipse.

People who come here over and over again with this question are most likely programmers who want a "working solution" which they can implement in their software. For those I want to leave these 2 links here with code to copy & paste:

https://www.lutanho.net/goodies/css_ellipse_segment_math.html https://www.lutanho.net/goodies/css_ellipse_segment_div.html

The first link is the general case with one free parameter (difficult to implement), the second link uses the easier to implement case whereby the ellipse is inscribed in the parallelogram (formed by the 2 points and tangents). The math method I used to get to the formulas is nothing I have seen here or elsewhere before, so maybe someone could make this method more known, it only uses basic math which also those who are not that advanced could follow.

Edit: Link-only answers are discouraged, so I include here the relevant part of the code:

function CanvasDrawEllipseSegment(ctx, Ax, Ay, Bx, By, Ix, Iy)
{ //context, point A, point B, intersection I of tangent lines
  var Ox=Ax+Bx-Ix, Oy=Ay+By-Iy, ax=Ax-Ox, ay=Ay-Oy, bx=Bx-Ox, by=By-Oy;
  var lA, lB, tA, tB, tt, sin_t, cos_t;
  lA=Math.sqrt(ax*ax+ay*ay);
  lB=Math.sqrt(bx*bx+by*by);
  tA=Math.atan(ax/ay);
  if (ay<0) tA+=Math.PI;
  tB=Math.atan(bx/by);
  if (by<0) tB+=Math.PI;
  ctx.beginPath();
  ctx.moveTo(Ox+ax, Oy+ay);
  for (tt=3; tt<=90; tt+=3) //for entire ellipse use tt<=360
  { sin_t=Math.sin(tt*Math.PI/180);
    cos_t=Math.cos(tt*Math.PI/180);
    ctx.lineTo(Ox+cos_t*ax+sin_t*bx, Oy+cos_t*ay+sin_t*by);
  }
  ctx.stroke();
}

screenshot of second link