From 87d960540440e48fd02cf1e6ee52dfa3726434b5 Mon Sep 17 00:00:00 2001 From: shiffman Date: Sat, 24 Feb 2024 15:36:32 +0000 Subject: [PATCH] Notion - Update docs --- content/02_forces.html | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/content/02_forces.html b/content/02_forces.html index 4e4b602..7736718 100644 --- a/content/02_forces.html +++ b/content/02_forces.html @@ -49,7 +49,9 @@

Newton’s Third Law

Figure 2.2: Demonstrating Newton’s third law of motion by pushing a heavy truck while wearing roller skates
Figure 2.2: Demonstrating Newton’s third law of motion by pushing a heavy truck while wearing roller skates
-

You’ll accelerate away from the truck, sliding along the road while the truck stays put. Why do you slide but not the truck? For one, the truck has a much larger mass (which I’ll get into with Newton’s second law). Other forces are at work too—namely, the friction of the truck’s tires and your roller skates against the road.

+
+

You’ll accelerate away from the truck, sliding along the road while the truck stays put. Why do you slide but not the truck? For one, the truck has a much larger mass (which I’ll get into with Newton’s second law). Other forces are at work too—namely, the friction of the truck’s tires and your roller skates against the road.

+

Considering p5.js again, I could restate Newton’s third law as follows:

If you calculate a p5.Vector called f that represents a force of object A on object B, you must also apply the opposite force that object B exerts on object A. You can calculate this other force as p5.Vector.mult(f, -1).

You’ll soon see that in the world of coding simulation, it’s often not necessary to stay true to Newton’s third law. Sometimes, such as in the case of gravitational attraction between bodies (see Example 2.8), I’ll want to model equal and opposite forces in my example code. Other times, such as a scenario where I’ll say, “Hey, there’s some wind in the environment,” I’m not going to bother to model the force that a body exerts back on the air. In fact, I’m not going to bother modeling the air at all! Remember, the examples in this book are taking inspiration from the physics of the natural world for the purposes of creativity and interactivity. They don’t require perfect precision.

@@ -245,7 +247,6 @@

Example 2.1: Forces

// Motion 101 from Chapter 1 this.velocity.add(this.acceleration); this.position.add(this.velocity); - // Now add clearing the acceleration each time! this.acceleration.mult(0); } @@ -395,18 +396,18 @@

Parsing Formulas

If you can follow these steps with the example forces I’ll provide here, then hopefully when you find yourself googling atomic nuclei weak nuclear force at 3 AM, you’ll have the skills to take what you find and adapt it for p5.js.

Friction

Let’s begin with friction and follow the preceding steps. Whenever two surfaces come into contact, they experience friction. Friction is a dissipative force, meaning it causes the kinetic energy of an object to be converted into another form, giving the impression of loss, or dissipation.

+

Let’s say you’re driving a car. When you press your foot on the brake pedal, the car’s brakes use friction to slow the motion of the tires. Kinetic energy (motion) is converted into thermal energy (heat). 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 simplicity here, I’m going to work through only the kinetic case. Figure 2.3 shows the formula for friction.

Figure 2.3: Friction is a force that points in the opposite direction of the sled’s velocity when the sled is sliding in contact with the hill.
Figure 2.3: Friction is a force that points in the opposite direction of the sled’s velocity when the sled is sliding in contact with the hill.
-

Let’s say you’re driving a car. When you press your foot on the brake pedal, the car’s brakes use friction to slow the motion of the tires. Kinetic energy (motion) is converted into thermal energy (heat). 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 simplicity here, I’m going to work through only the kinetic case. Figure 2.3 shows the formula for friction.

-

Since friction is a vector, let me separate this formula into two parts that determine the direction of friction as well as its magnitude. Figure 2.3 indicates that friction points in the opposite direction of velocity. In fact, that’s the part of the formula that says -1 \times \hat{v}, or –1 times the velocity unit vector. In p5.js, this would mean taking an object’s velocity vector and multiplying it by -1:

+

