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

[Notion] Update docs

content/01_vectors.html

@@ -303,7 +303,7 @@ <h3 id="exercise-11">Exercise 1.1</h3>
   <h3 id="exercise-13">Exercise 1.3</h3>
   <p>Extend the bouncing ball with vectors example into 3D. Can you get a sphere to bounce around a box?</p>
 </div>
-<h2 id="14-more-vector-math">1.4 More Vector Math</h2>
+<h2 id="more-vector-math">More Vector Math</h2>
 <p>Addition was really just the first step. There are many mathematical operations commonly used with vectors. Here’s a comprehensive table of the operations available as functions in the <code>p5.Vector</code> class.</p>
 <table>
   <thead>

content/02_forces.html

@@ -907,7 +907,7 @@ <h3 id="exercise-212">Exercise 2.12</h3>
   <h3 id="exercise-213">Exercise 2.13</h3>
   <p>This chapter isn’t suggesting that every good p5.js simulation needs to involve gravitational attraction. Rather, you should be thinking creatively about how to design your own rules to drive the behavior of objects, using my approach to simulating gravitational attraction as a model. For example, what happens if you design an attractive force that gets weaker as the objects get closer, and stronger as the objects get farther apart? Or what if you design your attractor to attract faraway objects, but repel close ones?</p>
 </div>
-<h2 id="210-the-n-body-problem">2.10 The n-Body Problem</h2>
+<h2 id="the-n-body-problem">The n-Body Problem</h2>
 <p>I started exploring gravitational attraction with a simple scenario, <em>one object attracts another object</em>,<em> then</em> moved on to the slightly more complex <em>one object attracts many objects</em>. A logical next step is to explore what happens when <em>many objects attract </em><strong><em>many</em></strong><em> objects!</em></p>
 <p>To begin, while it’s so far been helpful to have separate <code>Mover</code> and <code>Attractor</code> classes, this distinction is actually a bit misleading. After all, according to Newton's third law, all forces occur in pairs: if an attractor attracts a mover, then that mover should also attract the attractor. Instead of two different classes here, what I really want is a single type of thing—called, for example, a <code>Body</code>—with every body attracting every other body.</p>
 <p>The scenario being described here is commonly referred to as the <span data-type="equation">n</span><strong><em>-body problem</em></strong>. It involves solving for the motion of a group of objects that interact via gravitational forces. The <em>two</em>-body problem is a famously “solved” problem, meaning the motions can be precisely computed with mathematical equations when only two bodies are involved. However, adding one more body turns the <em>two</em>-body problem into a <em>three</em>-body problem, and suddenly no formal solution exists.</p>

content/03_oscillation.html

@@ -1022,20 +1022,20 @@ <h3 id="exercise-315">Exercise 3.15</h3>
   <p>Before running to see the example online, take a look at this <code>constrainLength</code> method and see if you can fill in the blanks.</p>
   <pre class="codesplit" data-code-language="javascript">constrainLength(bob, minlen, maxlen) {
   //{!1} Vector pointing from Bob to Anchor
-  let direction = p5.Vector.sub(bob.position, this.anchor);
+  let direction = p5.Vector.sub(<span class="blank">bob.position</span>, <span class="blank">this.anchor</span>);
   let length = direction.mag();
 
   //{!1} Is it too short?
   if (length &#x3C; minlen) {
-    direction.setMag(minlen);
+    direction.setMag(<span class="blank">minlen</span>);
     //{!1} Keep position within constraint.
-    bob.position = p5.Vector.add(this.anchor, direction);
+    bob.position = p5.Vector.add(<span class="blank">this.anchor</span>, <span class="blank">direction</span>);
     bob.velocity.mult(0);
   //{!1} Is it too long?
-  } else if (length > maxlen) {
-    direction.setMag(maxlen);
+  } else if (length<span class="blank"> > maxlen</span>) {
+    direction.setMag(<span class="blank">maxlen</span>);
     //{!1} Keep position within constraint.
-    bob.position = p5.Vector.add(this.anchor, direction);
+    bob.position = p5.Vector.add(<span class="blank">this.anchor</span>, <span class="blank">direction</span>);
     bob.velocity.mult(0);
   }
 }</pre>

content/05_steering.html

@@ -443,10 +443,10 @@ <h3 id="exercise-56">Exercise 5.6</h3>
     <img src="images/05_steering/05_steering_17.png" alt="">
     <figcaption></figcaption>
   </figure>
-  <pre class="codesplit" data-code-language="javascript">let x = i * width / cols;
-let y = j * height / rows;
-flowfield[i][j] = createVector(width/2 - x, height/2 - y);
-flowfield[i][j].rotate(PI / 2);</pre>
+  <pre class="codesplit" data-code-language="javascript">let x = <span class="blank">i * width / cols</span>;
+let y = <span class="blank">j * height / rows</span>;
+flowfield[i][j] = createVector(<span class="blank">width/2 - x</span>, <span class="blank">height/2 - y</span>);
+flowfield[i][j].<span class="blank">rotate(PI / 2)</span>;</pre>
 </div>
 <p>Now that I have a two-dimensional array storing the flow field vectors, I need a way for the vehicle to look up its desired velocity. For that, I simply divide the vehicle’s x and y position by the resolution of the grid. This gives me the indices of the desired vector in the 2D array. For example, if the resolution is 10 and the vehicle is at (100, 50), I’ll want to look up column 10 and row 5.</p>
 <pre class="codesplit" data-code-language="javascript">let column = floor(this.position.x / this.resolution);