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

[Notion] Update docs

content/00_5_introduction.html

@@ -131,6 +131,7 @@ <h3 id="example--example-title">Example #.#: Example Title</h3>
   //{!1} Draw a random circle each time through <code>draw()</code>.
   circle(random(width), random(height), 16);
 }</pre>
+<div class="avoid-break"></div>
 <p>The examples are numbered sequentially within each chapter to help you find the corresponding code online. In the printed version of the book, you’ll see a screenshot right below the example title. The online version has the running sketch embedded right there on the page. For animated examples (which are almost all of them), the screenshots will often show a “trail” of motion. This effect was achieved by adding transparency to the <code>background(255, 10)</code> function, though the accompanying code won’t include that enhancement.</p>
 <p>Below the example, you’ll find the code, but it’s not always the <em>complete </em>code. Since many examples are quite long and span multiple files, I make my best effort to include a snippet that highlights the main aspects of the example or whatever new components are being introduced that weren’t already discussed earlier in the section.</p>
 <p>You can find the full version of the code on the book’s website. There, you can interact with, modify, and experiment with the code in the <a href="https://editor.p5js.org/">p5.js Web Editor</a>. Additionally, everything is included in the book’s GitHub repository. Here are links for all the materials:</p>

content/01_vectors.html

@@ -609,6 +609,7 @@ <h3 id="example-15-vector-magnitude">Example 1.5: Vector Magnitude</h3>
 }</pre>
 <p>Notice that the magnitude (length) of a vector is always positive, even if the vector’s components are negative.</p>
 <h2 id="normalizing-vectors">Normalizing Vectors</h2>
+<div data-type="video-link" data-title="A Unit Vector" href="https://www.youtube.com/watch?v=ttz05d8DSOs"></div>
 <div class="half-width-right">
   <figure>
     <img src="images/01_vectors/01_vectors_14.png" alt="Figure 1.13: When a vector is normalized, it points in the same direction but has been resized to a unit length of 1.">
@@ -793,6 +794,7 @@ <h3 id="example-17-motion-101-velocity">Example 1.7: Motion 101 (Velocity)</h3>
 <p>You may have also noticed in the <code>Mover</code> class that I’m setting the initial position and velocity directly within the constructor, without using any arguments. While this approach keeps the code simple for now, I’ll explore the benefits of adding arguments to the constructor in <a href="/forces#section-forces">Chapter 2</a>.</p>
 <p>At this point, you hopefully feel comfortable with two concepts: (1) what a vector is and (2) how to use vectors inside an object to keep track of its position and movement. This is an excellent first step and deserves a mild round of applause. Before standing ovations are in order, however, you need to make one more, somewhat bigger step forward. After all, watching the Motion 101 example is fairly boring. The circle never speeds up, never slows down, and never turns. For more sophisticated motion—the kind of motion that appears in the world around us—one more vector needs to be added to the class: <code>acceleration</code>.</p>
 <h2 id="acceleration">Acceleration</h2>
+<div data-type="video-link" data-title="Acceleration Vector" href="https://www.youtube.com/watch?time_continue=1&#x26;v=T84AWnntxZA&#x26;embeds_referring_origin=https://thecodingtrain.com"></div>
 <p><strong>Acceleration</strong> is the<em> </em>rate of change of velocity. Think about that definition for a moment. Is it a new concept? Not really. Earlier I defined velocity as<em> </em>the rate of change of position, so in essence I’m developing a trickle-down effect. Acceleration affects velocity, which in turn affects position. (To provide some brief foreshadowing, this point will become even more crucial in the next chapter, when I show how forces like friction affect acceleration, which affects velocity, which affects position.) In code, this trickle-down effect reads like this:</p>
 <pre class="codesplit" data-code-language="javascript">velocity.add(acceleration);
 position.add(velocity);</pre>

content/02_forces.html

@@ -20,6 +20,7 @@ <h3 id="calder-installation-at-the-new-gallery-charles-hayden-memorial-library-m
 <p>In the final example of Chapter 1, I demonstrated how to calculate a dynamic acceleration based on a vector pointing from a circle on the canvas to the mouse position. The resulting motion resembled a magnetic attraction between shape and mouse, as if a <em>force</em> was pulling the circle in toward the mouse. In this chapter, I’ll detail the concept of a force and its relationship to acceleration. The goal, by the end of this chapter, is to build a simple physics engine and understand how objects move around a canvas, responding to a variety of environmental forces.</p>
 <p>A <strong>physics engine </strong>is a computer program (or code library) that simulates the behavior of objects in a physical environment. With a p5.js sketch, the objects are 2D shapes, and the environment is a rectangular canvas. Physics engines can be developed to be highly precise (requiring high-performance computing) or real time (using simple and fast algorithms). This chapter focuses on building a rudimentary physics engine, with an emphasis on speed and ease of understanding.</p>
 <h2 id="forces-and-newtons-laws-of-motion">Forces and Newton’s Laws of Motion</h2>
