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

another round of quick fix attemps

content/00_randomness.html

@@ -461,7 +461,7 @@ <h2 id="a-smoother-approach-with-perlin-noise">A Smoother Approach with Perlin N
   </div>
   <figcaption>Figure 0.4: A graph of Perlin noise values over time (left) and of random noise values over time (right)</figcaption>
 </figure>
-<p>Ken Perlin developed the original Perlin noise algorithm while working on the movie <em>Tron</em> in the early 1980s; he later received an Academy Award in technical achievement for this work. The algorithm was designed to create procedural textures for computer-generated effects. (<em>Procedural</em> refers to generating the visual elements algorithmically, rather than an artist manually designing them.) Over the years, a variety of other flavors of noise have been developed by different authors. Some notable ones are value noise, Worley noise, and simplex noise (developed by Perlin himself in 2001). You can learn more about the history of Perlin noise at <a href="https://mrl.nyu.edu/~perlin/doc/oscar.html">Ken Perlin’s website</a> and its variations over the years in my <a href="https://thecodingtrain.com/opensimplexnoise">“What Is OpenSimplex Noise?” video on </a><a href="https://thecodingtrain.com/opensimplexnoise">the Coding Train website</a>.</p>
+<p>Ken Perlin developed the original Perlin noise algorithm while working on the movie <em>Tron</em> in the early 1980s; he later received an Academy Award in technical achievement for this work. The algorithm was designed to create procedural textures for computer-generated effects. (<em>Procedural</em> refers to generating the visual elements algorithmically, rather than an artist manually designing them.) Over the years, a variety of other flavors of noise have been developed by different authors. Some notable ones are value noise, Worley noise, and simplex noise (developed by Perlin himself in 2001). You can learn more about the history of Perlin noise at <a href="https://mrl.nyu.edu/~perlin/doc/oscar.html">Ken Perlin’s website</a> and its variations over the years in my “What Is OpenSimplex Noise?” video on <a href="https://thecodingtrain.com/opensimplexnoise">the Coding Train website</a>.</p>
 <p>The p5.js library incorporates an implementation of the classic 1983 Perlin noise algorithm in a function called <code>noise()</code>. It can take one, two, or three arguments, as noise is computed in one, two, or three dimensions. I’ll start by showing you one-dimensional (1D) noise.</p>
 <p>Say you want to draw a circle on a canvas at a random x-position. Out of habit, you might use the <code>random()</code> function:</p>
 <pre class="codesplit" data-code-language="javascript">//{!1} A random x-position

content/01_vectors.html

@@ -487,13 +487,13 @@ <h3 id="example-13-vector-subtraction">Example 1.3: Vector Subtraction</h3>
 }</pre>
 <p>Note the use of <code>translate()</code> to visualize the resulting vector as a line from the center <code>(width / 2, height / 2)</code> to the mouse. Vector subtraction is its own kind of translation, moving the “origin” of a position vector. Here, by subtracting the center vector from the mouse vector, I’m effectively moving the starting point of the resulting vector to the center of the canvas. Therefore, I also need to move the origin by using <code>translate()</code>. Without this, the line would be drawn from the top-left corner, and the visual connection wouldn’t be as clear.</p>
 <h3 id="vector-multiplication-and-division">Vector Multiplication and Division</h3>
-<p>Moving on to multiplication, you have to think a bit differently. Multiplying a vector typically refers to the process of <strong>scaling</strong> a vector. If I want to scale a vector to twice its size or one-third of its size, while leaving its direction the same, I would say, “Multiply the vector by 2” or “Multiply the vector by 1/3.” Unlike with addition and subtraction, I’m multiplying the vector by a scalar (a single number), not by another vector. Figure 1.9 illustrates how to scale a vector by a factor of 3.</p>
 <div class="half-width-right">
   <figure>
     <img src="images/01_vectors/01_vectors_10.png" alt="Figure 1.9: Scaling a vector with multiplication">
     <figcaption>Figure 1.9: Scaling a vector with multiplication</figcaption>
   </figure>
 </div>
+<p>Moving on to multiplication, you have to think a bit differently. Multiplying a vector typically refers to the process of <strong>scaling</strong> a vector. If I want to scale a vector to twice its size or one-third of its size, while leaving its direction the same, I would say, “Multiply the vector by 2” or “Multiply the vector by 1/3.” Unlike with addition and subtraction, I’m multiplying the vector by a scalar (a single number), not by another vector. Figure 1.9 illustrates how to scale a vector by a factor of 3.</p>
 <p>To scale a vector, multiply each component (<em>x</em> and <em>y</em>) by a scalar. That is, <span data-type="equation">\vec{w} = \vec{u} \times n</span> can be written as shown here:</p>
 <div data-type="equation">w_x = u_x \times n</div>
 <div data-type="equation">w_y = u_y \times n</div>

