Simulating Forces: Gravity and Wind in p5.js | The Nature of Code

[00:00:00][BELL RINGS] Hello and welcome to chapter two of the Nature of Code, forces.

[00:00:06]So I want to start with this discussion by talking about Newton's laws of motion.

[00:00:11]So by no means is anything I'm going to do be a really accurate, robust physics simulation.

[00:00:18]But at a minimum, I want to examine what the basic laws of motion are, the basic principles behind how things move, and just make sure that the code I'm writing fits with that for the most part.

[00:00:32]So let's start with those laws of motion.

[00:00:34]Law number one.

[00:00:38]This is how it is often referred to most informally-- an object at rest stays at rest.

[00:00:44]However, a more accurate statement of this might be, an object at rest stays at rest and an object in motion stays in motion at a constant speed and direction unless acted upon by an unbalanced force.

[00:00:57]So that's a bit of a mouthful of stuff, but let's unpack that for a moment.

[00:01:01]Let's think about this in the context of our P5 canvas and the object being a circle that I'm drawing on that canvas.

[00:01:11]If this circle is going to obey Newton's first law, if it's not moving, there's no reason for it to start moving, or if it is moving at a particular velocity vector, there's no reason for that velocity vector to ever change unless acted upon by a force.

[00:01:31]The definition that I offered over here uses the term unbalanced force.

[00:01:36]So something that's very important about this concept of staying at rest or staying at a constant velocity is that it's not just whether the force is there or not, but whether the net force, the sum of all the forces in the environments, add up to something non-zero.

[00:01:51]For example, with my marker here, there's a force of gravity pulling it down, presumably towards the center of the earth, but there's also some other forces that I'm applying to it to keep it up, that are pushing it up.

[00:02:04]And so if I try my best to balance the force-- balance the force-- then it won't move at all.

[00:02:10]This diagram is another example of this.

[00:02:12]So all of these forces balance themselves out, and this object is at a state of equilibrium, meaning it won't start moving, or if it were, its velocity would remain constant.

[00:02:21]And the reason I'm harping on this so much is I really want to make sure when I go to write the next bits of code that I'm going to write, that the simulation obeys this law.

[00:02:31]But in order for it to obey this law in the first place, I have got to understand-- I'm using the term force all over the place.

[00:02:37]It's really important that I think I take a moment now to define what I mean by force.

[00:02:46]A force is a vector that causes an object with mass to accelerate.

[00:02:52]That is the technical definition that I am going to use for force.

[00:02:57]Here's the good news.

[00:02:59]Vector-- check.

[00:03:01]We've got that.

[00:03:01]I just did a whole section of videos about what is a vector, so we can understand force as a vector.

[00:03:07]Here's more good news for you.

[00:03:09]Accelerate-- check.

[00:03:11]I just did a video tutorial about how to apply acceleration in a P5 sketch.

[00:03:17]So if we can create a vector and somehow have that vector affect the object's acceleration, then we are implementing a force.

[00:03:27]And if the way that we implement the force in our code obeys this law, then we are golden.

[00:03:34]One thing here-- mass is not something that I have discussed, or used, or implemented as a property of any of the things I've done so far.

[00:03:43]So let's put a question mark there and return to that.

[00:03:46]Which leads me to Newton's second law, F equals M times A, or Force equals Mass times Acceleration.

[00:04:00]I can also describe this law as a restatement of the definition of force.

[00:04:06]Force is a vector that causes an object with mass to accelerate.

[00:04:11]We're turning back to the code for a moment.

[00:04:13]I have these two lines of code-- vel.add(this.acc), pos.add(this.vel).

[00:04:23]And in this example, everything starts with acceleration.

[00:04:27]I'm calculating an acceleration based on a vector that points from the object moving to the mouse itself.

[00:04:35]So if everything starts with acceleration, maybe I need to rethink the way that I'm describing this formula.

[00:04:43]And a different way that I could consider it is acceleration equals force divided by mass.

[00:04:53]The idea being that if I introduce some force-- like let's say there is a wind force with a magnitude and direction that I want to put into this environment.

[00:05:04]If I have that force, I could take that force, divide it by this object's mass, and that would become the object's acceleration, which would then affect its velocity, which would then affect its position.

[00:05:16]And this is the technique, the strategy by which everything I do is going to be built upon.

[00:05:23]I'm really ready to start implementing this in code.

[00:05:25]But before I do so, there's a few things I want to address.

[00:05:27]One is you might hear, when looking at how physics engines are built, the term integration.