+<div data-type="video-link" data-title="Simulating Forces: Gravity and Wind" href="https://www.youtube.com/watch?time_continue=10&#x26;v=Uibl0UE4VH8&#x26;embeds_referring_origin=https://thecodingtrain.com"></div>
 <p>Let’s begin by taking a conceptual look at what it means to be a force in the real world. Just like the word <em>vector</em>, the term <em>force</em> can have a variety of meanings. It can indicate a powerful physical intensity, as in “They pushed the boulder with great force,” or a powerful influence, as in “They’re a force to be reckoned with!” The definition of <strong>force</strong> that I’m interested in for this chapter is more formal and comes from Sir Isaac Newton’s three laws of motion:</p>
 <p><span class="highlight">A force is a vector that causes an object with mass to accelerate.</span></p>
 <p>Hopefully, you recognize the first part of the definition: <em>a force is a vector</em>. Thank goodness you just spent a whole chapter learning what vectors are and how to program with them! I’ll start from there by explaining how Newton’s three laws of motion relate to what you already know about vectors; then I’ll illustrate the rest of the force definition as I go.</p>
@@ -129,6 +130,7 @@ <h3 id="exercise-21">Exercise 2.1</h3>
   <p>Using forces, simulate a helium-filled balloon floating upward and bouncing off the top of a window. Can you add a wind force that changes over time, perhaps according to Perlin noise?</p>
 </div>
 <h2 id="factoring-in-mass">Factoring In Mass</h2>
