CODEWITHSUNDEEP
javascriptmath
papillon
papillon

Reputation: 2063

Finding the coordinates of a point in an ellipse based on an angle

I wish to know the coordinates of a vertex on an ellipse, given an angle. The ellipse center is on x = 0 and y = 0. The semi-major axis is x and has value 1. The semi-minor axis is y and has value 0.38. The angle is variable.

I have tried everything on this Stack Exchange post but nothing worked: https://math.stackexchange.com/questions/22064/calculating-a-point-that-lies-on-an-ellipse-given-an-angle

It's probably not the given solutions that are wrong, but my integration of them in JavaScript.

For example, this does not work:

a = 1
b = 0.38

function getAngle(x1, y1, x2, y2) {
    return Math.atan((y2 - y1) / (x2 - x1)) * 180 / Math.PI
}

angle = getAngle(0,0,0.3,0.7)

x = (a*b*Math.cos(angle))
/
Math.sqrt(
    (a*Math.cos(angle))**2 +
    (b*Math.sin(angle))**2
)

y = (a*b*Math.sin(angle))
/
Math.sqrt(
    (a*Math.cos(angle))**2 +
    (b*Math.sin(angle))**2
)

console.log({x,y})

Output:

{
    "x": -0.35112437558647797,
    "y": -0.3823646436315567
}

As you can see on this image, the result is not a vertex on the ellipse:

enter image description here

How do I find the coordinates of a point in the ellipse based on an angle?

Upvotes: 3

Views: 964

Answers (1)

chrslg
chrslg

Reputation: 13336

Such an ellipse is just a circle, scaled by a factor 0.38 on y axis.

The reasoning I would apply to understand the answer would be to reverse the scaling.

If you were to scale the whole drawing y axis by a factor 1/0.38≈2.63, then the ellipse would look like a circle. But then, angle of the blue line would be different. Because it would have a slot not of 0.7/0.3 but of 2.63×0.7/0.3.

And that angle, would also be the angle of the point intersection of that blue line and the ellipse. It is the parametric coordinate of the intersection in the ellipse.

Since that parametric coordinate does not depend on the scaling, it remain the same even at the current 0.38 scale

So, conclusion is that

let angle = Math.atan((0.7/0.3)*a/b);
let x = a*Math.cos(angle);
let y = b*Math.sin(angle);

Demonstration:

let a=1;
let b=0.38;

let canvas=document.getElementById('canvas');
let ctx = canvas.getContext("2d");
let y0=120;
let x0=100;
let sc=150;
ctx.strokeStyle='#000000';
// Axis
ctx.beginPath(); 
ctx.moveTo(0,y0);
ctx.lineTo(300,y0);
ctx.stroke();
ctx.moveTo(x0,0);
ctx.lineTo(x0,300);
ctx.stroke();
// Ellipse
ctx.strokeStyle='#ff0000';
ctx.beginPath();
ctx.moveTo(x0+sc*a,y0);
ctx.ellipse(x0,y0,sc*a, sc*b, 0, 0, 6.28);
ctx.stroke();
// Blue line
ctx.strokeStyle='#0000ff';
ctx.beginPath();
ctx.moveTo(x0,y0);
ctx.lineTo(x0+0.3*sc, y0-0.7*sc);
ctx.stroke();

// Intersection coordinate. The next 3 lines are my answer
// (all the lines before, and after the next 3, are just 
// what is needed for drawing)
let angle = Math.atan((0.7/0.3)*a/b);
let x = a*Math.cos(angle);
let y = b*Math.sin(angle);

// Draw a yellow box at this point. It should intersect both ellipse and line
ctx.fillStyle='#888800';
ctx.beginPath();
ctx.fillRect(x0+x*sc-5, y0-y*sc-5, 10, 10);
<canvas id=canvas width=300 height=200>
</canvas>

Now, you may note that it does not answer strictly to the question in your question title. It does not give coordinate of a point in an ellipse based on an angle. Since angle here is not the angle of the blue line, but the angle it would have if we were scaling the chart so the ellipse appeared as a circle.

But from the body of your question, and more over from your code, it appear that your real question is "finding point in an ellipse based on a line slope 0.7/0.3".

But if you really want to find the point from the angle (the angle of the blue line, you just have to use tan to get the slope, before scaling and using atan to get the real angle we need.

So

let parametricAngle = Math.atan(Math.tan(inputAngle)*a/b);
let x=a*Math.cos(parametricAngle);
let y=b*Math.sin(parametricAngle);

Upvotes: 6

Related Questions