[00:05:34]And this is actually one way of doing integration.

[00:05:38]This specific way is referred to as Euler integration.

[00:05:43]Why is it called integration?

[00:05:44]I'm getting into the weeds here into the math aspect of this, but it is important, and I think this will help you as you move forward and do more of this stuff when you see the lingo popping up here and there.

[00:05:54]In calculus, there's the concept of a derivative.

[00:05:57]And you might typically see this as written as like dx over dt, the change in x with the change in time.

[00:06:06]This is actually what velocity is doing.

[00:06:09]Velocity is dx dt.

[00:06:12]If x is position, velocity is the change in position over time.

[00:06:16]Acceleration is the change in velocity over time.

[00:06:19]So velocity can be thought of as the derivative of position, and acceleration can be thought of as the derivative of velocity.

[00:06:27]But I'm not going in that direction.

[00:06:29]I'm not starting with position, and then figuring out what's the velocity, and then figuring out what's the acceleration.

[00:06:34]I'm going in the other way.

[00:06:36]I'm starting with what's the acceleration, and then changing the velocity, and then taking the velocity and changing the position.

[00:06:42]So the other direction of doing the derivative is integration, the integral.

[00:06:47]So that's why this process is tied to calculus and the concept of integration.

[00:06:52]The big difference here is that calculus, being the study, in a way, of infinitesimally small time steps, these time steps are quite large.

[00:07:03]This algorithm is just being applied 30 times per second.

[00:07:07]But as I move my arm back and forth, are you seeing this animation at 30 frames per second?

[00:07:12]Maybe because you're watching a video, which is then recording me and playing it back at 30 frames a second.

[00:07:17]But the actual physical time space that I'm in is very continuous.

[00:07:21]The time step is infinitesimally small.

[00:07:24]And if I were doing an accurate calculation of a physics simulation, I would need to take that under consideration.

[00:07:30]Instead, I'm using a technique called Euler integration, which allows me to have fixed time steps, which are rather large, and it's wildly inaccurate.

[00:07:38]And I'll maybe back circle back to this as I look in future videos about other integration techniques.

[00:07:45]There's Berlet physics, and there's Runge Kutta integration.

[00:07:48]I probably didn't say that correctly.

[00:07:50]And so maybe I could circle back when we look at other physics libraries that might have slightly more robust methodologies underneath the hood.

[00:07:57]But the reason why I like this methodology is, number one, it works just fine.

[00:08:02]I just want my particles to spiral around the screen in pretty ways.

[00:08:06]And two, it's really fast and really easy to implement.

[00:08:09]So it has its advantages in terms of the kinds of examples and demonstrations that I want to show you.

[00:08:15]Also, I know there's so much more to this.

[00:08:17]Before you start typing your comments in the chat about the theory of relativity, and space-time continuum, and Planck time, and also "Plonk" time-- I don't even know how to say it-- my goal here is not to go in-depth into the physics of this, and I'm glad to include in this video's description other resources that do, but to take these ideas, these core classic concepts, and then work out a way to implement them in code.

[00:08:40]I should also mention there is Newton's third law, which is often stated as, for every action, there is an equal and opposite reaction.

[00:08:48]That's a little bit misleading, and I've written some thoughts about that here.

[00:08:52]Another way of stating that law is, forces always occur in pairs.

[00:08:56]The two forces are of equal strength but in opposite directions.

[00:09:00]So to be honest, this law is not so meaningful to me right now.

[00:09:04]Trust me, it's kind of important.

[00:09:06]But in terms of the simulation that I want to start with, I am not going to bother to simulate every possible reaction and opposite interaction of every force within the system.

[00:09:17]But this will come up again, and I will look at this law when, in a future video as part of this section, I look at gravitational attraction and how two bodies both attract each other, and those forces are of equal strength but in the opposite direction.

[00:09:32]To get started implementing Newton's second law in code, I want to build off of the example that I finished with in the previous section on vectors.

[00:09:40]So here, I have this mover object.

[00:09:41]It starts at a position 200, 200, and two functions are called, update() and show().

[00:09:46]So if I run it, the acceleration is being calculated as a vector pointing towards the mouse.

[00:09:51]You could think of it as a force, a gravitational attraction force pulling into the mouse.

[00:09:56]It's not really that.

[00:09:57]Of course, it's not really that.

[00:09:58]It's just some pixels on a screen.

[00:10:00]But I'm not even using the formula for gravitational attraction.

