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

[Notion] Updating Notion based on publisher's notes

content/01_vectors.html

@@ -601,7 +601,7 @@ <h3 id="example-15-vector-magnitude">Example 1.5: Vector Magnitude</h3>
   let center = createVector(width / 2, height / 2);
   mouse.sub(center);
 
-  // The magnitude (that is, length) of a vector can be accessed via the `mag()` function.  Here it is used as the width of a rectangle drawn at the top of the window.
+  // The magnitude (that is, length) of a vector can be accessed via the <code>mag()</code> function.  Here it is used as the width of a rectangle drawn at the top of the window.
   let m = mouse.mag();
   fill(0);
   rect(0, 0, m, 10);

content/03_oscillation.html

@@ -836,14 +836,14 @@ <h3 id="example-310-a-spring-connection">Example 3.10: A Spring Connection</h3>
   connect(bob) {
     // Get a vector pointing from the anchor to the bob position.
     <strong>let force = p5.Vector.sub(bob.position, this.anchor);</strong>
-    // Calculate the displacement between distance and rest length. I’ll use the variable name “stretch” instead of “x” to be more descriptive. 
+    // Calculate the displacement between distance and rest length. I’ll use the variable name <code>stretch</code> instead of <code>x</code> to be more descriptive. 
     <strong>let currentLength = force.mag();
     let stretch = currentLength - this.restLength;</strong>
 
     // Direction and magnitude together!
     <strong>force.setMag(-1 * this.k * stretch);</strong>
 
-    // Call applyForce() right here!
+    // Call <code>applyForce()</code> right here!
     bob.applyForce(force);
   }
 

content/05_steering.html

@@ -963,7 +963,11 @@ <h2 id="complex-systems">Complex Systems</h2>
     Stated more evocatively, the theory is that a single butterfly flapping its wings on the other side of the world could cause a massive weather shift and ruin your weekend at the beach. It‘s called <em>nonlinear</em> because there isn’t a linear relationship between a change in initial conditions and a change in outcome. A small change in initial conditions can have a massive effect on the outcome. Nonlinear systems are a superset of chaotic systems. In <a href="/cellular-automata#">Chapter 7</a>, you’ll see how even in a system of many 0s and 1s, if you change just one bit, the result will be completely different.
   </li>
   <li><strong>Competition and cooperation:</strong> One ingredient that often makes a complex system tick is the presence of both competition and cooperation among the elements. The upcoming flocking system will have three rules: alignment, cohesion, and separation. Alignment and cohesion will ask the elements to “cooperate” by trying to stay together and move together. Separation, however, will ask the elements to “compete” for space. When the time comes, try taking out just the cooperation or just the competition, and you’ll see how the system loses its complexity. Competition and cooperation are found together in living complex systems, but not in nonliving complex systems like the weather.</li>
-  <li><strong>Feedback:</strong> Complex systems often include a loop that feeds the output of the system back into the system to influence its behavior in a positive or negative direction. Let’s say you decide to take public transportation to work each day because it’s the most reliable and cost-effective solution, and you’re put off by the traffic congestion and environmental impact of driving. You aren’t alone; others turn to public transportation too. The system grows more efficient and attractive, serving more people with the same resources, and meanwhile, vehicle traffic is reduced. Over time, however, the system may struggle to accommodate the rising demand, leading to overcrowding, delays, and increased fares to fund infrastructure improvements. As a result, you and others start to switch back to driving, thereby increasing traffic congestion once again and reducing public transport’s efficiency. As traffic worsens, the funds from increased fares are (hopefully) used to improve public transport infrastructure, making it more appealing once again. In this way, the cost and efficiency of public transportation are both the input of the system (determining whether you choose to use it or not) and the output (the degree of traffic congestion and subsequent cost and efficiency). Economic models are just one example of a human complex system. Others include fads and trends, elections, crowds, and traffic flow.</li>
+  <li>
+    <strong>Feedback:</strong> Complex systems often include a loop that feeds the output of the system back into the system to influence its behavior in a positive or negative direction. Let’s say you decide to take public transportation to work each day because it’s the most reliable and cost-effective solution, and you’re put off by the traffic congestion and environmental impact of driving. You aren’t alone; others turn to public transportation too. The system grows more efficient and attractive, serving more people with the same resources, and meanwhile, vehicle traffic is reduced.
+    Over time, however, the system may struggle to accommodate the rising demand, leading to overcrowding, delays, and increased fares to fund infrastructure improvements. As a result, you and others start to switch back to driving, thereby increasing traffic congestion once again and reducing public transport’s efficiency. As traffic worsens, the funds from increased fares are (hopefully) used to improve public transport infrastructure, making it more appealing once again.
+    In this way, the cost and efficiency of public transportation are both the input of the system (determining whether you choose to use it or not) and the output (the degree of traffic congestion and subsequent cost and efficiency). Economic models are just one example of a human complex system. Others include fads and trends, elections, crowds, and traffic flow.
+  </li>
 </ul>
 <p>Complexity will serve as a key theme for much of the remainder of the book. In this section, I’ll begin by introducing an additional feature to the <code>Vehicle</code> class: the ability to perceive neighboring vehicles. This enhancement will pave the way for a culminating example of a complex system, in which the interplay of simple individual behaviors results in an emergent behavior: flocking<em>.</em></p>
 <h3 id="implementing-group-behaviors-or-lets-not-run-into-each-other">Implementing Group Behaviors (or: Let’s Not Run Into Each Other)</h3>