content/02_forces.html

@@ -697,13 +697,13 @@ <h3 id="gravitational-attraction">Gravitational Attraction</h3>
 // Normalize and scale the force vector to the appropriate magnitude.
 force.setMag(magnitude);</pre>
 <p>Note that I also changed the name of the <code>direction</code> vector to <code>force</code>. After all, when the calculations are finished, the vector I started with ends up being the actual force vector I wanted all along.</p>
-<p>Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the <code>Mover</code> class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an <code>applyForce()</code> method. I’ll take this class and put it in a sketch with the following:</p>
 <div class="half-width-right">
   <figure>
     <img src="images/02_forces/02_forces_10.png" alt="Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.">
     <figcaption>Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.</figcaption>
   </figure>
 </div>
+<p>Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the <code>Mover</code> class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an <code>applyForce()</code> method. I’ll take this class and put it in a sketch with the following:</p>
 <ul>
   <li>A single <code>Mover</code> object</li>
   <li>A single <code>Attractor</code> object (a new class that will have a fixed position)</li>
@@ -747,7 +747,7 @@ <h3 id="gravitational-attraction">Gravitational Attraction</h3>
 <table>
   <thead>
     <tr>
-      <th style="width:350px">Task</th>
+      <th style="width:300px">Task</th>
       <th>Function</th>
     </tr>
   </thead>
@@ -997,7 +997,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 <a href="https://doi.org/10.1017/fms.2013.5">“Classification of Symmetry Groups for Planar </a><a href="https://doi.org/10.1017/fms.2013.5"><em>n</em></a><a href="https://doi.org/10.1017/fms.2013.5">-Body Choreographies” by James Montaldi and Katrina Steckles</a> 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 “Classification of Symmetry Groups for Planar <em>n</em><a href="https://doi.org/10.1017/fms.2013.5">-Body Choreographies” by James Montaldi and Katrina Steckles</a> 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.
@@ -1070,7 +1070,7 @@ <h3 id="exercise-215">Exercise 2.15</h3>
 </div>
 <div data-type="exercise">
   <h3 id="exercise-216">Exercise 2.16</h3>
-  <p>Can you arrange the bodies of the <em>n</em>-body simulation to orbit the center of the canvas in a pattern that resembles a spiral galaxy? You may need to include an additional large body in the center to hold everything together. A solution is offered in <a href="https://thecodingtrain.com/nbody">my “Mutual Attraction” video in the Nature of Code series on </a><a href="https://thecodingtrain.com/nbody">the Coding Train website</a>.</p>
+  <p>Can you arrange the bodies of the <em>n</em>-body simulation to orbit the center of the canvas in a pattern that resembles a spiral galaxy? You may need to include an additional large body in the center to hold everything together. A solution is offered in my “Mutual Attraction” video in the Nature of Code series on <a href="https://thecodingtrain.com/nbody">the Coding Train website</a>.</p>
   <figure>
     <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/Qxahj4k5D" data-example-path="examples/02_forces/exercise_2_16"><img src="examples/02_forces/exercise_2_16/screenshot.png"></div>
     <figcaption></figcaption>

content/06_libraries.html

@@ -299,7 +299,7 @@ <h3 id="render">Render</h3>
 
 // Create the renderer.
 let render = Render.create(params);</pre>
-<p>Notice that I’m storing a reference to the p5.js canvas in the <code>canvas</code> variable. This is necessary because I need to tell the renderer to draw in a specific canvas. Matter.js doesn’t know about p5.js, so the canvas it’s assigned is a native HTML5 canvas, stored inside the <code>elt</code> property of a p5.js canvas object. The engine is the <code>engine</code> I previously created. The Matter.js default canvas dimensions are 800 × 600, so if I prefer a different size, I need to configure an <code>options</code> property with <code>width</code> and <code>height</code>.</p>
+<p>Notice that I’m storing a reference to the p5.js canvas in the <code>canvas</code> variable. This is necessary because I need to tell the renderer to draw in a specific canvas. Matter.js doesn’t know about p5.js, so the canvas it’s assigned is a native HTML5 canvas, stored inside the <code>elt</code> property of a p5.js canvas object. The engine is the <code>engine</code> I previously created. The Matter.js default canvas dimensions are 800×600, so if I prefer a different size, I need to configure an <code>options</code> property with <code>width</code> and <code>height</code>.</p>
 <p>Once I have a <code>render</code> object, I need to tell Matter.js to run it:</p>
 <pre class="codesplit" data-code-language="javascript">// Run the renderer!
 Render.run(render);</pre>
