Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #792 from nature-of-code/notion-update-docs

Browse source 
Chapter 0 and 2 layout adjustments
This commit is contained in:
Daniel Shiffman 2024-02-24 11:03:45 -05:00 committed by GitHub
commit 53547db46d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
content/00_randomness.html
View file

@ -155,7 +155,7 @@ function draw() {
this.x += xstep;
this.y += ystep;
}</pre>
<p>Taking this further, I could get rid of <code>floor()</code> and use the <code>random()</code> function’s original floating-point numbers to create a continuous range of possible step lengths from –1 to 1:</p>
<p>Taking this further, I could get rid of <code>floor()</code> and use the <code>random()</code> function’s original floating-point numbers to create a continuous range of possible step lengths from –1 to 1, as shown next.</p>
<div class="avoid-break">
<pre class="codesplit" data-code-language="javascript"> step() {
//{!2} Any floating-point number from –1 to 1
@ -188,11 +188,9 @@ function setup() {
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 @@ if (r &#x3C; probability) {
</ul>
<div class="avoid-break">
<pre class="codesplit" data-code-language="javascript">let num = random(1);
// If the random number is less than 0.6
if (num &#x3C; 0.6) {
print("Sing!");
@ -314,6 +311,12 @@ if (num &#x3C; 0.6) {
<figcaption>Figure 0.2: Two example bell curves of a normal distribution, with a low (left) and high (right) standard deviation</figcaption>
</figure>
<p>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).</p>
<p>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.</p>
<p>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 <code>randomGaussian()</code> function takes care of the math and returns random numbers with a normal distribution:</p>
<pre class="codesplit" data-code-language="javascript">function draw() {
// Ask for a Gaussian random number.
let num = randomGaussian();
}</pre>
<div data-type="note">
<h3 id="calculating-mean-and-standard-deviation">Calculating Mean and Standard Deviation</h3>
<p>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.</p>
@ -352,12 +355,6 @@ if (num &#x3C; 0.6) {
</table>
<p>The standard deviation is the square root of the variance: 15.13.</p>
</div>
<p>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.</p>
<p>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 <code>randomGaussian()</code> function takes care of the math and returns random numbers with a normal distribution:</p>
<pre class="codesplit" data-code-language="javascript">function draw() {
// Ask for a Gaussian random number.
let num = randomGaussian();
}</pre>
<p>What next? What if, for example, the goal is to assign the x-position of a shape drawn?</p>
<p>By default, the <code>randomGaussian()</code> 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 <strong>standard normal distribution</strong>. 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 <code>randomGaussian()</code> function two arguments: the mean followed by the standard deviation.</p>
<div data-type="example">

12
content/02_forces.html
View file

@ -275,7 +275,7 @@ if (mouseIsPressed) {
}
}
}</pre>
<p>Now that the class is written, I can create more than one <code>Mover</code> object:</p>
<p>Now that the class is written, I can create more than one <code>Mover</code> object.</p>
<pre class="codesplit" data-code-language="javascript">let moverA = new Mover();
let moverB = new Mover();</pre>
<p>But there’s an issue. Look again at the <code>Mover</code> object’s constructor:</p>
@ -380,8 +380,8 @@ moverB.applyForce(gravityB);</pre>
<li><strong>When symbols are placed next to each other, this typically means multiply them.</strong> The right side of the friction formula has four elements: –, <em>μ</em>, <em>N</em>, and <span data-type="equation">\hat{v}</span>. They should be multiplied together, reading the formula as <span data-type="equation">\vec{f} = -1 \times \mu \times N \times \hat{v}</span>.</li>
</ul>
</div>
<p>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:</p>
<div class="avoid-break">
<p>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:</p>
<ol>
<li>Understanding the concept behind a force</li>
<li>Deconstructing the force’s formula into two parts:
@ -397,10 +397,6 @@ moverB.applyForce(gravityB);</pre>
<h3 id="friction">Friction</h3>
<p>Let’s begin with friction and follow the preceding steps. Whenever two surfaces come into contact, they experience <strong>friction</strong>. Friction is a <strong>dissipative force</strong>, meaning it causes the kinetic energy of an object to be converted into another form, giving the impression of loss, or dissipation.</p>
<p>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.</p>
<figure>
<img src="images/02_forces/02_forces_4.png" alt="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.">
<figcaption>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.</figcaption>
</figure>
<p>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 <em>friction points in the opposite direction of velocity.</em> In fact, that’s the part of the formula that says <span data-type="equation">-1 \times \hat{v}</span>, or –1 times the velocity unit vector. In p5.js, this would mean taking an object’s velocity vector and multiplying it by <code>-1</code>:</p>
<pre class="codesplit" data-code-language="javascript">let friction = this.velocity.copy();
friction.normalize();
@ -408,6 +404,10 @@ friction.normalize();
// (a unit vector in the opposite direction of velocity).
friction.mult(-1);</pre>
<p>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.</p>
<figure>
<img src="images/02_forces/02_forces_4.png" alt="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.">
<figcaption>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.</figcaption>
</figure>
<p>According to the formula, the magnitude is <span data-type="equation">\mu \times N</span>. The Greek letter <em>mu</em> (<span data-type="equation">\mu</span>, pronounced <em>mew</em>) is used here to describe the <strong>coefficient of friction</strong>. 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:</p>
<pre class="codesplit" data-code-language="javascript">let c = 0.01;</pre>
<p>Now for the second part. <em>N</em> refers to the <strong>normal force</strong>, 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.</p>