content/07_ca.html

@@ -317,7 +317,7 @@ <h3 id="drawing-an-elementary-ca">Drawing an Elementary CA</h3>
 </figure>
 <p>First, this visual interpretation of the data is completely literal. It’s useful for demonstrating the algorithms and results of Wolfram’s elementary CA, but it shouldn’t necessarily drive your own personal work. You’re not likely building a project that needs precisely this algorithm with this visual style. So while learning to draw a CA in this way will help you understand and implement CA systems, this skill should exist only as a foundation.</p>
 <p>Second, the fact that a 1D CA is visualized with a 2D image can be misleading. It’s very important to remember that this is <em>not</em> a 2D CA. I’m simply choosing to show a history of all the generations stacked vertically. This technique creates a 2D image out of many instances of 1D data, but the system itself is 1D. Later, I’ll show you an actual 2D CA (the Game of Life), and I’ll cover how to visualize such a system.</p>
-<p>The good news is that drawing an elementary CA isn’t particularly difficult. I’ll begin by rendering a single generation. Let’s say each cell should be a 10 by 10 square:</p>
+<p>The good news is that drawing an elementary CA isn’t particularly difficult. I’ll begin by rendering a single generation. Let’s say each cell should be a 10<span data-type="equation">\times</span>10 square:</p>
 <pre class="codesplit" data-code-language="javascript">let w = 10;</pre>
 <p>Assuming the canvas is 640 pixels wide, the CA will have 64 cells. Of course, I can calculate this value dynamically when I initialize the <code>cells</code> array in <code>setup()</code>:</p>
 <pre class="codesplit" data-code-language="javascript">//{!1} How many cells fit across, given a certain width
@@ -558,7 +558,7 @@ <h3 id="the-implementation">The Implementation</h3>
 if (board[i - 1][j + 1] === 1) sum++;
 if (board[i    ][j + 1] === 1) sum++;
 if (board[i + 1][j + 1] === 1) sum++;</pre>
-<p>Just as with the Wolfram CA, I find myself writing out a bunch of <code>if</code> statements. This is another situation where, for teaching purposes, it’s useful and clear to write the code this way, explicitly stating every step (each time a neighbor has a state of 1, the counter increases). Nevertheless, it’s a bit silly to say, “If the cell state equals 1, add 1 to a counter” when I could instead just say, “Add every cell state to a counter.” After all, if the state can be only 0 or 1, the sum of all the neighbors’ states will yield the total number of live cells. Since the neighbors are arranged in a mini 3 by 3 grid, I can introduce another nested loop to compute the sum more efficiently:</p>
+<p>Just as with the Wolfram CA, I find myself writing out a bunch of <code>if</code> statements. This is another situation where, for teaching purposes, it’s useful and clear to write the code this way, explicitly stating every step (each time a neighbor has a state of 1, the counter increases). Nevertheless, it’s a bit silly to say, “If the cell state equals 1, add 1 to a counter” when I could instead just say, “Add every cell state to a counter.” After all, if the state can be only 0 or 1, the sum of all the neighbors’ states will yield the total number of live cells. Since the neighbors are arranged in a mini 3<span data-type="equation">\times</span>3 grid, I can introduce another nested loop to compute the sum more efficiently:</p>
 <pre class="codesplit" data-code-language="javascript">let sum = 0;
 
 //{!2} Use k and l as the counters since i and j are already used!

