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

[Notion] Update docs - more changes for quote source and ecosystem headers

content/00_randomness.html

@@ -4,9 +4,9 @@ <h1 id="chapter-0-randomness">Chapter 0. Randomness</h1>
   <blockquote data-type="epigraph">
     <p>The generation of random numbers is</p>
     <p>too important to be left to chance.</p>
-    <div class="chapter-opening-quote-source —Robert R. Coveyou"></div>
   </blockquote>
 </div>
+<div class="chapter-opening-quote-source —Robert R. Coveyou"></div>
 <div class="chapter-opening-figure">
   <figure>
     <img src="images/00_randomness/00_randomness_1.png" alt="Photo from A Million Random Digits with 100,000 Normal Deviates, RAND Corporation, MR-1418-RC, 2001. As of October 17, 2023: https://www.rand.org/pubs/monograph_reports/MR1418.html">

content/03_oscillation.html

@@ -218,7 +218,7 @@ <h2 id="pointing-in-the-direction-of-movement">Pointing in the Direction of Move
 <p>Think all the way back to Example 1.10, which featured a <code>Mover</code> object accelerating toward the mouse (Figure 3.6).</p>
 <figure>
   <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/gYJHm1EFL" data-example-path="examples/03_oscillation/example_1_10_accelerating_towards_the_mouse"><img src="examples/03_oscillation/example_1_10_accelerating_towards_the_mouse/screenshot.png"></div>
-  <figcaption></figcaption>
+  <figcaption>Figure 3.6: A mover accelerating toward the mouse (from Example 1.10)</figcaption>
 </figure>
 <p>You might notice that almost all the shapes I’ve been drawing so far have been circles. This is convenient for several reasons, one of which is that using circles allows me to avoid the question of rotation. Rotate a circle and, well, it looks exactly the same. Nevertheless, there comes a time in all motion programmers’ lives when they want to move something around onscreen that isn’t shaped like a circle. Perhaps it’s an ant, or a car, or a spaceship. To look realistic, that object should point in its direction of movement.</p>
 <p>When I say “point in its direction of movement,” what I really mean is “rotate according to its velocity vector.” Velocity is a vector, with an x- and y-component, but to rotate in p5.js, you need one number, an angle. Let’s look at the trigonometry diagram once more, this time focused on an object’s velocity vector (Figure 3.7).</p>
@@ -398,7 +398,7 @@ <h2 id="properties-of-oscillation">Properties of Oscillation</h2>
 <p>In a p5.js sketch, you can simulate oscillation by assigning the output of the sine function to an object’s position. I’ll begin with a basic scenario: I want a circle to oscillate between the left side and the right side of a canvas (Figure 3.11).</p>
 <figure>
   <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/O8LMHH-Df" data-example-path="examples/03_oscillation/example_3_5_simple_harmonic_motion"><img src="examples/03_oscillation/example_3_5_simple_harmonic_motion/screenshot.png"></div>
-  <figcaption></figcaption>
+  <figcaption>Figure 3.11: An oscillating circle</figcaption>
 </figure>
 <p>This pattern of oscillating back and forth around a central point is known as <strong>simple harmonic motion</strong> (or, to be fancier, the periodic sinusoidal oscillation of an object). The code to achieve it is remarkably simple, but before I get into it, I’d like to introduce some of the key terminology related to oscillation (and waves).</p>
 <p>When a moving object exhibits simple harmonic motion, its position (in this case, the x-position) can be expressed as a function of time, with the following two elements:</p>
@@ -589,7 +589,7 @@ <h2 id="waves">Waves</h2>
 <p>Imagine a single circle oscillating up and down according to the sine function. This is the equivalent to simulating a single point along the x-axis of a wave pattern. With a little panache and a <code>for</code> loop, you can animate the entire wave by placing a whole bunch of these oscillating circles next to one another (Figure 3.12).</p>
 <figure>
   <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/qe6oK9F1o" data-example-path="examples/03_oscillation/example_3_9_the_wave"><img src="examples/03_oscillation/example_3_9_the_wave/screenshot.png"></div>
-  <figcaption></figcaption>
+  <figcaption>Figure 3.12: Animating the sine wave with oscillating circles</figcaption>
 </figure>
 <p>You could use this wavy pattern to design the body or appendages of a creature, or to simulate a soft surface (such as water). Let’s dive into how the code for this sketch works.</p>
 <p>Here, the same concepts of amplitude (the wave’s height) and period (the wave’s duration) come into play. However, when drawing the entire wave, the term <em>period</em> shifts its meaning from representing time to describing the width (in pixels) of a full wave cycle. The term for the spatial period (as opposed to the temporal period) of a wave is <strong>wavelength</strong>—the distance a wave travels to complete one full oscillation cycle. And just as with the previous oscillation example, you have the choice of computing the wave pattern according to a precise wavelength or by arbitrarily incrementing the angle value (<em>delta angle</em>) for each spot on the wave.</p>
@@ -968,13 +968,13 @@ <h2 id="the-pendulum">The Pendulum</h2>
     // Increment the angle.
     this.angle += this.angleVelocity;
   }</pre>
-<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>
 <div class="half-width-right">
   <figure>
     <img src="images/03_oscillation/03_oscillation_19.png" alt="Figure 3.19: The bob position relative to the pivot in polar and Cartesian coordinates">
     <figcaption>Figure 3.19: The bob position relative to the pivot in polar and Cartesian coordinates</figcaption>
   </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>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>
@@ -1076,7 +1076,7 @@ <h3 id="exercise-317">Exercise 3.17</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-4">The Ecosystem Project</h3>
-  <p>Step 3 Exercise:</p>
+  <p><strong>Step 3 Exercise</strong></p>
   <p>Take one of your creatures and incorporate oscillation into its motion. You can use the <code>Oscillator</code> class from Example 3.7 as a model. The <code>Oscillator</code> object, however, oscillates around a single point (the middle of the window). Try oscillating around a moving point.</p>
   <p>In other words, design a creature that moves around the screen according to position, velocity, and acceleration. But that creature isn’t just a static shape; it’s an oscillating body. Consider tying the speed of oscillation to the speed of motion. Think of a butterfly’s flapping wings or the legs of an insect. Can you make it appear that the creature’s internal mechanics (oscillation) drive its locomotion? See the book’s website for an additional example combining attraction from <a href="/force#">Chapter 2</a> with oscillation.</p>
   <figure>