[00:10:03]So I'm going to circle back to that and make some changes to this kind of idea later.

[00:10:09]But right now, what I want to do is change the way the internals of the mover object works because right now, the acceleration is being calculated right here in update(), and I don't want to do that.

[00:10:22]Instead, I want to write a function that's basically Newton's second law.

[00:10:31]So I want to write a function-- I'm going to change its name in a moment-- that implements this particular law.

[00:10:38]The law, again, is force equals mass times acceleration.

[00:10:41]But I've rewritten it to acceleration equals force divided by mass.

[00:10:46]Guess what?

[00:10:47]Let's just pretend for a moment that the world we live in, the world that I'm programming in, there's no concept of mass.

[00:10:53]In fact, everything in this entire universe has a mass of 1.

[00:10:57]So in that case, going back to this law of force equals mass, which is 1, 1 times acceleration is really just same as force equals acceleration or acceleration equals force.

[00:11:11]So these are the same concepts.

[00:11:13]Meaning, I could just say this.acc = force.

[00:11:18]There we go.

[00:11:18]This is the simplified version of Newton's second law in code.

[00:11:24]I'm going to change the name to applyForce(), the idea being that what I want to do is take a force that exists in the environment, not something calculated from within the object.

[00:11:36]That's going to be important later in some of the other videos I'll do.

[00:11:39]But right now, imagine a wind force external to the object, or a gravitational pull maybe pulling it down along the y-axis external to the object.

[00:11:48]For example, let gravity equal createVector(0, 1).

[00:11:57]I'm making a vector that points down, and then I want to say mover.applyForce(gravity).

[00:12:05]Let's run this code.

[00:12:07]Remember, this is the applyForce() function.

[00:12:09]It sets the acceleration equal to the force, and then that acceleration is added to velocity and that velocity is added to position.

[00:12:16]Ooh.

[00:12:17][BUZZER] I forgot that I'm programming in a class, and in a class, I don't use the keyword function to define an instance method of that class, I just say applyForce().

[00:12:28]Ugh.

[00:12:32]There we go.

[00:12:34]Look at that.

[00:12:35]There's that force of gravity pulling it down.

[00:12:38]This sketch is a little bit sad because the ball falls and it never comes back.

[00:12:43]So just for the purpose of demonstration, I'm going to add an artificial constraint to this particular sketch, where what I'm going to do is I'm going to look at this bottom edge, and if this circle reaches the bottom edge, I'm going to take its velocity and reverse it.

[00:13:00]Really, if I were doing a physics simulation, I would think about this as an object with a different mass, and what kind of forces are happening when it hits that object.

[00:13:08]But I'm going to just bypass all of that with a quick shortcut.

[00:13:10]I can come back and look at that a little later, maybe.

[00:13:13]But I'm going to bypass that with a quick shortcut of just inverting the velocity.

[00:13:17]And I'm going to do that by adding a function called edges to keep track of when the object hits an edge.

[00:13:27]So this is really your classic bouncing ball code, and I have another video that goes through this algorithm more specifically.

[00:13:34]But what I'm looking for is anytime that y position is at the bottom of the canvas or below-- because testing if it's equal to height is not going to do me any good.

[00:13:43]If it's not precisely equal, it could easily move past-- then I'm going to shove it back up to height because if it goes too far and it turns around, it could get stuck.

[00:13:50]So I'm going to make sure even if it goes past height, I set its position to height and then reverse its velocity.

[00:13:55]And let's take a look.

[00:13:58]Ooh, that didn't work.

[00:13:59]Why didn't it work?

[00:14:00]It's one thing to write a function.

[00:14:02]It's another thing to call it.

[00:14:04]So let's say mover.edges().

[00:14:09]And there we are.

[00:14:09]So now this gravitational force is pulling the object down and it's bouncing up or down.

[00:14:15]Why is it going off to the right a little bit?

[00:14:17]It's going off to the right because I gave it an initial random velocity.

[00:14:21]Interestingly, you notice how it's slowing down and eventually kind of losing its bounce and stopping?

[00:14:27]In a weird sort of way, that's what I wanted to do.

[00:14:29]That feels realistic.

[00:14:30]But I can't see in the code why it's doing that because really, I'm reversing its velocity.

[00:14:35]There's nothing causing it.

[00:14:36]It should go all the way back up to the top, and then all the way back down there, then all the way back up to the top.

[00:14:39]And this, I think, is because of this Euler integration.

[00:14:42]I'm not looking at continuous time.

[00:14:44]And there's a lot of inaccuracies here.

[00:14:45]Not to mention the fact that I'm violating all of the principles of time and space by just resetting its position back to the height if it got below the height, so it's losing some time where it might regain its velocity moving back up.

[00:14:55]So there's all sorts of goofy stuff going on here.

[00:14:57]And these are the kinds of things that as a programmer, working with this in a creative context, ultimately, I'm going to need to do massaging and tweaking things to get it to feel right, whatever the types of application it is that I'm wanting to create.

[00:15:11]But right now, I just want to test if Newton's second law is at play.

[00:15:17]And I'm going to test that by doing this.

[00:15:23]Only if the mouse is pressed, apply this force of gravity, meaning the net force is currently 0 so the object is at rest.

[00:15:33]Now I am going to apply the force.

[00:15:36]I'm going to let go.

[00:15:39]Oh.

[00:15:41][FAKE SOBS] [BELL DINGS] I'm applying gravity, but when I let go, I think the gravity should stop being applied because I'm no longer pressing the mouse.

[00:15:51]But the gravity still seems to be there.

[00:15:53]Why is that?

[00:15:55]Well, there's a flaw in the way that I programmed this.

[00:15:58]The flaw is that I'm setting the acceleration equal to force.

[00:16:01]If the force goes away, I don't set the acceleration back to 0, but I should.

[00:16:06]So one of the strange things about this Euler integration and algorithm is that while velocity and position are accumulating over time, acceleration is just a function, a calculation based on, at any given moment in time, what are the forces in the environment?

[00:16:23]So at any given time, we should start with an acceleration of 0.

[00:16:28]And there only is an acceleration if there is a non-0 force.

[00:16:33]So there's a variety of ways that I could handle this.

[00:16:37]I'm going to just, I think, for simplicity, say this.acc.set(0, 0).

[00:16:43]So this is me just clearing the force out at the end of every animation cycle.

[00:16:50]So now, let's see if Newton's second law-- sorry, first law-- is really at play, and the second one.

[00:16:56]Oops.

[00:16:57]Cannot read properties set of undefined because I haven't given acceleration of value until I've applied the force, so this is just a flaw in how I've written the constructor.

[00:17:07]I also need to say, initialize a starting acceleration of 0.

[00:17:13]Now here we go.

[00:17:16]The object is staying at rest.

[00:17:18]There's no force.

[00:17:19]I click the mouse.

[00:17:20]Whoop.

[00:17:21]I let go of the mouse and it just flew off.

[00:17:23]Let's make the gravity less strong.

[00:17:26]I'm going to change this to 0.1.

[00:17:29]I'm holding down the mouse.

[00:17:30]There's gravity.

[00:17:31]I let go.

[00:17:32]The gravity is gone.

[00:17:33]The object keeps its constant velocity because there's no force acting on it.

[00:17:39]Let's try also now adding a second force into the environment.

[00:17:44]So there's one force pointing straight down called gravity.

[00:17:48]Let's add another force called wind and point it to the right.

[00:17:52]Let's get rid of the if (mouseIsPressed).

[00:17:54]I'll come back to that in a little bit.

[00:17:59]So now I've got gravity pointing down and wind pointing to the right.

[00:18:05]Of course, I could have just made one force with this as the x component and this as the y component.

[00:18:10]But I'm demonstrating an idea that as you start to build these kinds of simulations, there might be a variety of forces that are at play or not at play, based on any number of factors, and you can now separate those out into different vectors and individually apply them to your object.

[00:18:25]Let's run this sketch and see what happens.

[00:18:28]Wait a second.

[00:18:30]This I anticipated-- this error.

[00:18:32]Why is gravity not being applied?

[00:18:36]I only see wind.

[00:18:38]Let's change the order here.

[00:18:40]Let's put wind-- I don't know.

[00:18:42]Let's move the code around a little bit.

[00:18:44]Let's declare wind and gravity there, but now apply them like this.

[00:18:48]I don't know.

[00:18:48]Is that going to do anything?

[00:18:49]Wait.

[00:18:50]Now, only gravity is being applied, but not the wind.

[00:18:53]Go back into the mover.

[00:18:55]What's wrong?

[00:18:57]this.acc = force.

[00:19:00]So stepping through the code, mover.applyForce(wind).

[00:19:06]this.acc = wind.

[00:19:08]move.applyForce(gravity).

[00:19:10]this.acc = gravity.

[00:19:12]I just overwrote the wind.

[00:19:16]The wind is ignored because I'd take gravity and put it into acceleration.