@@ -1664,7 +1664,7 @@ <h3 id="a-force-directed-graph">A Force-Directed Graph</h3>
       // Use the variable <code>particle_i</code> to store the particle reference.
       let particle_i = this.particles[i];</pre>
 </div>
-<p>Now look at the right column of the table. I need to connect node 0 to nodes 1, 2, and 3. For node 1, I connect 2 and 3. For node 2, only 3. In general, for every node <code>i</code>, I need to iterate from <code>i + 1</code> all the way until the end of the array. I’ll use the counter variable <code>j</code> for this purpose:</p>
+<p>Now look at the connections listed in Figure 6.19. I need to connect node 0 to nodes 1, 2, and 3. For node 1, I connect 2 and 3. For node 2, only 3. In general, for every node <code>i</code>, I need to iterate from <code>i + 1</code> all the way until the end of the array. I’ll use the counter variable <code>j</code> for this purpose:</p>
 <div class="snip-below">
   <pre class="codesplit" data-code-language="javascript">      //{!1} Look at how <code>j</code> starts at <code>i + 1</code>.
       for (let j = i + 1; j &#x3C; this.particles.length; j++) {

content/08_fractals.html

@@ -339,7 +339,7 @@ <h3 id="the-monster-curve">The Monster Curve</h3>
   <img src="images/08_fractals/08_fractals_16.png" alt="Figure 8.14: Two points become five points.">
   <figcaption>Figure 8.14: Two points become five points.</figcaption>
 </figure>
-<p>As the figure illustrates, I need to turn the two points (<em>start</em>, <em>end</em>) into five (<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>e</em>) to generate the four new line segments (a→b, b→c, c→d, d→e):</p>
+<p>As the figure illustrates, I need to turn the two points (<em>start</em>, <em>end</em>) into five (<em>a</em>, <em>b</em>, <em>c</em>, <em>d</em>, <em>e</em>) to generate the four new line segments (<em>a</em>→<em>b</em>, <em>b</em>→<em>c</em>, <em>c</em>→<em>d</em>, <em>d</em>→<em>e</em>):</p>
 <pre class="codesplit" data-code-language="javascript">    next.add(new KochLine(a, b));
     next.add(new KochLine(b, c));
     next.add(new KochLine(c, d));

content/10_nn.html

@@ -586,7 +586,7 @@ <h3 id="classification-and-regression">Classification and Regression</h3>
 <p>Rather than picking from a discrete set of output options, the goal of the neural network is now to guess a number—any number. Will the house use 30.5 kilowatt-hours of electricity that day? Or 48.7 kWh? Or 100.2 kWh? The output prediction could be any value from a continuous range.</p>
 <h3 id="network-design">Network Design</h3>
 <p>Knowing what problem you’re trying to solve (step 0) also has a significant bearing on the design of the neural network—in particular, on its input and output layers. I’ll demonstrate with another classic “Hello, world!” classification example from the field of data science and machine learning: the iris dataset. This dataset, which can be found in the Machine Learning Repository at the University of California, Irvine, originated from the work of American botanist Edgar Anderson.</p>
-<p>Anderson collected flower data over many years across multiple regions of the United States and Canada. For more on the origins of this famous dataset, see <a href="https://academic.oup.com/jrssig/article/18/6/26/7038520">“The Iris Data Set: In Search of the Source of </a><a href="https://academic.oup.com/jrssig/article/18/6/26/7038520"><em>Virginica</em></a><a href="https://academic.oup.com/jrssig/article/18/6/26/7038520">” by Antony Unwin and Kim Kleinman</a>. After carefully analyzing the data, Anderson built a table to classify iris flowers into three distinct species: <em>Iris setosa</em>, <em>Iris virginica</em>, and <em>Iris versicolor </em>(see Figure 10.17).</p>
+<p>Anderson collected flower data over many years across multiple regions of the United States and Canada. For more on the origins of this famous dataset, see “The Iris Data Set: In Search of the Source of <em>Virginica</em><a href="https://academic.oup.com/jrssig/article/18/6/26/7038520">” by Antony Unwin and Kim Kleinman</a>. After carefully analyzing the data, Anderson built a table to classify iris flowers into three distinct species: <em>Iris setosa</em>, <em>Iris virginica</em>, and <em>Iris versicolor </em>(see Figure 10.17).</p>
 <figure>
   <img src="images/10_nn/10_nn_19.png" alt="Figure 10.17: Three distinct species of iris flowers">
   <figcaption>Figure 10.17: Three distinct species of iris flowers</figcaption>