I am trying to determine the edges of an ellipse SVG in Javascript. What i have now is the center coordinate of the ellipse, the rectangle coordinates over it, and the top/left/right/bottom edges of the ellipse, but how can i determine the A,B,C,D point coordinates of an ellipse in Javascript?

I am trying to determine the edges of an ellipse SVG in Javascript. What i have now is the center coordinate of the ellipse, the rectangle coordinates over it, and the top/left/right/bottom edges of the ellipse, but how can i determine the A,B,C,D point coordinates of an ellipse in Javascript?

• javascript
• jquery
• math
• geometry
• ellipse

• Hope this is 2D... if you mean by specific degree the diagonal then use parametric ellipse equation with 45,135,225,315 degrees. If you really mean any angle then pute coordinate aligned with bigger semi axis and pute the other one from ellipse equation. – Spektre Commented Aug 3, 2018 at 7:46

2 Answers 2

Rational parametric equation of an ellipse might help:

var e = document.querySelector('ellipse'),
  p = document.querySelector('circle');

var rx = +e.getAttribute('rx'),
  ry = +e.getAttribute('ry');

var angle = 0;
const spin = () => {
    var t = Math.tan(angle / 360 * Math.PI);
    var px = rx * (1 - t * t) / (1 + t * t),
        py = ry * 2 * t / (1 + t * t);
    p.setAttribute('cx', px);
    p.setAttribute('cy', py);
    angle = ++angle % 360;
    requestAnimationFrame(spin)
}

requestAnimationFrame(spin)

<svg viewBox="-105 -55 210 110" height="200" width="400">
<ellipse stroke="#000" fill="#fff" cx="0" cy="0" rx="100" ry="50"/>
<circle fill="red" r="3"/>
</svg>

So for your points a, b, c, d:

var e = document.querySelector('ellipse'),
  a = document.querySelector('#a'),
  b = document.querySelector('#b'),
  c = document.querySelector('#c'),
  d = document.querySelector('#d');

var rx = +e.getAttribute('rx'),
  ry = +e.getAttribute('ry');

[a, b, c, d].forEach((p, i) => {
    var t = Math.tan(i * Math.PI / 4 + Math.atan(2 * ry / rx) / 2);
    var px = rx * (1 - t * t) / (1 + t * t),
        py = ry * 2 * t / (1 + t * t);
    console.log(p.id + '(' + px + ', ' + py + ')');
    p.setAttribute('cx', px);
    p.setAttribute('cy', py);
})

<svg viewBox="-105 -55 210 110" height="200" width="400">
<rect stroke="#000" fill="#fff" x="-100" y="-50" width="200" height="100"/>
<path stroke="#000" d="M-100-50L100 50zM-100 50L100-50z"/>
<ellipse stroke="#000" fill="none" cx="0" cy="0" rx="100" ry="50"/>
<circle id="a" fill="red" r="3"/>
<circle id="b" fill="red" r="3"/>
<circle id="d" fill="red" r="3"/>
<circle id="c" fill="red" r="3"/>
</svg>

Let's calculate for example the point A with coordinates A.x, A.y. To this end, let's assume first that the center O of the ellipse has coordinates 0, 0. To get the general case at the end, the final result will be just shifted by O.x, O.y.

Now, the line connecting points O and R2 is described by

y = (R2.y / R2.x) * x

To simplify the notation below, let's denote a := R2.y / R2.x. The ellipse itself is defined as a set of points which satisfy:

(y/yd)**2 + (x/xd)**2 = 1

So in order to get the intersection, we can just substitute the first equation into the second one. This yields:

x**2 * ( (a/yd)**2 + 1/xd**2 ) = 1

thus (since the intersection point is in the first quadrant, we know that x has a positive sign):

x = 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = a * x

Finally, to address non-zero offset of the center of the ellipse, we can just add the corresponding offset. Therefore:

x = O.x + 1 / Math.sqrt( (a/yd)**2 + 1/xd**2 )
y = O.y + a * x