I'm trying to recreate this motion,

enter image description here

I think most of the motion is based on this formula

\begin{eqnarray} x(t) &=& A e^{-\gamma t/2} \cos(\omega t - \phi) \\ y(t) &=& B e^{-\gamma t/2} \cos(\omega t - \psi)\\ \end{eqnarray}

where \$A\$ and \$B\$ are the amplitude of the oscillation, \$\gamma\$ is the friction, \$\omega\$ is the frequency, \$t\$ is the time, and \$\phi\$ and \$\psi\$ are the phase shift.

I've nearly reproduced successfully the motion except I don't know how to calculate phi and psi according to the mouse movement and t to reproduce this "rope" effect.

When phi and psi are set to 0, the ball oscillates in one direction on a straight line, but as you can see in the video when the mouse is moved the phase shift angle is shifted according to some factor I don't know about and the ball starts rotating around the clicked point (the equilibrium) until it finally stops.

So my question is how can I calculate phi and psi to recreate this motion?


After looking @DMGregory's answer I've tried applying what he told me and after few refactoring I managed to do this

  • 1
    \$\begingroup\$ This looks like the simplest possible spring physics. Just applying an acceleration proportional to the displacement of the target from the object, integrating that acceleration over time using something simple like Euler or Verlet integration, and damping the velocity slightly each frame should be all you need. If you're using a game engine, they should provide this out of the box in the form of a spring joint. \$\endgroup\$
    – DMGregory
    Aug 11, 2021 at 21:29
  • \$\begingroup\$ @DMGregory Thanks for your comment.I'm not using physics engine, if you have code or something else that could help me out that would be great, I'm also opened in creating a bounty for this one...so a step by step explanation would be greatly appreciated \$\endgroup\$
    – JSmith
    Aug 11, 2021 at 21:33
  • \$\begingroup\$ Does this answer your question? 'Spring' physics \$\endgroup\$
    – user35344
    Aug 12, 2021 at 7:02
  • \$\begingroup\$ @Tyyppi_77 thank you for your comment I'll have a look and tell you. Thanks \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 7:19
  • \$\begingroup\$ @Tyyppi_77 can't see any oscillation on this example, am I right? \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 10:37

1 Answer 1


This looks like basic spring physics.

Each frame, you compute an acceleration vector, by taking the offset from your current position to your target position (the other end of the spring), and scaling it by the spring stiffness factor k. The higher the k value, the more sharply the spring pulls.

acceleration_x = k * (target_x - position_x)
acceleration_y = k * (target_y - position_y)

On frames where the mouse isn't clicking to attract the object, you can set acceleration_x/y to zero to "release" the object and let it drift using its own momentum without outside interference.

Then you can integrate that acceleration over time to get a changing position, using your favourite numerical integration method. Here's a basic Euler method:

velocity_x = velocity_x * inertia + acceleration_x * deltaTime
velocity_y = velocity_y * inertia + acceleration_y * deltaTime

position_x = position_x + velocity_x * deltaTime
position_y = position_y + velocity_y * deltaTime

Here velocity_x/y form an extra pair of state variables that you maintain about your object from one frame to the next. That gives it some memory of how it was moving, allowing it to retain some momentum in the old direction when the target is moved, creating that effect you described where the object can overshoot the target sideways and orbit around it, rather than only ever approaching/receding along the line joining the two points.

deltaTime is the duration of one step of your physics simulation, in the appropriate units. (eg. if position is measured in pixels and velocity in pixels per second, then deltaTime would be measured in seconds). Small timesteps of consistent duration help you get smooth, plausible physics.

inertia is a constant you choose between 0 and 1, that controls how much of the speed is retained from one simulation step to the next. At high values, the object will overshoot the target and travel almost as far as its original displacement before turning around, making big, long-lasting oscillations. Lower values act like a dampened spring, or an object with friction, where the excess velocity bleeds off quickly and the object can settle down near the target without huge overshoots / long oscillations.

To keep the expression simple, I didn't adjust inertia for the duration of your time step - basically assuming that you'll fix your time step first, then tune inertia to your liking. But if you want to dynamically adjust the inertia value to get similar behaviour under different time step values, you can use inertia = power(speedRemainingAfter1Second, deltaTime) where speedRemainingAfter1Second is a ratio between 0 and 1.

  • \$\begingroup\$ Thanks for your answer I'll definetely try this. \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 12:20
  • \$\begingroup\$ Do your formula integrates oscillations?Thanks. \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 12:25
  • \$\begingroup\$ Ctrl+F: search my answer for the word "oscillation", then re-evaluate whether that's something you need to ask me. \$\endgroup\$
    – DMGregory
    Aug 12, 2021 at 12:30
  • \$\begingroup\$ oops sorry for that, your right!!! \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 12:32
  • \$\begingroup\$ I've upvoted this because you took some time answering me, but my implementation may be wrong because I get strange results.here is my code and here is a video of my test.Thanks for the editing and the fancy gif. Do you see any mistakes? Thanks in advance \$\endgroup\$
    – JSmith
    Aug 12, 2021 at 14:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .