If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Starting with particles

First we'll explore a single particle under the influence of gravity in a JavaScript program. Gravity, mass, and initial height are set, while time step controls animation speed. The draw function calculates force, acceleration, and velocity, updating the particle's position and drawing it on screen.

Want to join the conversation?

Video transcript

- In the last lesson, we came up with the model that mimicked the behavior of curly hair. Our model used a variety of springs connected together with weights to give us this effect. The goal of this lesson is to write the computer code powering this simulation. One thing to consider before starting this lesson, we will be using some of Newton's equations to animate our simulation, and we explored how these equations worked in our effects lesson. To begin, let's simulate a very simple model. A particle which is only experiencing gravity, and it's dropped from some position on the screen. The program I'll write to simulate this situation will divide into two parts. At the top, I'll put our initial system settings, such as the starting position and force of gravity, and below that we'll use a function called draw to do the animating. First, let's define our initial settings. Gravity is a force we'll want to control, so let's define a variable called gravity, and set it to, say, 10. We can play with it later. We'll want another variable to store the particle's mass. I'll set this at 30 for now, plus a variable for the initial height we dropped the particle from. I'll call this position Y. We'll also need an initial velocity for our particle. I'll call this velocity Y, and at the very beginning of our simulation right before we drop it, we set this to be zero. Finally, we need a way to control the speed of our simulation. We'll do this with a variable called time step. Think of time step as how much time elapses between each drawing update. A larger time step will make the particle speed up between frames, and a smaller time step will slow it down. Now let's consider what goes on inside the draw function. When we run our program, the computer will first execute the initial settings once, and then loop through the draw function multiple times per second. So each frame of our animation will be a single pass of this draw function. First, I'll compute the forces acting on the particle. For now, the only force acting on it is gravity, which is pointing downwards. I'll store this downward force using a variable called force Y. And from Newton's second law, we know that this force will be equal to the particle's mass times acceleration due to gravity. Next, I'll use that force to define how fast our particle will accelerate downward. I'll store this value in a new variable called acceleration Y. To do that, I'll rearrange the handy formula, f equals m a, to give acceleration y equals force y divided by mass. Notice we've already calculated force y in the previous step. Now that we know how fast our particle's accelerating, we can update its velocity using the formula velocity equals velocity plus acceleration times time step. We derived this formula in our effects lesson. Check it out for more details. Note that the velocity variable on the right-hand side of this equation initially stores the previous velocity value. After this line is executed, the velocity variable on the left stores the updated velocity value. Finally, we can use this velocity to draw our particle in a new position using the equation, position Y equals position Y plus velocity Y times time step. As before, the position Y variable on the right-hand side of this equation initially stores the previous position value. After this line is executed, the position Y variable on the left stores the next position value. Notice how each step in our calculation uses the result of the previous step. The initial force calculation is used to find acceleration. Acceleration is used to find velocity, and velocity is used to update the position. Now the fun part. We just draw our particle in that new position. To do that, we just draw a circle using the position Y variable as its height. Here I'm drawing a circle using the ellipse function with equal width and height. Now let's run our program to see what happens. Oops, I want to erase the previous circle every time we move it so it looks like one thing falling instead of this snakey thing. I'll fix this by erasing or redrawing the screen every time I draw a new circle. Let's try that. Nice. If I increase the force of gravity, our particle falls faster as we'd expect. That's Newton's laws of motion in action. Let's pause here so you can get comfortable with this code.