How can I make the circle inside the ellipse follow the cursor without leaving the ellipse?

Question

JavaScript

This may seem like a school problem that I could not solve, but for some reason I am apparently so stupid that I could not even calculate this.

In general, I am making my site a business card, and in order to dilute my site with some elements, I came up with the idea: Make an eye in the lower right corner of the screen that will follow the cursor, more precisely, the pupil of the eye itself will follow the cursor, but a little complexity came out , since I don’t know how an ellipse works in geometry, I sat and experimented with numbers, divided and multiplied, but in the end I realized that I wouldn’t do this eye.

For the most part, the problem of making such a formula was created for me by the shape of the eye itself, the eyeball itself is an ellipse, which actually creates the difficulty.

The position of the pupil should also not go beyond this ellipse, but the position itself depends on the position of the cursor on the screen, but it is also important that the pupil does not run like a character on a mini-map in some game due to the cursor, but just looked in the direction where the cursor is.

The eye itself is drawn in Adobe Illustrator, and it is an svg object on the site, there is no problem with this, I just want to clarify, it is easy for me to manipulate the pupil thanks to the transform attribute in the g tag, which links all the necessary parts of the pupil, but the pupil itself is a circle.

const MAX_POS_X = 335;
const MAX_POS_Y = 160;
const RATIO = 2.09375;
const WIDTH_CENTER = window.innerWidth/2;
const HEIGHT_CENTER = window.innerHeight/2;

let x = -(WIDTH_CENTER-event.x)-(WIDTH_CENTER/4)*2/3.3;

if (x >= MAX_POS_X) {
    x = MAX_POS_X;
}

if (x <= -MAX_POS_X) {
    x = -MAX_POS_X;
}

let y = -(HEIGHT_CENTER-event.y)-HEIGHT_CENTER/4;

if (y >= MAX_POS_Y) {
    y = MAX_POS_Y;
}

if (y <= -MAX_POS_Y) {
    y = -MAX_POS_Y;
}

this.$data.x = x;
this.$data.y = y;

This is the code when I experimented with numbers, but as you can see, this is not a code, but a real nightmare, here I used the simplest mathematics, which probably should not even be called mathematics.

Input:
mx = cursor x
position my = cursor y position
sw = screen width
sh = screen height
ew = 335 ellipse width
eh = 160 ellipse height
rp = 152 pupil radius

Answer 1

The train of thought is:
https://www.google.com/search?q=radius+ellipse
https://ru.onlinemschool.com/math/formula/ellipse/
The radius of the ellipse R is the segment connecting the center of the ellipse O with a point on ellipse.
R = a*b / sqrt((a*sin(φ))^2+(b*cos(φ))^2)
where φ is the angle between the radius and the major axis
a is the major semiaxis of the ellipse
b is the minor semiaxis of the ellipse
B In your case, φ is easy to find through the arc tangent, the semiaxes are known in advance.
Knowing the center of the ellipse, φ and R, we can easily find the coordinates of the intersection point of the ellipse with the radius.
Stop, but we do not need this point, because the circle has a non-zero radius r. We will not solve the problem mathematically exactly, we will manage with a rough approximation. To do this, take R1=Rr. And we calculate the coordinates of the center of the circle based on R1, φ and the center of the ellipse. This will work reasonably well as long as the ellipse is not too long and the circle is not too large.