fl3xice
@fl3xice
Люблю что-то придумывать

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

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

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

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

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

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

612b09fd6c0e3433180282.png
612b0a8e6ee11100060420.png

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 радиус зрачка
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
hint000
@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, φ и центра эллипса. Это будет сносно работать, если эллипс не слишком вытянутый, а окружность не слишком большая.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы