Draw an ellipse arc between two points

Questions
1

Hi!

I’ve been trying to draw an ellipse arc between two arbitrary points but my implementation is not working in some situations.

Because a part of this is involves mathematics, I started by asking this question. Basically, given two points and the center, you can always get an ellipse if you allow rotation, except for cases where the points are collinear.

The solution proposed to that question is to:

  1. Translate the center to the origin, translating both points by the same vector.
  2. Rotate both points by the angle -alpha which is the simetric of the angle of the largest vector with the positive x-semiaxis.
  3. Solve the ellipse equation to find its radiuses (system of two equations with two unknowns).
  4. Define the ellipse
  5. Rotate back the ellipse with the angle alpha and translate back to its center.

However, I’m having trouble implementing this in Three.js. The documentation for the EllipseCurve lists the expected parameters. I assume the starting angle to always be zero and then set the end angle to either the angle between the two vectors or its simetric. I also want the arc to always be the smallest (i.e., if the angle is bigger than 180º, I’d use the complementary arc). I assume the center of the ellipse to be the middle point between the centers of the shape’s bounding boxes.

This is my example code:
https://jsfiddle.net/at5dc7yk/1/
Code regarding the ellipse arc is under the class EllipseArc and you can mess with the transformation applied to the object in line 190.

It works for some cases:
Example working

But not all:
Example not working

2

if you allow rotation you will get many ellipses. This is not enough to get just one.

E.g. here are two ellipses going through the same 2 points and having same center:

n
n600×600 48 KB

p.s. you second image looks like two CAts are having really good time together.

3

Yes but since I put the largest vector in the positive x-semiaxis I think with that constraint I only get one.
I don’t know… I only need one and I can’t even do that!

4

if I uncomment line 191 it still works:

Screen Shot 2020-03-25 at 0.39.32
Screen Shot 2020-03-25 at 0.39.321347×261 47 KB

5

Ah! 3.14 is pretty:

Screen Shot 2020-03-25 at 0.41.32
Screen Shot 2020-03-25 at 0.41.32805×281 15.8 KB

Closer to 𝝅 gets you thinner ellipses:

Screen Shot 2020-03-25 at 0.44.32
Screen Shot 2020-03-25 at 0.44.32832×301 16.4 KB

Clearly you dont want to

in case where both points are on the same line with the rotation center

6

Yes, the case of collinearity should be addressed (all 3 points roughly on the same line) but for now I just wanted it to work on the other cases.

Even if instead of rotating the object I translate it, it should still find an ellipse arc.

7

if I were you, I would try to put major axis between the points (blue ellipse above). just a hunch :slight_smile: actually, nvm. I already see the case where it will produce bad results. there needs to be another heuristics

8

/cc

2 Likes