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

Chapter 10 edits, breaking out into Chapter 11, testing code snippets issue

content/00_randomness.html

@@ -330,7 +330,7 @@ <h3 id="calculating-mean-and-standard-deviation">Calculating Mean and Standard D
       <tr>
         <td></td>
         <td><strong>Average Variance:</strong></td>
-        <td><span data-type="equation">254.23</span></td>
+        <td><span data-type="equation">228.21</span></td>
       </tr>
     </tbody>
   </table>
@@ -576,7 +576,7 @@ <h3 id="two-dimensional-noise">Two-Dimensional Noise</h3>
   <img src="images/00_randomness/00_randomness_7.png" alt="Figure 0.8: Comparing neighboring Perlin noise values in one (left) and two (right) dimensions. The cells are shaded according to their Perlin noise value.">
   <figcaption>Figure 0.8: Comparing neighboring Perlin noise values in one (left) and two (right) dimensions. The cells are shaded according to their Perlin noise value.</figcaption>
 </figure>
-<p>Two-dimensional noise works exactly the same way conceptually. The difference, of course, is that the values aren’t just written in a linear path along one row of the graph paper, but rather fill the whole grid. A given value will be similar to all of its neighbors: above, below, to the right, to the left, and along any diagonal, as in the right half of Figure 0.9.</p>
+<p>Two-dimensional noise works exactly the same way conceptually. The difference, of course, is that the values aren’t just written in a linear path along one row of the graph paper, but rather fill the whole grid. A given value will be similar to all of its neighbors: above, below, to the right, to the left, and along any diagonal, as in the right half of Figure 0.8.</p>
 <p>If you were to visualize this graph paper with each value mapped to the brightness of a color, you would get something that looks like clouds. White sits next to light gray, which sits next to gray, which sits next to dark gray, which sits next to black, which sits next to dark gray, and so on.</p>
 <figure>
   <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/O5a4MkgKC" data-example-path="examples/00_randomness/figure_i_noise_2_d"><img src="examples/00_randomness/figure_i_noise_2_d/screenshot.png"></div>

content/01_vectors.html

@@ -656,8 +656,7 @@ <h2 id="motion-with-vectors">Motion with Vectors</h2>
 	  fill(175);
 	  //{!1} The Mover is drawn as a circle.
 	  circle(this.position.x, this.position.y, 48);
