Now, let's try to make our forces a little bit more true to the real world, by improving the gravity of the last example and introducing a friction force.
Gravity on Earth
You may have noticed something woefully inaccurate about this last example. The smaller the circle, the faster it falls. There is a logic to this; after all, we just stated (according to Newton’s second law) that the smaller the mass, the higher the acceleration. But this is not what happens in the real world. If you were to climb to the top of the Leaning Tower of Pisa and drop two balls of different masses, which one will hit the ground first? According to legend, Galileo performed this exact test in 1589, discovering that they fell with the same acceleration, hitting the ground at the same time. Why is this? As we will see later in this course, the force of gravity is calculated relative to an object’s mass. The bigger the object, the stronger the force. So if the force is scaled according to mass, it is canceled out when acceleration is divided by mass. We can implement this in our sketch rather easily by multiplying our madeup gravity force by mass.
for (var i = 0; i < movers.length; i++) {
var wind = new PVector(0.01,0);
var gravity = new PVector(0, 0.1*movers[i].mass);
movers[i].applyForce(wind);
movers[i].applyForce(gravity);
movers[i].update();
movers[i].display();
movers[i].checkEdges();
}
While the objects now fall at the same rate, because the strength of the wind force is independent of mass, the smaller objects still accelerate to the right more quickly.
Making up forces will actually get us quite far. The world of ProcessingJS is a pretend world of pixels and you are its master. So whatever you deem appropriate to be a force, well by golly, that’s the force it should be. Nevertheless, there may come a time where you find yourself wondering: “But how does it really all work?”
Open up any high school physics textbook and you will find some diagrams and formulas describing many different forces—gravity, electromagnetism, friction, tension, elasticity, and more. Or, hey, browse the physics lessons on Khan Academy. In this section, we’re going to look at two of those forces—friction and gravity. The point we’re making here is not that friction and gravity are fundamental forces that you always need to have in all your ProcessingJS programs. Rather, we want to evaluate these two forces as case studies for the following process:

Understanding the concept behind a force

Deconstructing the force’s formula into two parts:

How do we compute the force’s direction?

How do we compute the force’s magnitude?


Translating that formula into ProcessingJS code that calculates a
PVector
to be sent through ourMover
'sapplyForce()
function.
If we can follow the above steps with two forces, then hopefully if you ever find yourself Googling “atomic nuclei weak nuclear force” at 3 a.m., you will have the skills to take what you find and adapt it for ProcessingJS programs.
Dealing with formulae
OK, in a moment we’re going to write out the formula for friction. This isn’t the first time we’ve seen a formula in this course; we just finished up our discussion of Newton’s second law, \vec{F} = M \times \vec{A}
(or force = mass * acceleration). We didn’t spend a lot of time worrying about this formula because it’s a nice and simple one. Nevertheless, it’s a scary world out there. Just take a look at the equation for a “normal” distribution, which we covered (without looking at the formula) in the Introduction.
\displaystyle f(x,\mu,\sigma)={\frac{1}{\sigma\sqrt {2\pi}}}e^{\left({{\dfrac {(x\mu)^{2}}{2\sigma^{2}}}}\right)}
What we’re seeing here is that formulas like to use a lot of symbols (quite often letters from the Greek alphabet). Let’s take a look at the formula for friction.
\vec{Friction} =  µN\hat{v}
If it’s been a while since you’ve looked at a formula from math or physics, there are three key points that are important to cover before we move on.
 Evaluate the right side, assign to the left side. This is just like in code! What we’re doing here is evaluating the right side of the equation and assigning it to the left. In the case above, we want to calculate the force of friction—the left side tells us what we want to calculate and the right side tells us how to do it.
 Are we talking about a vector or a scalar? It’s important for us to realize that in some cases, we’ll be looking at a vector; in others, a scalar. For example, in this case the force of friction is a vector. We can see that by the arrow above the word “friction.” It has a magnitude and direction. The right side of the equation also has a vector, as indicated by the symbol