content/08_fractals.html

@@ -47,7 +47,7 @@ <h2 id="what-is-a-fractal">What Is a Fractal?</h2>
   <img src="images/08_fractals/08_fractals_5.png" alt="Figure 8.4: Two coastlines">
   <figcaption>Figure 8.4: Two coastlines</figcaption>
 </figure>
-<p>The absence of a scale in these illustrations is no accident. Am I showing the entire coastline or just a small portion of it? There’s no way for you to know without a scale reference because coastlines, as fractals, look essentially the same at any scale. (Incidentally, coastline B shows an approximately 3X magnified view of a specific section of coastline A. I’ve added the scales in Figure 8.5.)</p>
+<p>The absence of a scale in these illustrations is no accident. Am I showing the entire coastline or just a small portion of it? There’s no way for you to know without a scale reference because coastlines, as fractals, look essentially the same at any scale. (Incidentally, coastline B shows an approximately 3<span data-type="equation">\times</span> magnified view of a specific section of coastline A. I’ve added the scales in Figure 8.5.)</p>
 <figure>
   <img src="images/08_fractals/08_fractals_6.png" alt="Figure 8.5: Two coastlines, with scale">
   <figcaption>Figure 8.5: Two coastlines, with scale</figcaption>
@@ -653,24 +653,24 @@ <h2 id="l-systems">L-systems</h2>
 <ul>
   <li><strong>Alphabet:</strong> An L-system’s alphabet comprises the valid characters that can be included. For example, I could say the alphabet is ABC, meaning that any valid “sentence” (a string of characters) in an L-system can include only these three characters.</li>
   <li><strong>Axiom:</strong> The axiom is a sentence (created with characters from the alphabet) that describes the initial state of the system. For example, with the alphabet ABC, a possible axiom could be AAA, or B, or ACBAB.</li>
-  <li><strong>Rules:</strong> The production rules of an L-system describe ways of transforming the sentence. The rules are applied recursively, starting with the axiom, generating new sentences over and over again. An L-system rule includes two sentences, a <em>predecessor</em> and a <em>successor</em>. For example, the rule A —> AB means that wherever an A (the predecessor) occurs in a sentence, it should be replaced with AB (the successor) in the next generation.</li>
+  <li><strong>Rules:</strong> The production rules of an L-system describe ways of transforming the sentence. The rules are applied recursively, starting with the axiom, generating new sentences over and over again. An L-system rule includes two sentences, a <em>predecessor</em> and a <em>successor</em>. For example, the rule A → AB means that wherever an A (the predecessor) occurs in a sentence, it should be replaced with AB (the successor) in the next generation.</li>
 </ul>
 <p>I’ll begin with a simple L-system. In fact, it’s Lindenmayer’s original L-system, which models the growth of algae. Here are its components:</p>
 <table>
   <tbody>
     <tr>
       <td>Alphabet</td>
-      <td><span data-type="equation">A</span>, <span data-type="equation">B</span></td>
+      <td>A, B</td>
     </tr>
     <tr>
       <td>Axiom</td>
-      <td><span data-type="equation">A</span></td>
+      <td>A</td>
     </tr>
     <tr>
       <td>Rules</td>
       <td>
-        <span data-type="equation">A→AB</span>
-        <span data-type="equation">B→A</span>
+        A → AB
+        B → A
       </td>
     </tr>
   </tbody>
@@ -746,17 +746,17 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
   <tbody>
     <tr>
       <td>Alphabet</td>
-      <td><span data-type="equation">A</span>, <span data-type="equation">B</span></td>
+      <td>A, B</td>
     </tr>
     <tr>
       <td>Axiom</td>
-      <td><span data-type="equation">A</span></td>
+      <td>A</td>
     </tr>
     <tr>
       <td>Rules</td>
       <td>
-        <span data-type="equation">A→ABA</span>
-        <span data-type="equation">B→BBB</span>
+        A → ABA
+        B → BBB
       </td>
     </tr>
   </tbody>
@@ -766,31 +766,31 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
   <tbody>
     <tr>
       <td>Generation 0</td>
-      <td><span data-type="equation">A</span></td>
+      <td>A</td>
     </tr>
     <tr>
       <td>Generation 1</td>
-      <td><span data-type="equation">ABA</span></td>
+      <td>ABA</td>
     </tr>
     <tr>
       <td>Generation 2</td>
-      <td><span data-type="equation">ABABBBABA</span></td>
+      <td>ABABBBABA</td>
     </tr>
     <tr>
       <td>Generation 3</td>
-      <td><span data-type="equation">ABABBBABABBBBBBBBBABABBBABA</span></td>
+      <td>ABABBBABABBBBBBBBBABABBBABA</td>
     </tr>
   </tbody>
 </table>
 <p>To turn this into a drawing, I’ll translate the system’s alphabet in the following way:</p>
 <table>
   <tbody>
     <tr>
-      <td><span data-type="equation">A</span></td>
+      <td>A</td>
       <td>Draw a line forward.</td>
     </tr>
     <tr>
-      <td><span data-type="equation">B</span></td>
+      <td>B</td>
       <td>Move forward (without drawing a line).</td>
     </tr>
   </tbody>
@@ -805,27 +805,27 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
 <table>
   <tbody>
     <tr>
-      <td><span data-type="equation">F</span></td>
+      <td>F</td>
       <td>Draw a line and move forward.</td>
     </tr>
     <tr>
-      <td><span data-type="equation">G</span></td>
+      <td>G</td>
       <td>Move forward (without drawing a line).</td>
     </tr>
     <tr>
-      <td><span data-type="equation">+</span></td>
+      <td>+</td>
       <td>Turn right.</td>
     </tr>
     <tr>
-      <td><span data-type="equation">-</span></td>
+      <td>–</td>
       <td>Turn left.</td>
     </tr>
     <tr>
-      <td><span data-type="equation">[</span></td>
+      <td>[</td>
       <td>Save current state.</td>
     </tr>
     <tr>
-      <td><span data-type="equation">]</span></td>
+      <td>]</td>
       <td>Restore current state.</td>
     </tr>
   </tbody>
@@ -834,38 +834,38 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
 <table>
   <tbody>
     <tr>
-      <td><span data-type="equation">F</span></td>
+      <td>F</td>
       <td>
         <pre><code>line(0, 0, 0, length);
 translate(0, length);</code></pre>
       </td>
     </tr>
     <tr>
-      <td><span data-type="equation">G</span></td>
+      <td>G</td>
       <td>
         <pre><code>translate(0, length);</code></pre>
       </td>
     </tr>
     <tr>
-      <td><span data-type="equation">+</span></td>
+      <td>+</td>
       <td>
         <pre><code>rotate(angle);</code></pre>
       </td>
     </tr>
     <tr>
-      <td><span data-type="equation">-</span></td>
+      <td>–</td>
       <td>
         <pre><code>rotate(-angle);</code></pre>
       </td>
     </tr>
     <tr>
-      <td><span data-type="equation">[</span></td>
+      <td>[</td>
       <td>
         <pre><code>push();</code></pre>
       </td>
     </tr>
     <tr>
-      <td><span data-type="equation">]</span></td>
+      <td>]</td>
       <td>
         <pre><code>pop();</code></pre>
       </td>
@@ -902,15 +902,15 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
   <tbody>
     <tr>
       <td>Alphabet</td>
-      <td><span data-type="equation">F</span>, <span data-type="equation">G</span>, <span data-type="equation">+</span>, <span data-type="equation">-</span>, <span data-type="equation">[</span> , <span data-type="equation">]</span></td>
+      <td>F, G, +, –, [, ]</td>
     </tr>
     <tr>
       <td>Axiom</td>
-      <td><span data-type="equation">F</span></td>
+      <td>F</td>
     </tr>
     <tr>
       <td>Rules</td>
-      <td><span data-type="equation">F → FF+[+F-F-F]-[-F+F+F]</span></td>
+      <td>F → FF + [+ F – F – F] – [– F + F + F]</td>
     </tr>
   </tbody>
 </table>