Как заставить квадрат поворачиваться в сторону движения мыши?

Question

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

Есть квадрат, который летит за курсором. Я пытаюсь сделать так, чтобы он поворачивался в сторону движения курсора. Высчитываю угол движения и задаю квадрату rotate с этим углом.
Если быстро двигать мышкой то вполне все работает, но если двигать медленно квадрат быстро вертится в стороны.
Я окрасил верхний бордер квадрата в красный, чтобы было видно, куда он повернут.
Как можно это решить?
Мне это нужно, чтобы приблизиться к решению этой проблемы: https://qna.habr.com/q/1053832
Вместо квадрата потом будет круг, который я буду сжимать через scaleX при движении, таким образом создам иллюзию эластичности круга.
Здесь можете поиграться: https://codepen.io/h3ckphy/pen/yLXWYwV
Лучше расширьте экран и подвигайте мышкой, чтобы все увидеть.

Answer 1

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

CodePen
Имхо стоит таки сделать, чтобы prev догонял cur, не сразу достигая его. Поэтому считать время с предыдущего кадра и изменять координаты и угол пропорционально прошедшему времени.

Тут вам ещё стоит повозится с углом, чтобы он в нужную сторону поворачивался к ближайшему: от 340° к 5° ближе через 360°, чем через 0°

Чтобы не было дерганий у центра, можно там объявить «мёртвую зону» какого-то радиуса, менее которого не реагировать углом.