-	}
-}</pre>
+	}</pre>
 <p>The <code>Mover</code> class also needs a function that determines what the object should do when it reaches the edge of the canvas. For now, I’ll do something simple, and have it wrap around the edges.</p>
 <pre class="codesplit" data-code-language="javascript">  checkEdges() {
     //{!11} When it reaches one edge, set position to the other.

content/03_oscillation.html

@@ -625,16 +625,16 @@ <h3 id="example-38-static-wave">Example 3.8: Static Wave</h3>
 <figure>
   <div class="col-list">
     <div>
-      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/S9l2FSS_M" data-example-path="examples/03_oscillation/example_3_9_the_wave_a"></div>
+      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/S9l2FSS_M" data-example-path="examples/03_oscillation/example_3_9_the_wave_a"><img src="examples/03_oscillation/example_3_9_the_wave_a/screenshot.png"></div>
     </div>
     <div>
-      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/0oH4O6Y0d" data-example-path="examples/03_oscillation/example_3_9_the_wave_b"></div>
+      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/0oH4O6Y0d" data-example-path="examples/03_oscillation/example_3_9_the_wave_b"><img src="examples/03_oscillation/example_3_9_the_wave_b/screenshot.png"></div>
     </div>
     <div>
-      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/3msqsP8ZD" data-example-path="examples/03_oscillation/example_3_9_the_wave_c"></div>
+      <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/3msqsP8ZD" data-example-path="examples/03_oscillation/example_3_9_the_wave_c"><img src="examples/03_oscillation/example_3_9_the_wave_c/screenshot.png"></div>
     </div>
   </div>
-  <figcaption>Three sine waves with varying <code>deltaAngle</code> values (0.05, 0.2, 0.6 from left to right)</figcaption>
+  <figcaption>Figure 3.x: Three sine waves with varying <code>deltaAngle</code> values (0.05, 0.2, 0.6 from left to right)</figcaption>
 </figure>
 <p>Although I’m not precisely calculating the wavelength, you can see that the greater the change in angle, the shorter the wavelength. It’s also worth noting that as the wavelength decreases, it becomes more difficult to make out the wave itself since the vertical distance between the individual points increases.</p>
 <p>Notice that everything in Example 3.8 happens inside <code>setup()</code>, so the result is static. The wave never changes or undulates. Adding motion is a bit tricky. Your first instinct might be to say: “Hey, no problem, I’ll just put the <code>for</code> loop inside the <code>draw()</code> function and let <code>angle</code> continue incrementing from one cycle to the next.”</p>

content/05_steering.html

@@ -1471,11 +1471,11 @@ <h3 id="a-few-more-optimization-tricks">A Few More Optimization Tricks</h3>
 <p>Magnitude requires the square root operation. And so it should! After all, if you want the magnitude of a vector, you have to break out the Pythagorean theorem (we did this in Chapter 1). However, if you could somehow skip taking the square root, your code would run faster.</p>
 <p>Consider a situation where you just want to know the <em>relative</em> magnitude of some vector <code>v</code>. For example, is the magnitude greater than 10?</p>
 <pre class="codesplit" data-code-language="javascript">if (v.mag() > 10) {
-  // Do something!
+  /* Do something! */
 }</pre>
 <p>Well, this is equivalent to saying:</p>
 <pre class="codesplit" data-code-language="javascript">if (v.magSq() > 100) {
-  // Do something!
+  /* Do something! */
 }</pre>
 <p>And how is magnitude squared calculated?</p>
 <pre class="codesplit" data-code-language="javascript">function magSq() {

content/06_libraries.html

@@ -219,7 +219,7 @@ <h3 id="object-destructuring">Object Destructuring</h3>
   <p><strong>Object destructuring</strong> in JavaScript is a technique for extracting properties from an object and assigning them to variables. In the case of Matter.js, the <code>Matter</code> object contains the <code>Engine</code> property. Normally, an alias for this property can be set with <code>let Engine = Matter.Engine</code>, but with destructuring, the alias can be created more concisely:</p>
   <pre class="codesplit" data-code-language="javascript">const { Engine } = Matter;</pre>
   <p>Hold on. Did you catch that I snuck in a <code>const</code> here? I know I said back in Chapter 0 that I would only use <code>let</code> for variable declarations throughout this book. However, working with an external library is a really good time to dip your toe in the <code>const</code> waters. In JavaScript, <code>const</code> is used for declaring variables whose values should never be re-assigned after initialization. This is a case where I want to protect myself from accidentally overwriting the <code>Engine</code> variable later in the code, which would likely break everything!</p>
-  <p>The destructuring syntax really shines when you need to create aliases to multiple properties of the same object:</p>
+  <p>With that out of the way, let’s look at how the destructuring syntax really shines when you need to create aliases to multiple properties of the same object:</p>
   <pre class="codesplit" data-code-language="javascript">// Using Object Destructuring to extract aliases for Engine and Vector
 const { Engine, Vector } = Matter;</pre>
   <p>This sets up <code>Engine</code> as an alias for <code>Matter.Engine</code> and <code>Vector</code> as an alias for <code>Matter.Vector</code>, all in one statement. I’ll use this technique throughout the chapter’s examples.</p>

content/07_ca.html

@@ -18,7 +18,7 @@ <h2 id="what-is-a-cellular-automaton">What Is a Cellular Automaton?</h2>
   <figcaption>Figure 7.1: A 2D grid of cells, each with a state of “on” or “off.” A neighborhood is a subsection of the large grid, usually consisting of all the cells adjacent to a given cell (circled).</figcaption>
 </figure>
 <p>The idea that an object’s state can vary over time is an important development. So far in this book, the objects (movers, particles, vehicles, boids, bodies) have generally existed in only one state. They might have moved with sophisticated behaviors and physics, but ultimately they remained the same type of object over the course of their digital lifetime. I’ve alluded to the possibility that these entities can change over time (for example, the weights of steering “desires” can vary), but I haven’t fully put this into practice. Now, with cellular automata, you’ll see how an object’s state can change based on a system of rules.</p>
-<p>The development of cellular automata systems is typically attributed to Stanisław Ulam and John von Neumann, who were both researchers at the Los Alamos National Laboratory in New Mexico in the 1940s. Ulam was studying the growth of crystals, and von Neumann was imagining a world of self-replicating robots. You readd that right: robots that can build copies of themselves.</p>
+<p>The development of cellular automata systems is typically attributed to Stanisław Ulam and John von Neumann, who were both researchers at the Los Alamos National Laboratory in New Mexico in the 1940s. Ulam was studying the growth of crystals, and von Neumann was imagining a world of self-replicating robots. You read that right: robots that can build copies of themselves.</p>
 <p>Von Neumann’s original “cells” had 29 possible states, so perhaps the idea of self-replicating robots is bit too complex of a starting point. Instead, imagine a row of dominoes, where each domino can be in one of two states: standing upright (1) or knocked down (0). Just like dominoes react to their neighboring dominoes, the behavior of each cell in a cellular automaton is influenced by the states of its neighboring cells.</p>
 <p>This chapter will explore how even the most basic rules of something like dominoes can lead to a wide array of intricate patterns and behaviors, similar to natural processes like biological reproduction and evolution. Von Neumann’s work in self-replication and CA is conceptually similar to what’s probably the most famous cellular automaton, the “Game of Life,” which I’ll discuss in detail later in the chapter.</p>
 <p>Perhaps the most significant (and lengthy) scientific work studying cellular automata arrived in 2002: Stephen Wolfram’s 1,280-page <em>A New Kind of Science</em>. Available in its entirety for free online, Wolfram’s book discusses how CA aren’t simply neat tricks, but are relevant to the study of biology, chemistry, physics, and all branches of science. In a moment, I’ll turn to building a simulation of Wolfram’s work, although I’ll barely scratch the surface of the theories Wolfram outlines—my focus will be on the code implementation, not the philosophical implications. If the examples spark your curiosity, you’ll find plenty more to read about in Wolfram’s book.</p>
@@ -719,7 +719,7 @@ <h3 id="exercise-711">Exercise 7.11</h3>
   <h3 id="exercise-712">Exercise 7.12</h3>
   <p>Create a CA in which each pixel is a cell and the pixel’s color is its state.</p>
 </div>
-<p><strong>5) Historical</strong>. In the object-oriented Game of Life example, I used two variables to keep track of a cell’s current andd previous state. What if you use an array to keep track of a cell’s state history over a longer period? This relates to the idea of a “complex adaptive system,” one that has the ability to change its rules over time by learning from its history. (Stay tuned for more on this concept in Chapters 9 and 10.)</p>
+<p><strong>5) Historical</strong>. In the object-oriented Game of Life example, I used two variables to keep track of a cell’s current and previous state. What if you use an array to keep track of a cell’s state history over a longer period? This relates to the idea of a “complex adaptive system,” one that has the ability to change its rules over time by learning from its history. (Stay tuned for more on this concept in Chapters 9 and 10.)</p>
 <div data-type="exercise">
   <h3 id="exercise-713">Exercise 7.13</h3>
   <p>Visualize the Game of Life by coloring each cell according to how long it’s been alive or dead. Can you also use the cell’s history to inform the rules?</p>