[00:19:20]As I was diagramming this and describing it, I think a couple of times, I used this term net force, or the sum of all forces, or this idea of force accumulation.

[00:19:32]Meaning the object's acceleration is a result of the sum of all of the forces in its environment at any given time.

[00:19:40]Wind and gravity both act on the object, and both get added into the acceleration.

[00:19:46]So this applyForce() function shouldn't actually set acceleration equal to force, but rather it should call add.

[00:19:56]this.acc.add(force).

[00:19:58]I can call applyForce() as many times as I want and add up all the forces into the acceleration.

[00:20:05]There we go.

[00:20:07]The visual result of that isn't super interesting.

[00:20:10]Let's make it a little more interesting by saying-- and I'll make the gravity a little stronger.

[00:20:20]So now the wind will only be applied if I click the mouse, but gravity will always be applied.

[00:20:26]Let's see if this works.

[00:20:29]There's the ball bouncing.

[00:20:31]And now I'm going to click the mouse and the wind-- oh.

[00:20:34]Let's add some more edges.

[00:20:42]So now I've added a check for the right and left edges, and make sure the x slides back onto the edge, and the velocity is reversed.

[00:20:50]We have probably more elegant, and efficient, and shorter way to write this, but I'm just putting it in there to get it to work.

[00:20:55]Let's see how the forces are going.

[00:20:57]Gravity.

[00:20:58]And now I'm going to click the mouse, and wind is happening.

[00:21:01]You can see that.

[00:21:01]The wind is pushing it in that direction.

[00:21:03]But let's let go of the mouse and now the wind is no longer there and it's bouncing back and forth.

[00:21:08]The x velocity is constant now because there's no x component to the net force.

[00:21:17]But I could add the wind back in and we can see now it's pushing it to the side.

[00:21:21]I could also just increase the relative strength of these forces, just to see what that looks like.

[00:21:28]And we can see that here.

[00:21:30]And we see I already have a pretty interesting and dynamic simulation going.

[00:21:34]This is a small detail and not super important, in terms of what I'm doing, but it would be nice to actually have the ball reverse its course when the edge of the circle hits the edge of the canvas, rather than the center of the circle.

[00:21:47]So in that sense, I could add another variable for r to keep track of the object's radius.

[00:21:52]So I'm going to say this.r = 16, and then draw the ellipsis, this.r * 2, and then use this.r to determine where the edge is.

[00:22:03]Let me have it move a little slower so this is hopefully a little more visible.

[00:22:10]Ooh.

[00:22:11]Whoa.

[00:22:12]I forgot something.

[00:22:13]I've got to set it back to this.r.

[00:22:22]There we go.

[00:22:23]So that's a little bit more realistic in terms of where it's actually bouncing in terms of hitting the edge.

[00:22:33]So this is a good stopping point for this example, I think there's of twists you could do on this.

[00:22:37]First of all, I've just hardcoded numbers here for wind and gravity.

[00:22:41]There might be other ways you think about calculating those.

[00:22:44]For example, you could actually pull from a weather API and get the actual wind and have that affect this object.

[00:22:49]Or you could use Perlin noise.

[00:22:50]Maybe these vectors are changing over time for some other reason, or there's more than two forces.

[00:22:55]So many ways you could go in this direction, but this is a bit of a foundation, upon which you could build a simple interactive simulation.

[00:23:03]There's a couple of different things that I want to do with this example, which I'll do in separate videos.

[00:23:07]Number one is there's no concept of mass here.

[00:23:10]So what would it mean if I added to the mover object a mass property, and how would I use that mass value and actually bring that back into the true Newton's second law, force equals mass times acceleration?

[00:23:22]So I want to bring back mass.

[00:23:24]Bring back mass.

[00:23:25]Then I also want to investigate other forces that I can look up a real-world formula for and see if I can implement those.

[00:23:33]And the first one I'll do is friction.

[00:23:34]For example, there's this thing happening where the ball comes to a resting point, but then it just rolls back and forth.

[00:23:40]Could I simulate the friction of it against the edge and have it slow down and reach a stopping point?

[00:23:45]So the next video, I'll start with math, and then I'll look at friction, and keep going from there, finishing up with looking at the real formula for gravitational attraction and how I might implement that in code.

[00:23:55]So maybe I'll see you, maybe I won't, and go on with your day.

[00:23:58]May the force be with you.

[00:23:59]I said it.

[00:24:01]Goodbye.

[00:24:01][MUSIC PLAYING]