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

[Notion] Update docs

content/00_randomness.html

@@ -605,7 +605,7 @@ <h3 id="two-dimensional-noise">Two-Dimensional Noise</h3>
   <h3 id="noise-detail">Noise Detail</h3>
   <p><a href="https://p5js.org/reference/#/p5/noise">The p5.js noise reference explains that noise is calculated over several octaves</a>. Calling the <a href="https://p5js.org/reference/#/p5/noiseDetail"><code>noiseDetail()</code></a> function changes both the number of octaves and their importance relative to one another. This, in turn, changes the quality of the noise values produced.</p>
 </div>
-<p>If you wanted to color every pixel of a canvas randomly using the <code>random()</code> function, you would need a nested loop to cycle through the rows and columns of pixels and pick a random brightness for each. Note that in p5, the pixels are arranged in an array with four spots for each: red, green, blue, and alpha. <a href="https://thecodingtrain.com/pixels">For details, see </a><a href="https://thecodingtrain.com/pixels">the pixel array video in the “Pixels" track on the Coding Train website</a>.</p>
+<p>If you wanted to color every pixel of a canvas randomly using the <code>random()</code> function, you would need a nested loop to cycle through the rows and columns of pixels and pick a random brightness for each. Note that in p5, the pixels are arranged in an array with four spots for each: red, green, blue, and alpha. For details, see <a href="https://thecodingtrain.com/pixels">the pixel array video in the “Pixels" track on the Coding Train website</a>.</p>
 <pre class="codesplit" data-code-language="javascript">loadPixels();
 for (let x = 0; x &#x3C; width; x++) {
   for (let y = 0; y &#x3C; height; y++) {

content/02_forces.html

@@ -998,7 +998,7 @@ <h3 id="example-28-two-body-attraction">Example 2.8: Two-Body Attraction</h3>
 <p>Example 2.8 could be improved by refactoring the code to include constructor arguments that assign the body velocities. For now, however, this approach serves as a quick way to experiment with patterns based on various initial positions and velocities.</p>
 <div data-type="exercise">
   <h3 id="exercise-214">Exercise 2.14</h3>
-  <p>The paper “Classification of Symmetry Groups for Planar <a href="https://www.cambridge.org/core/journals/forum-of-mathematics-sigma/article/classification-of-symmetry-groups-for-planar-nbody-choreographies/710D0EC787DED736B64A94D0E5CD01E1"><em>n</em></a>-Body Choreographies” by James Montaldi and Katrina Steckles (2013) explores <em>choreographic</em> solutions to the <em>n</em>-body problem (defined as periodic motions of bodies following one another at regular intervals). Educator and artist Dan Gries created <a href="https://dangries.com/rectangleworld/demos/nBody">an interactive demonstration of these choreographies</a>. Try adding a third (or more!) body to Example 2.8 and experiment with setting initial positions and velocities. What choreographies can you achieve?</p>
+  <p>The paper <a href="https://www.cambridge.org/core/journals/forum-of-mathematics-sigma/article/classification-of-symmetry-groups-for-planar-nbody-choreographies/710D0EC787DED736B64A94D0E5CD01E1">“Classification of Symmetry Groups for Planar </a><a href="https://www.cambridge.org/core/journals/forum-of-mathematics-sigma/article/classification-of-symmetry-groups-for-planar-nbody-choreographies/710D0EC787DED736B64A94D0E5CD01E1"><em>n</em></a><a href="https://www.cambridge.org/core/journals/forum-of-mathematics-sigma/article/classification-of-symmetry-groups-for-planar-nbody-choreographies/710D0EC787DED736B64A94D0E5CD01E1">-Body Choreographies”</a> by James Montaldi and Katrina Steckles (2013) explores <em>choreographic</em> solutions to the <em>n</em>-body problem (defined as periodic motions of bodies following one another at regular intervals). Educator and artist Dan Gries created <a href="https://dangries.com/rectangleworld/demos/nBody">an interactive demonstration of these choreographies</a>. Try adding a third (or more!) body to Example 2.8 and experiment with setting initial positions and velocities. What choreographies can you achieve?</p>
 </div>
 <p>I’m now ready to move on to an example with <em>n</em> bodies by incorporating an array:</p>
 <pre class="codesplit" data-code-language="javascript">// Start with an empty array.

content/03_oscillation.html

@@ -888,21 +888,21 @@ <h3 id="exercise-314">Exercise 3.14</h3>
   <p>Create a system of multiple bobs and spring connections. How about connecting a bob to another bob with no fixed anchor?</p>
 </div>
 <h2 id="the-pendulum">The Pendulum</h2>
-<p>You might have noticed that in Example 3.10’s spring code, I never once used sine or cosine. Before you write off all this trigonometry stuff as a tangent, however, allow me to show an example of how it all fits together. Imagine a bob hanging from an anchor connected by a spring with a fully rigid connection that can neither be compressed nor extended. This idealized scenario describes a pendulum and provides an excellent opportunity to practice combining all that you’ve learned about forces and trigonometry.</p>
 <div class="half-width-right">
   <figure>
     <img src="images/03_oscillation/03_oscillation_15.png" alt="Figure 3.18: A pendulum with a pivot, arm, and bob">
     <figcaption>Figure 3.18: A pendulum with a pivot, arm, and bob</figcaption>
   </figure>
 </div>
+<p>You might have noticed that in Example 3.10’s spring code, I never once used sine or cosine. Before you write off all this trigonometry stuff as a tangent, however, allow me to show an example of how it all fits together. Imagine a bob hanging from an anchor connected by a spring with a fully rigid connection that can neither be compressed nor extended. This idealized scenario describes a pendulum and provides an excellent opportunity to practice combining all that you’ve learned about forces and trigonometry.</p>
 <p>A <strong>pendulum</strong> is a bob suspended by an arm from a pivot (previously called the <em>anchor</em> in the spring). When the pendulum is at rest, it hangs straight down, as in Figure 3.18. If you lift up the pendulum at an angle from its resting state and then release it, however, it starts to swing back and forth, tracing the shape of an arc. A real-world pendulum would live in a 3D space, but I’m going to look at a simpler scenario: a pendulum in the 2D space of a p5.js canvas. Figure 3.19 shows the pendulum in a nonresting position and adds the forces at play: gravity and tension.</p>
+<p>When the pendulum swings, its arm and bob are essentially rotating around the fixed point of the pivot. If no arm connected the bob and the pivot, the bob would simply fall to the ground under the influence of gravity. Obviously, that isn’t what happens. Instead, the fixed length of the arm creates the second force—tension. However, I’m not going to work with this scenario according to these forces, at least not in the way I approached the spring scenario.</p>
 <div class="half-width-right">
   <figure>
     <img src="images/03_oscillation/03_oscillation_16.png" alt="Figure 3.19: A pendulum showing \theta as angle relative to its resting position">
     <figcaption>Figure 3.19: A pendulum showing <span data-type="equation">\theta</span> as angle relative to its resting position</figcaption>
   </figure>
 </div>
-<p>When the pendulum swings, its arm and bob are essentially rotating around the fixed point of the pivot. If no arm connected the bob and the pivot, the bob would simply fall to the ground under the influence of gravity. Obviously, that isn’t what happens. Instead, the fixed length of the arm creates the second force—tension. However, I’m not going to work with this scenario according to these forces, at least not in the way I approached the spring scenario.</p>
 <p>Instead of using <em>linear</em> acceleration and velocity, I’m going to describe the motion of the pendulum in terms of <em>angular</em> acceleration and <em>angular </em>velocity, which refer to the change of the arm’s angle <span data-type="equation">\theta</span> relative to the pendulum’s resting position. I should first warn you, especially if you’re a seasoned physicist, that I’m going to conveniently ignore several important concepts here: conservation of energy, momentum, centripetal force, and more. This isn’t intended to be a comprehensive description of pendulum physics. My goal is to offer you an opportunity to practice your new skills in trigonometry and further explore the relationship between forces and angles through a concrete example.</p>
 <p>To calculate the pendulum’s angular acceleration, I’m going to use Newton’s second law of motion but with a little trigonometric twist. Take a look back at Figure 3.19 and tilt your head so that the pendulum’s arm becomes the vertical axis. The force of gravity suddenly points askew, a little to the left—it’s at an angle with respect to your tilted head. If this is starting to hurt your neck, don’t worry. I’ll redraw the tilted figure and relabel the forces <span data-type="equation">F_g</span> for gravity and <span data-type="equation">T</span> for tension (Figure 3.20, left).</p>
 <figure>
@@ -977,7 +977,7 @@ <h2 id="the-pendulum">The Pendulum</h2>
   </figure>
 </div>
 <p>Note that the acceleration calculation now includes a multiplication by –1. When the pendulum is to the right of its resting position, the angle is positive, and so the sine of the angle is also positive. However, gravity should pull the bob back toward the resting position. Conversely, when the pendulum is to the left of its resting position, the angle is negative, and so its sine is negative too. In this case, the pulling force should be positive. Multiplying by –1 is necessary in both scenarios.</p>
-<p>Next, I need a <code>show()</code> method to draw the pendulum on the canvas. But where exactly should I draw it? How do I calculate the x- and y-coordinates (Cartesian!) for both the pendulum’s pivot point (let’s call it <code>pivot</code>) and bob position (let’s call it <code>bob</code>)? This may be getting a little tiresome, but the answer, yet again, is trigonometry, as shown in Figure 3.22.</p>
+<p>Next, I need a <code>show()</code> method to draw the pendulum on the canvas. But where exactly should I draw it? How do I calculate the x- and y-coordinates (Cartesian!) for both the pendulum’s pivot point (let’s call it <code>pivot</code>) and bob position (let’s call it <code>bob</code>)? This may be getting a little tiresome, but the answer, yet again, is trigonometry, as shown in Figure 3.19.</p>
 <p>First, I’ll need to add a <code>this.pivot</code> property to the constructor to specify where to draw the pendulum on the canvas:</p>
 <pre class="codesplit" data-code-language="javascript">this.pivot = createVector(100, 10);</pre>
 <p>I know the bob should be a set distance away from the pivot, as determined by the arm length. That’s my variable <code>r</code>, which I’ll set now:</p>

content/04_particles.html

@@ -451,7 +451,7 @@ <h2 id="a-system-of-emitters">A System of Emitters</h2>
 <p>You click the mouse and generate a particle system at the mouse’s position (Figure 4.3).</p>
 <figure>
   <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/GEO-ZFcf_" data-example-path="examples/04_particles/4_4_emitters_1"><img src="examples/04_particles/4_4_emitters_1/screenshot.png"></div>
-  <figcaption></figcaption>
+  <figcaption>Figure 4.3 Adding one particle system</figcaption>
 </figure>
 <p>You keep clicking the mouse. Each time, another particle system springs up where you clicked (Figure 4.4).</p>
 <figure>

content/05_steering.html

@@ -235,13 +235,13 @@ <h3 id="the-arrive-behavior">The Arrive Behavior</h3>
   <li>I want to go as fast as possible toward the target.</li>
   <li>and so on . . .</li>
 </ul>
-<p>The vehicle is so gosh darn excited about getting to the target that it doesn’t bother to make any intelligent decisions about its speed. No matter the distance to the target, it always wants to go as fast as possible. When the vehicle is very close, it will therefore end up overshooting the target (see Figure 5.6, top).</p>
 <div class="half-width-right">
   <figure>
     <img src="images/05_steering/05_steering_7.png" alt="Figure 5.6: The top vehicle has a desired velocity at maximum speed and will overshoot the target. The bottom vehicle illustrates scaling the desired velocity according to the distance from the target. (While I encourage you to continue thinking about the vehicle as a cute, bug-like creature, from this point it’s drawn as a triangle to keep things simple.)">
     <figcaption>Figure 5.6: The top vehicle has a desired velocity at maximum speed and will overshoot the target. The bottom vehicle illustrates scaling the desired velocity according to the distance from the target. (While I encourage you to continue thinking about the vehicle as a cute, bug-like creature, from this point it’s drawn as a triangle to keep things simple.)</figcaption>
   </figure>
 </div>
+<p>The vehicle is so gosh darn excited about getting to the target that it doesn’t bother to make any intelligent decisions about its speed. No matter the distance to the target, it always wants to go as fast as possible. When the vehicle is very close, it will therefore end up overshooting the target (see Figure 5.6, top).</p>
 <p>In some cases, this is the desired behavior. (Consider a puppy going after its favorite toy: it’s not slowing down, no matter how close it gets!) However, in many other cases (a car pulling into a parking spot, a bee landing on a flower), the vehicle’s thought process needs to consider its speed relative to the distance from its target (see Figure 5.6, bottom). For example:</p>
 <ul>
   <li>I’m very far away. I want to go as fast as possible toward the target.</li>