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

[Notion] Update docs

content/00_randomness.html

@@ -93,10 +93,8 @@ <h2 id="the-random-walker-class">The Random Walker Class</h2>
 <div data-type="note">
   <h3 id="coding-conventions">Coding Conventions</h3>
   <p>In JavaScript, variables can be declared using either <code>let</code> or <code>const</code>. A typical approach is to declare all variables with <code>const</code> and change to <code>let</code> when needed. In this first example, <code>const</code> would be appropriate for declaring <code>choice</code> as it’s never reassigned a new value over the course of its life inside each call to <code>step()</code>. While this differentiation is important, I’m choosing to follow the p5.js example convention and declare all variables with <code>let</code>.</p>
-  <p>
-    I recognize that JavaScript has both <code>const</code> and <code>let</code> for important reasons. However, the distinction can be a distraction and confusing for beginners. I encourage you to explore the topic further and make your own decisions about how to best declare variables in your own sketches. For more, you can read <a href="https://github.com/processing/p5.js/issues/3877">the discussion surrounding issue #3877 in the p5.js GitHub repository</a>.
-    I’m also choosing to use JavaScript’s strict equality (<code>===</code>) operator (and its inequality counterpart, <code>!==</code>). This Boolean operator tests both value and type equality. For example, <code>3 === '3'</code> will evaluate to <code>false</code> because the types are different (number versus string), even though they look similar. On the other hand, using the loose equality (<code>==</code>) operator in <code>3 == '3'</code> would result in <code>true</code> because the two different types are converted to be comparable. Although the loose comparison often works fine, it can sometimes lead to unexpected results, so <code>===</code> is probably the safer choice.
-  </p>
+  <p>I recognize that JavaScript has both <code>const</code> and <code>let</code> for important reasons. However, the distinction can be a distraction and confusing for beginners. I encourage you to explore the topic further and make your own decisions about how to best declare variables in your own sketches. For more, you can read <a href="https://github.com/processing/p5.js/issues/3877">the discussion surrounding issue #3877 in the p5.js GitHub repository</a>.</p>
+  <p>I’m also choosing to use JavaScript’s strict equality (<code>===</code>) operator (and its inequality counterpart, <code>!==</code>). This Boolean operator tests both value and type equality. For example, <code>3 === '3'</code> will evaluate to <code>false</code> because the types are different (number versus string), even though they look similar. On the other hand, using the loose equality (<code>==</code>) operator in <code>3 == '3'</code> would result in <code>true</code> because the two different types are converted to be comparable. Although the loose comparison often works fine, it can sometimes lead to unexpected results, so <code>===</code> is probably the safer choice.</p>
 </div>
 <p>Next, the walker takes the appropriate step (left, right, up, or down), depending on which random number was picked. Here’s the full <code>step()</code> method closing out the <code>Walker</code> class:</p>
 <div class="snip-above">

content/01_vectors.html

@@ -254,8 +254,8 @@ <h3 id="addition-properties-with-vectors">Addition Properties with Vectors</h3>
   //{!4} New! A function to add another vector to this vector. Add the x-components and the y-components separately.
   <strong>add(v) {
     this.x = this.x + v.x;
-</strong><strong>    this.y = this.y + v.y;
-</strong><strong>  }</strong>
+    this.y = this.y + v.y;
+  }</strong>
 }</pre>
 <p>The function looks up the x- and y-components of the two vectors and adds them separately. This is exactly how the built-in <code>p5.Vector</code> class’s <code>add()</code> method is written too. Knowing how it works, I can now return to the bouncing ball example with its <strong>position + velocity</strong> algorithm and implement vector addition:</p>
 <pre class="codesplit" data-code-language="javascript">// This does not work!
@@ -796,7 +796,7 @@ <h3 id="example-17-motion-101-velocity">Example 1.7: Motion 101 (Velocity)</h3>
   }
 }</pre>
 <p>If OOP is at all new to you, one aspect here may seem a bit strange. I spent the beginning of this chapter discussing the <code>p5.Vector</code> class, and this class is the template for making the <code>position</code> object and the <code>velocity</code> object. So what are those objects doing inside yet another object, the <code>Mover</code> object?</p>
-<p>In fact, this is just about the most normal thing ever. An object is something that holds data (and functionality). That data can be numbers, or it can be other objects (arrays too)! You’ll see this over and over again in this book. In <a href="/particles#why-particle-systems-matter">Chapter 4</a>, for example, I’ll write a class to describe a system of particles. That <code>ParticleSystem</code> object will include a list of <code>Particle</code> objects . . . and each <code>Particle</code> object will have as its data several <code>p5.Vector</code> objects!</p>
+<p>In fact, this is just about the most normal thing ever. An object is something that holds data (and functionality). That data can be numbers, or it can be other objects (arrays too)! You’ll see this over and over again in this book. In Chapter 4, for example, I’ll write a class to describe a system of particles. That <code>ParticleSystem</code> object will include a list of <code>Particle</code> objects . . . and each <code>Particle</code> object will have as its data several <code>p5.Vector</code> objects!</p>
 <p>You may have also noticed in the <code>Mover</code> class that I’m setting the initial position and velocity directly within the constructor, without using any arguments. While this approach keeps the code simple for now, I’ll explore the benefits of adding arguments to the constructor in <a href="/forces#">Chapter 2</a>.</p>
 <p>At this point, you hopefully feel comfortable with two concepts: (1) what a vector is and (2) how to use vectors inside an object to keep track of its position and movement. This is an excellent first step and deserves a mild round of applause. Before standing ovations are in order, however, you need to make one more, somewhat bigger step forward. After all, watching the Motion 101 example is fairly boring. The circle never speeds up, never slows down, and never turns. For more sophisticated motion—the kind of motion that appears in the world around us—one more vector needs to be added to the class: <code>acceleration</code>.</p>
 <h2 id="acceleration">Acceleration</h2>