Since friction is a vector, let me separate this formula into two parts that determine the direction of friction as well as its magnitude. Figure 2.3 indicates that friction points in the opposite direction of velocity. In fact, that’s the part of the formula that says -1 \times \hat{v}, or –1 times the velocity unit vector. In p5.js, this would mean taking an object’s velocity vector and multiplying it by -1:

let friction = this.velocity.copy();
 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 I don’t want to reverse the object’s direction by accident. Second, the vector is normalized. This is because the magnitude of friction isn’t associated with the speed of the object, and I want to start with a vector of length 1 so it can easily be scaled.

+

Notice two additional steps here. First, it’s important to make a copy of the velocity vector, as I don’t want to reverse the object’s direction by accident. Second, the vector is normalized. This is because the magnitude of friction isn’t associated with the speed of the object, and I want to start with a vector of length 1 so it can easily be scaled.

According to the formula, the magnitude is \mu \times N. The Greek letter mu (\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 this is a pretend p5.js world, I can arbitrarily set the coefficient to scale the strength of the friction:

let c = 0.01;

Now for the second part. 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.

@@ -690,27 +691,24 @@

Gravitational Attraction

Indeed, if I add one more line of code and grab the magnitude of that vector before normalizing it, I’ll have the distance. And this time, I’ll skip the normalize() step and use setMag():

// The vector that points from one object to another
 let force = p5.Vector.sub(position2, position1);
-
 // The length (magnitude) of that vector is the distance between the two objects.
 let distance = force.mag();
-
 // Use the formula for gravity to compute the strength of the force.
 let magnitude = (G * mass1 * mass2) / (distance * distance);
-
 // Normalize and scale the force vector to the appropriate magnitude.
 force.setMag(magnitude);

Note that I also changed the name of the direction vector to force. After all, when the calculations are finished, the vector I started with ends up being the actual force vector I wanted all along.

+

Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the Mover class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an applyForce() method. I’ll take this class and put it in a sketch with the following:

+
Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.
Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.
-

Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the Mover class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an applyForce() method. I’ll take this class and put it in a sketch with the following:

-

The Mover object will experience a gravitational pull toward the Attractor object, as illustrated in Figure 2.9.

I’ll start by creating a basic Attractor class, giving it a position and a mass, along with a method to draw itself (tying mass to size):

class Attractor {
@@ -996,7 +994,7 @@ 
The n-Body Problem

   bodyB.update();
   bodyB.show();
 }
-

For any n-body problem, the resulting motion and patterns are entirely dependent on the initial conditions. For example, if I were to assign specific velocity vectors for each body in setup(), one pointing to the right and one pointing to the left, the result is a circular orbit.

+

For any n-body problem, the resulting motion and patterns are entirely dependent on the initial conditions. For example, if I were to assign specific velocity vectors for each body in setup(), one pointing to the right and one pointing to the left, the result is a circular orbit.

Example 2.8: Two-Body Attraction

@@ -1038,7 +1036,7 @@

Exercise 2.14

bodies[i].show(); } } -

The draw() function is where I need to work some magic so that every body exerts a gravitational force on every other body. Right now, the code reads, “For every body i, update and draw.” To attract every other body j with each body i, I need to nest a second loop and adjust the code to say, “For every body i, attract every other body j (and update and draw)”:

+

The draw() function is where I need to work some magic so that every body exerts a gravitational force on every other body. Right now, the code reads, “For every body i, update and draw.” To attract every other body j with each body i, I need to nest a second loop and adjust the code to say, “For every body i, attract every other body j (and update and draw).”

  for (let i = 0; i < bodies.length; i++) {
     // For every body, check every body!
     for (let j = 0; j < bodies.length; j++) {
@@ -1070,7 +1068,7 @@ 
Example 2.9: n Bodies

 
   for (let i = 0; i < bodies.length; i++) {
     for (let j = 0; j < bodies.length; j++) {
-      //{!1} Don't attract yourself!
+      //{!1} Do not attract yourself!
       if (i !== j) {
         let force = bodies[j].attract(bodies[i]);
         bodies[i].applyForce(force);