Math involved with Velocity and Gravity on physics2D?

[Jim Nayzium]

The gravity and velocity of the generator of the physics2D plugin are awesome. But I am curious what the actual MATH is.

 

If I wanted to simulate a Roman Candle sitting at the bottom of my Container in the middle. (It's imaginary and invisible) and it "shoots" the particles created by a for loop createElement(div) etc...  How can I anticipate what the Velocity needs to be relative to the gravity, so I can randomize it but not have some of them shoot so high they don't get seen falling in the timeframe duration and also not weak enough that some shoot up a third of the screen and then fall five screen heights below it... 

 

The Pen should show what I mean.

 

OF course I can plug in numbers and continue trying and add a little friction etc... but I just want to understand what it's actually doing.

 

Like is Gravity: 10 / Velocity:20 going to have the same impact as Gravity: 20 / Velocity: 40 ??? etc... that's what I am asking.

 

Because what I am trying to actually accomplish is have MOST of my shots go ALMOST to the top of the screen... and then go away at ALMOST the bottom of the visible screen/viewport. But as it stands now by trial and error when I make the top point be perfect, then they fall way way way down out of the screen (which is why the overflow:visible is present so you can see it.)

 

Anyone? THANKS!! Loving GSAP!

See the Pen jOygomV?editors=0010 by JimNayzium (@JimNayzium) on CodePen

[Jim Nayzium]

A follow up question about such a similar thing I put it here in the same thread. In the below code, is there a way to tell the physics2D to not DELAY the first one? I want the explosion to be "activated" right away with a click, then for it do the random(0,3) portion. Is the only way to setup a single shot with an onStart function that loads the below I guess?

 

 physics2D: { 
   velocity: "random(200, 700)", 
   angle: "random(-85,-100)",
   gravity: 100
 },
 delay: "random(0, 3)" 
   

 

[Jim Nayzium]

Pretty sure I figured it out but this seems like over-engineering (which is what I am usually guilty of! )

 

Now if someone could teach me why this timeline is almost 40 seconds long? I am sure I caused that but can't figure it out.

 

See the Pen dyvaRBN?editors=0010 by JimNayzium (@JimNayzium) on CodePen

 

 

Edited June 16, 2021 by Jim Nayzium
added my question

[OSUblake]

2 hours ago, Jim Nayzium said:

But I am curious what the actual MATH is

 

You can always look at the source code, but the physics plugins are not meant to be a replacement for a physics engine. With real physics, you don't have a duration, so the animation ends when it comes to rest. With tweens, you have to use a duration, so figuring the best values to use in your use case is just going to take some trial and error.

 

1 hour ago, Jim Nayzium said:

Now if someone could teach me why this timeline is almost 40 seconds long?

 

Probably shouldn't have a stagger and delay in your animation.

 

1 hour ago, Jim Nayzium said:

A follow up question about such a similar thing I put it here in the same thread. In the below code, is there a way to tell the physics2D to not DELAY the first one?

 

Try this.

 

tl.to(dots, { 
   duration: "random(8,15)",
   autoAlpha:0,
   scale:0,
   ease:"power4.in",
   physics2D: { 
     velocity: "random(200, 700)", 
     // velocity: "100", 
     angle: "random(-85,-100)",
     gravity: 100
   },
   delay: i => !i ? 0 : gsap.utils.random(0, 3)
});

 

[Jim Nayzium]

that makes me feel better, then. Meaning the trial and error is part of it and I am not wasting time by not knowing something !! I ended up building a small input form with variables so I could just enter stuff and click a button to make it roll with the values I submit hahaha... probably overkill but it is working well.

 

THANKS for the first line code deal... That's just javascript shorthand right? Meaning it could also say function() { } etc... ?? 

[OSUblake]

3 hours ago, Jim Nayzium said:

That's just javascript shorthand right? Meaning it could also say function() { } etc... ?? 

 

Yep. However, it works slightly different if you need to use this.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

Or you can write functions like this now.

tl.to(dots, { 
   duration: "random(8,15)",
   autoAlpha:0,
   scale:0,
   ease:"power4.in",
   physics2D: { 
     velocity: "random(200, 700)", 
     // velocity: "100", 
     angle: "random(-85,-100)",
     gravity: 100
   },
   delay(i) {
   	return !i ? 0 : gsap.utils.random(0, 3);
   }
});