Сложно. Как сделать физику движения кругу, летящему за курсором?

Question

[Лев Александров]

У меня есть кастомный курсор в виде точки и фолловера (круг вокруг точки), который двигается за точкой с небольшой задержкой.
Мне нужно сделать, чтобы круг имел физику при движении мыши, т. е. не просто был статичным кругом, а чтобы изменял форму (сжимался, растягивался) в зависимости от направления движения, скорости и т. д.



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

Comments

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

12 принципов анимации Disney (на англ.) — может, вдохновят на идеи деформаций, предвосхищения движения и т.п.

[Zhainar]

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

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

Zhainar, не факт, что длина постоянна: круг представляется эластичным — способным растягиваться и сжиматься.

Answer 1

[profesor08]

Круг это svg элемент. Сам элемент круга рисовать кривыми. Чтоб получилась капля, у одной из кривых смещать точку от центра. Все это сделать заранее и запомнить значения. При движении мышки подсчитывать некоторое значение ускорения и в зависимости от этого значения, смещать точку кривой от одного положения до другого. Для этого можно использовать svg анимацию и передавать в нее прогресс, либо вручную высчитывать положение точки Далее поворачивать всю svg на нужный угол, чтоб конец капли смотрел на курсор. И останется сделать плавное перемещение за курсором. Собственно все.

Comments

[Лев Александров]

Хотелось бы пример посмотреть. Есть ли что-то подобное уже реализованное?

[profesor08]

Лев Александров, дальше самостоятельно

[Лев Александров]

profesor08, а если капля не нужна, а просто нужно сжатие в зависимости от угла движения мыши? Как это сделать? Попробовал вариант, который я написал с использованием div, но там проблемы с поворотом div'a, иногда происходит резкий поворот.

[profesor08]

Лев Александров, элипсы тоже можно рисовать

Answer 2

[Сергей Кутузов]

Возможно тут что-то найдёте, что поможет в решении вашего вопроса https://starper55plys.ru/javascript-i-jquery/kurso...

Comments

[Лев Александров]

благодарю

Answer 3

[Vindicar]

Ну например так.
Отслеживаешь две точки: центр эллипса, и курсор. Пусть центр эллипса движется за курсором с инерцией и трением, т.е: расстояние между курсором и центром определяет ускорение (не скорость!) центра, при этом каждый фрейм модуль скорости уменьшается (трение).
А потом рисуешь наклонный эллипс с центром в точке центра и фокусом в позиции курсора. Если две точки совпадут, у тебя получится круг.