Как сделать так чтобы окружность внутри эллипса следовала за курсором не выходя за пределы этого эллипса?

Question

[Денис Пабло]

Это может показаться школьной задачкой, которую я не смог решить, но почему-то я видимо настолько глупый что даже этого посчитать не смог.

В общем я делаю свою сайт визитку и чтобы разбавить свой сайт какими-то элементами, мне пришла в голову идея: Сделать глаз в правом нижнем углу экрана, который будет следить за курсором, точнее зрачок самого глаза будет следовать за курсором, но вышла небольшая сложность, так-как я не знаю как работает эллипс в геометрии, я сидел и экспериментировал с числами делил и умножал, но под конец понял что так я не сделаю этот глаз.

В большей части проблема сделать такую формулу мне создала сама форма глаза, само глазное яблоко является эллипсом, что собственно и создаёт трудность.

Положение зрачка, так-же не должно выходить за пределы этого эллипса, но и само положение зависит от положения курсора на экране, но так-же важно чтобы зрачок не бегал словно персонаж на мини-карте в какой-то игре за счёт курсора, а именно смотрел в ту сторону где находится курсор.

Сам глаз нарисован в Adobe Illustrator, и на сайте является svg объектом, в этом нет проблем просто хочу уточнить, манипулировать зрачком мне легко благодаря атрибуту transform в теге g, который связывает все нужные части зрачка, но сам зрачок является окружностью.

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;

Это код когда я экспериментировал с числами, но как видите это не код а сущий кошмар, здесь я использовал самую простую математику, которую даже математикой наверное не стоит называть.

Входные данные:
mx = положение курсора по x
my = положение курсора по y
sw = ширина экрана
sh = высота экрана
ew = 335 ширина эллипса
eh = 160 высота эллипса
rp = 152 радиус зрачка

Comments

[Сергей Соколов]

человечий глаз вполне может заходить под веко, так что может, пускай заходит ?
Только сделать mask, чтобы зрачок не было видно снаружи эллипса.
И дорисовать реснички и прочие детали

[Денис Пабло]

Сергей Соколов, да с одной стороны, я тоже так подумал, в svg даже есть для этого специальный тег mask, но в таком случае, теряется какая-то атмосфера, этот глаз должен одновременно и немного пугать тем что он смотрит за курсором)

[Сергей Соколов]

Денис Пабло, у кого-то недавно тут был такой же вопрос про глаз, делал для него Pen.

Answer 1

[hint000]

Ход мыслей такой:
https://www.google.com/search?q=радиус+эллипса
https://ru.onlinemschool.com/math/formula/ellipse/
Радиус эллипсa R - отрезок, соединяющий центр эллипсa О с точкой на эллипсе.
R = a*b / sqrt((a*sin(φ))^2+(b*cos(φ))^2)
где φ - угол между радиусом и большой осью
a - большая полуось эллипса
b - малая полуось эллипса

В вашем случае φ легко найти через арктангенс, полуоси известны заранее.
Зная центр эллипса, φ и R, легко найдём координаты точки пересечения эллипса с радиусом.
Стоп, но нам нужна не эта точка, потому что окружность имеет ненулевой радиус r. Не будем решать задачу математически точно, обойдёмся грубум приближением. Для этого возьмём R1=R-r. И посчитаем координаты центра окружности на основании R1, φ и центра эллипса. Это будет сносно работать, если эллипс не слишком вытянутый, а окружность не слишком большая.

Comments

[Денис Пабло]

Спасибо, сейчас напишу код под это и проверю

[Денис Пабло]

Вот только, как мне работать с x,y курсора пользователя, как это совместить с формулой

[hint000]

Денис Пабло, ну это из школьной тригонометрии:

[hint000]

sin(φ)=(y1-y0)/R1
cos(φ)=(x1-x0)/R1