iniertia Move mouse + Rotational inertia feeling

[jonForum 21 Likes (Newbie)]

Hi, am trying to tween little bit physic inertia when the mouse move.

I don't know if is the good word in english. "inertness" ?

My target it when mouse are move, the sprite follow the mouse with inertia on rotation values.
But when mouse stop, call a elastic tween to give a physic feeling.
The result are not optimal here , and maybe no very performance friendly.
If any tweener or math pro can help me on this ?

A made a codePen

 

if you try Move mouse and stop it very fast , you will see the feeling am targeting.
It not work all time this is also weird, maybe bad code or math logics here.
Am no a pro in physic sorry.

thanks a lot for any help guys

 

 

.

See the Pen EJzBzV by djmisterjon (@djmisterjon) on CodePen

[PointC 14,183 Likes (Superhero)]

Here's a good one by Blake that you can study.

 

See the Pen vKdGAy by osublake (@osublake) on CodePen

 

Happy tweening.

[mikel 4,774 Likes (Superhero)]

Hi,

 

As time goes by mouse - with a certain inertia.

or
If you want to keep track of the time ...

 

See the Pen WWqjmj by mikeK (@mikeK) on CodePen

Insane code!

 

Your pen is no longer available.
Inertia could also be controlled with an appropriate ease.

 

See the Pen jdaJrw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[jonForum 21 Likes (Newbie)]

Thank you both.
I took the time to study the demo 2, unfortunately they seem based on inertia with the x and y position.
They are very impressive! but on my side, I can not use this logic of interpolation to reach my idea, I have to tween with this with the rotation, the radian and the pivot.
As you can see, no position is used in the code code.

 

My issue, in the codePen is this.
When mouse stop move, it tween inertia the radian, but it not work fine.
I may have a bad logic or approach...

 

i really need when stop move the cursor, the item pinned give a more feeling of elastic .

 

here the pen link : 

See the Pen EJzBzV by djmisterjon (@djmisterjon) on CodePen

it should work ?

 

i hope the gif can help to understand my issue
I explain myself bad in english

[mikel 4,774 Likes (Superhero)]

 

Hi @jonForum,

 

What about ease Elastic ?  see pen on right side ...

 

Mikel

 

 

[jonForum 21 Likes (Newbie)]

yes it what am also think, but seem without success !

      TweenMax.to(bunny, 0.6, {
        rotation: 0,
        ease: Elastic.easeOut.config(4, 0.6),
      });

sometime it seem work, sometime no ... , i can't get the correct feeling.
 

[mikel 4,774 Likes (Superhero)]

Hi @jonForum,

 

Just a funny trick: If the subject has more height, the vibrations are more dramatic.

 

See the Pen jRjRzj by mikeK (@mikeK) on CodePen

 

And then there's the super CustomWiggle.
I tried it, but the wiggles were to strong ... (see code).

 

Happy tweening ...

Mikel

[mikel 4,774 Likes (Superhero)]

 

But now ...

MouseMove and timeOut could be optimized, but the oscillations

are now great from my point of view - thanks to convenient GreenSock CustomWiggel.

 

See the Pen ZZgYgO by mikeK (@mikeK) on CodePen

 

Happy wiggling ...

Mikel

 

[jonForum 21 Likes (Newbie)]

i don't know if is because canvas rendering by cpu or if is the GreenSock CustomWiggel but performance are very poor here.
Very laggy and freeze on my AMD ryzen 16 core , gtx 1070
Hope it because no gpu render here ! 

Maybe use a webGL renderer here can help
https://themoonrat.github.io/webgl-benchmark

[mikel 4,774 Likes (Superhero)]

Hi, @jonForum,

 

Sorry, I forgot something: line 17.
If user was too fast after a stop, frog no longer came after.

 

Please try it again.

 

Kind regards

Mikel