From 5468b64e5de2cd145e2bb9d781550869c8eb120a Mon Sep 17 00:00:00 2001 From: shiffman Date: Sat, 24 Feb 2024 15:59:22 +0000 Subject: [PATCH] Notion - Update docs --- content/00_randomness.html | 19 ++++++++----------- content/02_forces.html | 12 ++++++------ 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/content/00_randomness.html b/content/00_randomness.html index f74df0f8..456e361b 100644 --- a/content/00_randomness.html +++ b/content/00_randomness.html @@ -155,7 +155,7 @@

Example 0.1: A Traditional Random this.x += xstep; this.y += ystep; } -

Taking this further, I could get rid of floor() and use the random() function’s original floating-point numbers to create a continuous range of possible step lengths from –1 to 1:

+

Taking this further, I could get rid of floor() and use the random() function’s original floating-point numbers to create a continuous range of possible step lengths from –1 to 1, as shown next.

  step() {
     //{!2} Any floating-point number from –1 to 1
@@ -188,11 +188,9 @@ 

Example 0.2: A Random-Number Di function draw() { background(255); - - // Pick a random number and increase the count. + //{!2} Pick a random number and increase the count. let index = floor(random(randomCounts.length)); randomCounts[index]++; - stroke(0); fill(127); let w = width / randomCounts.length; @@ -252,7 +250,6 @@

Exercise 0.2

let num = random(1);
-
 // If the random number is less than 0.6
 if (num < 0.6) {
   print("Sing!");
@@ -314,6 +311,12 @@ 

A Normal Distribution of Random
Figure 0.2: Two example bell curves of a normal distribution, with a low (left) and high (right) standard deviation

On the left is a distribution with a very low standard deviation, with the majority of the values piling up around the mean (they don’t deviate much from the standard). The version on the right has a higher standard deviation, so the values are more evenly spread out from the average (they deviate more).

+

The numbers work out as follows: given a population, 68 percent of its members will have values in the range of one standard deviation from the mean, 95 percent within two standard deviations, and 99.7 percent within three standard deviations. Given a standard deviation of 5 pixels, only 0.3 percent of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250). Meanwhile, 68 percent of the monkey heights will be from 245 to 255 pixels.

+

Luckily, to use a normal distribution of random numbers in a p5.js sketch, you don’t have to do any of these calculations manually. Instead, the randomGaussian() function takes care of the math and returns random numbers with a normal distribution:

+
function draw() {
+  // Ask for a Gaussian random number.
+  let num = randomGaussian();
+}

Calculating Mean and Standard Deviation

Consider a class of 10 students who receive the following scores (out of 100) on a test: 85, 82, 88, 86, 85, 93, 98, 40, 73, and 83.

@@ -352,12 +355,6 @@

Calculating Mean and Standard D

The standard deviation is the square root of the variance: 15.13.

-

The numbers work out as follows: given a population, 68 percent of its members will have values in the range of one standard deviation from the mean, 95 percent within two standard deviations, and 99.7 percent within three standard deviations. Given a standard deviation of 5 pixels, only 0.3 percent of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250). Meanwhile, 68 percent of the monkey heights will be from 245 to 255 pixels.

-

Luckily, to use a normal distribution of random numbers in a p5.js sketch, you don’t have to do any of these calculations manually. Instead, the randomGaussian() function takes care of the math and returns random numbers with a normal distribution:

-
function draw() {
-  // Ask for a Gaussian random number.
-  let num = randomGaussian();
-}

What next? What if, for example, the goal is to assign the x-position of a shape drawn?

By default, the randomGaussian() function returns a normal distribution of random positive and negative numbers with a mean of 0 and a standard deviation of 1. This is also known as the standard normal distribution. Often, however, these default parameters won’t work. For example, say you want to randomly assign the x-position of a shape by using a normal distribution with a mean of 320 (the center horizontal pixel in a window of width 640) and a standard deviation of 60 pixels. In this case, you can adjust the parameters by passing the randomGaussian() function two arguments: the mean followed by the standard deviation.

diff --git a/content/02_forces.html b/content/02_forces.html index 77367185..35279ee4 100644 --- a/content/02_forces.html +++ b/content/02_forces.html @@ -275,7 +275,7 @@

Example 2.1: Forces

} } }

-

Now that the class is written, I can create more than one Mover object:

+

Now that the class is written, I can create more than one Mover object.

let moverA = new Mover();
 let moverB = new Mover();

But there’s an issue. Look again at the Mover object’s constructor:

@@ -380,8 +380,8 @@

Parsing Formulas

  • When symbols are placed next to each other, this typically means multiply them. The right side of the friction formula has four elements: –, μ, N, and \hat{v}. They should be multiplied together, reading the formula as \vec{f} = -1 \times \mu \times N \times \hat{v}.
  • -

    Open up any high school physics textbook and you’ll find diagrams and formulas describing various forces—gravity, electromagnetism, friction, tension, elasticity, and more. For the rest of this chapter, I’m going to consider three forces—friction, drag, and gravitational attraction—and show how to model them with p5.js. The point I’d like to make here is not that these are fundamental forces that you always need in your simulations. Rather, I want to demonstrate these forces as case studies for the following process:

    +

    Open up any high school physics textbook and you’ll find diagrams and formulas describing various forces—gravity, electromagnetism, friction, tension, elasticity, and more. For the rest of this chapter, I’m going to consider three forces—friction, drag, and gravitational attraction—and show how to model them with p5.js. The point I’d like to make here is not that these are fundamental forces that you always need in your simulations. Rather, I want to demonstrate these forces as case studies for the following process:

    1. Understanding the concept behind a force
    2. Deconstructing the force’s formula into two parts: @@ -397,10 +397,6 @@

      Parsing Formulas

      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.
      -

      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();
      @@ -408,6 +404,10 @@ 

      Friction

      // (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.

      +
      + 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.
      +

      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.