\hat{v}
, which in this case stands for the velocity unit vector.  When symbols are placed next to each other, we mean for them to be multiplied. The formula above actually has four elements:
1
,µ
,N
, and\hat{v}
. We want to multiply them together and read the formula as:\vec{Friction} =  µN\hat{v}
Friction
Let’s begin with friction and follow our steps.
Friction is a dissipative force. A dissipative force is one in which the total energy of a system decreases when an object is in motion. Let’s say you are driving a car. When you press your foot down on the brake pedal, the car’s brakes use friction to slow down the motion of the tires. Kinetic energy (motion) is converted into thermal energy (heat). Whenever two surfaces come into contact, they experience friction. A complete model of friction would include separate cases for static friction (a body at rest against a surface) and kinetic friction (a body in motion against a surface), but for our purposes, we are only going to look at the kinetic case.
Here’s the formula for friction, along with an illustration:
Now it’s now up to us to separate this formula into two components that determine the direction of friction as well as the magnitude. Based on the diagram above, we can see that friction points in the opposite direction of velocity. In fact, that’s the part of the formula that says 1 * \hat{v}
, or 1 times the velocity unit vector. In ProcessingJS, this would mean taking the velocity vector, normalizing it, and multiplying by 1.
var friction = velocity.get();
friction.normalize();
// Let’s figure out the direction of the friction force
// (a unit vector in the opposite direction of velocity).
friction.mult(1);
Notice two additional steps here. First, it’s important to make a copy of the velocity vector, as we don’t want to reverse the object’s direction by accident. Second, we normalize the vector. This is because the magnitude of friction is not associated with how fast it is moving, and we want to start with a friction vector of magnitude 1 so that it can easily be scaled.
According to the formula, the magnitude is \mu * N
. μ, the Greek letter mu (pronounced “mew”), is used here to describe the coefficient of friction. The coefficient of friction establishes the strength of a friction force for a particular surface. The higher it is, the stronger the friction; the lower, the weaker. A block of ice, for example, will have a much lower coefficient of friction than, say, sandpaper. Since we’re in a pretend ProcessingJS world, we can arbitrarily set the coefficient based on how much friction we want to simulate.
var c = 0.01;
Now for the second part: N
. N
refers to the normal force, the force perpendicular to the object’s motion along a surface. Think of a vehicle driving along a road. The vehicle pushes down against the road with gravity, and Newton’s third law tells us that the road in turn pushes back against the vehicle. That’s the normal force. The greater the gravitational force, the greater the normal force. As we’ll see in the next section, gravity is associated with mass, and so a lightweight sports car would experience less friction than a massive tractor trailer truck. With the diagram above, however, where the object is moving along a surface at an angle, computing the normal force is a bit more complicated because it doesn’t point in the same direction as gravity. We’ll need to know something about angles and trigonometry.
All of these specifics are important; however, in ProcessingJS, a “good enough” simulation can be achieved without them. We can, for example, make friction work with the assumption that the normal force will always have a magnitude of 1. When we get into trigonometry in the next section, we’ll remember to return to this question and make our friction example a bit more sophisticated. Therefore:
var normal = 1;
Now that we have both the magnitude and direction for friction, we can put it all together…
var c = 0.01;
var normal = 1;
var frictionMag = c * normal;
var friction = movers[i].velocity.get();
friction.mult(1);
friction.normalize();
friction.mult(frictionMag);
…and add it to our “forces” example, where many objects experience wind, gravity, and now friction:
If you watch that program run for a while, you’ll notice that the circles move less and less, and tend to hang around one area. Since friction continuously pushes against the object in the opposite direction of its movement, the object continuously slows down. This can be either a useful technique or a problem, depending on the goals of your visualization.
This "Natural Simulations" course is a derivative of "The Nature of Code" by Daniel Shiffman, used under a Creative Commons AttributionNonCommercial 3.0 Unported License.
Share a tip
Thank the author
Have something that's not a tip or thanks about this content?
This discussion area is not meant for answering homework questions.