Popmotion Pure - управление скоростью, столкновения и движение по клику
Добрый день всем, я пытался реализовать Popmotion pure в своем дизайне, но у меня проблемы с достижением нескольких вариантов поведения ( см. Здесь codepen):
Я перечисляю ниже желаемое поведение в полном объеме, но я чувствую, что все мои вопросы можно решить, ответив на следующие вопросы:
Может кто-нибудь объяснить, как я могу применить (или манипулировать) скорость объекта в чистом виде? Возможно, просто решив третий пункт ниже?
Прямо сейчас шарики можно только перетаскивать и бросать без взаимодействия.
1) Мне нужно, чтобы шарики сталкивались с границами контейнера (сплошная красная линия - кодовая ручка), независимо от того, перетащены они или брошены, они не могут пройти мимо него.
2) Ни один шар не может пройти дальше X- координаты другого шара. Таким образом, если СИНИЙ шар перетащен в сторону ЗЕЛЕНОГО шара, как только СИНИЙ шар имеет ту же координату Х, что и ЗЕЛЕНЫЙ шар, ЗЕЛЕНЫЙ шар тоже начинает двигаться, поэтому СИНИЙ шар не проходит через него. Точно так же, если СИНИЙ шар брошен в сторону ЗЕЛЕНОГО шара, как только он достигает координаты X, он отскакивает назад и отталкивает ЗЕЛЕНЫЙ шар (в основном, столкновение)
3) И последнее, но не менее важное: мне нужно, чтобы шарики двигались в позиции указателя, когда пользователь нажимает на контейнер, сейчас у меня есть только console.log(), который описывает поведение.
I appreciate any help, thank you for your time