+<div data-type="video-link" data-title="Mass &#x26; Acceleration" href="https://www.youtube.com/watch?v=L7CECWLdTmo&#x26;t=175s"></div>
 <p>Newton’s second law is really <span data-type="equation">\vec{F} = M \times \vec{A}</span>, not <span data-type="equation">\vec{F} = \vec{A}</span>. How can I incorporate mass into the simulation? To start, it’s as easy as adding a <code>this.mass</code> instance variable to the <code>Mover</code> class, but I need to spend a little more time here because of another impending complication.</p>
 <p>First, though, I’ll add mass:</p>
 <pre class="codesplit" data-code-language="javascript">class Mover {
@@ -369,7 +371,7 @@ <h3 id="example-23-gravity-scaled-by-mass">Example 2.3: Gravity Scaled by Mass</
 moverB.applyForce(gravityB);</pre>
 <p>The objects now fall at the same rate. I’m still basically making up the gravity force by arbitrarily setting it to 0.1, but by scaling the force according to the object’s mass, I’m making it up in a way that’s a little truer to Earth’s actual force of gravitational attraction. Meanwhile, because the strength of the wind force is independent of mass, the smaller circle still accelerates to the right more quickly when the mouse is pressed. (The online code for this example also includes a solution to Exercise 2.4, with the addition of a <code>radius</code> variable in the <code>Mover</code> class.)</p>
 <h2 id="modeling-a-force">Modeling a Force</h2>
-<p>Making up forces will actually get you quite far—after all, I just made up a pretty good approximation of Earth’s gravity. Ultimately, the world of p5.js is an orchestra of pixels, and you’re the conductor, 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 when you find yourself wondering, “But how does it all <em>really</em> work?” That’s when modeling forces, instead of just making them up, enters the picture.</p>
+<p>Making up forces will actually get you quite far—after all, I just made up a pretty good approximation of Earth’s gravity. Ultimately, the world of p5.js is an orchestra of pixels, and you’re the conductor, 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 when you find yourself wondering, “But how does it all <em>really</em> work?” (Hi to Creative Coding NYC) That’s when modeling forces, instead of just making them up, enters the picture.</p>
 <div data-type="note">
   <h3 id="parsing-formulas">Parsing Formulas</h3>
   <p>In a moment, I’m going to write out the formula for friction. This won’t be the first time<br>you’ve seen a formula in this book; I just finished up the discussion of Newton’s second law, <span data-type="equation">\vec{F} = M \times \vec{A}</span> (or force equals mass times acceleration). You hopefully didn’t spend a lot<br>of time worrying about that formula, because it’s just a few characters and symbols. Nevertheless, it’s a scary world out there. Just take a look at the equation for a normal distribution, which I covered (without presenting the formula) in <a href="/random#a-normal-distribution-of-random-numbers" class="page-reference">“A Normal Distribution of Random Numbers”</a>:</p>
@@ -398,6 +400,7 @@ <h3 id="parsing-formulas">Parsing Formulas</h3>
 </div>
 <p>If you can follow these steps with the example forces I’ll provide here, then hopefully when you find yourself googling <em>atomic nuclei weak nuclear force</em> at 3 AM, you’ll have the skills to take what you find and adapt it for p5.js.</p>
 <h3 id="friction">Friction</h3>
+<div data-type="video-link" data-title="Friction Force" href="https://www.youtube.com/watch?v=WBdhAuWS6X8&#x26;embeds_referring_origin=https://thecodingtrain.com"></div>
 <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>
 <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>
@@ -487,6 +490,7 @@ <h3 id="exercise-27">Exercise 2.7</h3>
   <p>Instead of wind, can you add functionality to this example that allows you to toss the circle via mouse interaction?</p>
 </div>
 <h3 id="air-and-fluid-resistance">Air and Fluid Resistance</h3>
+<div data-type="video-link" data-title="Drag Force" href="https://www.youtube.com/watch?v=DxFDgOYEoy8"></div>
 <p>Friction also occurs when a body passes through a liquid or gas. The resulting force has many names, all really meaning the same thing: <em>viscous force</em>, <em>drag force</em>, <em>air resistance</em>, or <em>fluid resistance</em> (see Figure 2.4).</p>
 <p>The effect of a drag force is ultimately the same as the effect in our previous friction examples: the object slows down. The exact behavior and calculation of a drag force is a bit different, however. Here’s the formula:</p>
 <div data-type="equation">\vec{F_d} = - \frac{1}{2}\rho{v}^2 A C_d\hat{v}</div>
@@ -638,6 +642,7 @@ <h3 id="exercise-210">Exercise 2.10</h3>
   <p>In addition to drag being a force in opposition to the velocity vector, a drag force can be perpendicular. Known as <strong>lift-induced drag</strong>, this will cause an airplane with an angled wing to rise in altitude. Try creating a simulation of lift.</p>
 </div>
 <h3 id="gravitational-attraction">Gravitational Attraction</h3>
+<div data-type="video-link" data-title="Gravitational Attraction" href="https://www.youtube.com/watch?v=EpgB3cNhKPM&#x26;embeds_referring_origin=https://thecodingtrain.com"></div>
 <div class="half-width-right">
   <figure>
     <img src="images/02_forces/02_forces_7.png" alt="Figure 2.6: The gravitational force between two bodies is proportional to the mass of those bodies and inversely proportional to the square of the distance between them. ">
@@ -935,6 +940,7 @@ <h3 id="exercise-213">Exercise 2.13</h3>
   <p>This chapter isn’t suggesting that every good p5.js simulation needs to involve gravitational attraction. Rather, you should be thinking creatively about how to design your own rules to drive the behavior of objects, using my approach to simulating gravitational attraction as a model. For example, what happens if you design an attractive force that gets weaker as the objects get closer, and stronger as the objects get farther apart? Or what if you design your attractor to attract faraway objects but repel close ones?</p>
 </div>
 <h2 id="the-n-body-problem">The n-Body Problem</h2>
+<div data-type="video-link" data-title="Mutual Attraction" href="https://www.youtube.com/watch?time_continue=1&#x26;v=GjbKsOkN1Oc&#x26;embeds_referring_origin=https://thecodingtrain.com"></div>
 <p>I started exploring gravitational attraction with a simple scenario, <em>one object attracts another object</em>, then moved on to the slightly more complex <em>one object attracts many objects</em>. A logical next step is to explore what happens when <em>many objects attract many objects</em>!</p>
 <p>To begin, while having separate <code>Mover</code> and <code>Attractor</code> classes has been helpful so far, this distinction is a bit misleading. After all, according to Newton’s third law, all forces occur in pairs: if an attractor attracts a mover, then that mover should also attract the attractor. Instead of two classes here, what I really want is a single type of thing—called, for example, a <code>Body</code>—with every body attracting every other body.</p>
 <p>The scenario I’m describing is commonly referred to as the <strong><em>n</em></strong><strong>-body problem</strong>. It involves solving for the motion of a group of objects that interact via gravitational forces. The <em>two</em>-body problem is a famously solved problem, meaning the motions can be precisely computed with mathematical equations when only two bodies are involved. However, adding one more body turns the <em>two</em>-body problem into a <em>three</em>-body problem, and suddenly no formal solution exists (see Figure 2.10).</p>