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

small fixes

content/00_randomness.html

@@ -84,11 +84,13 @@ <h2 id="the-random-walker-class">The Random Walker Class</h2>
 <p>Notice the use of the keyword <code>this</code> to attach the properties to the newly created object itself: <code>this.x</code> and <code>this.y</code>.</p>
 <p>In addition to data, classes can be defined with functionality. In this example, a <code>Walker</code> object has two functions, known as <strong>methods</strong> in an OOP context. While methods are essentially functions, the distinction is that methods are defined inside a class and therefore are associated with an object or class, whereas functions aren’t. The <code>function</code> keyword is a nice clue: you’ll see it when defining standalone functions, but it won’t appear inside a class. I’ll try my best to use the terms consistently in this book, but it’s common for programmers to use the terms <em>function</em> and <em>method</em> interchangeably.</p>
 <p>The first method, <code>show()</code>, includes the code to draw the object (as a black dot). Once again, never forget the <code>this.</code> when referencing the properties (variables) of that object:</p>
-<pre class="codesplit" data-code-language="javascript">  // Objects have methods.
+<div class="snip-below snip-above">
+  <pre class="codesplit" data-code-language="javascript">  // Objects have methods.
   show() {
     stroke(0);
     point(this.x, this.y);
   }</pre>
+</div>
 <p>The next method, <code>step()</code>, directs the <code>Walker</code> object to take a step. This is where things get a bit more interesting. Remember taking steps in random directions on a floor? Now I’ll use a p5.js canvas to represent that floor. There are four possible steps. A step to the right can be simulated by incrementing <code>x</code> with <code>x++</code>; to the left by decrementing <code>x</code> with <code>x--</code>; forward by going up a pixel (<code>y--</code>); and backward by going down a pixel (<code>y++</code>). But how can the code pick from these four choices?</p>
 <p>Earlier I stated that you could flip two coins. In p5.js, however, when you want to randomly choose from a list of options, you can simply generate a random number with the <code>random()</code> function. It picks a random floating-point (decimal) value within any range you want. Here, I use 4 to indicate a range of 0 to 4:</p>
 <pre class="codesplit" data-code-language="javascript">let choice = floor(random(4));</pre>

content/01_vectors.html

@@ -833,8 +833,8 @@ <h3 id="algorithm-1-constant-acceleration">Algorithm 1: Constant Acceleration</h
 <pre class="codesplit" data-code-language="javascript">    this.acceleration = createVector(-0.001, 0.01);</pre>
 <p>This means that for every frame of the animation, the object’s velocity should increase by –0.001 pixels in the x-direction and 0.01 pixels in the y-direction. Maybe you’re thinking, “Gosh, those values seem awfully small!” Indeed, they are quite tiny, but that’s by design. Acceleration values accumulate over time in the velocity, about 30 times per second, depending on the sketch’s frame rate. To keep the magnitude of the velocity vector from growing too quickly and spiraling out of control, the acceleration values should remain quite small.</p>
 <p>I can also help keep the velocity within a reasonable range by incorporating the <code>p5.Vector</code> function <code>limit()</code>, which puts a cap on the magnitude of a vector:</p>
-<pre class="codesplit" data-code-language="javascript">// The limit() function constrains the magnitude of a vector.
-this.velocity.limit(10);</pre>
+<pre class="codesplit" data-code-language="javascript">    // The limit() function constrains the magnitude of a vector.
+    this.velocity.limit(10);</pre>
 <p>This translates to the following:</p>
 <p>What is the magnitude of <code>velocity</code>? If it’s less than 10, no worries; just leave it as is. If it’s more than 10, however, reduce it to 10!</p>
 <div data-type="exercise">
@@ -898,11 +898,13 @@ <h3 id="algorithm-2-random-acceleration">Algorithm 2: Random Acceleration</h3>
   // Constant
   <strong>this.acceleration.mult(0.5);</strong></pre>
 <p>Or, for even greater variety, I can scale the acceleration to a random value. In Example 1.9, the <code>acceleration</code> vector has both a random direction and a random magnitude from 0 to 2.</p>
-<p><strong>Example 1.9: Motion 101 (Velocity and Random Acceleration)</strong></p>
-<figure>
-  <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/w9DU8ccWMf" data-example-path="examples/01_vectors/example_1_9_motion_101_velocity_and_random_acceleration"><img src="examples/01_vectors/example_1_9_motion_101_velocity_and_random_acceleration/screenshot.png"></div>
-  <figcaption></figcaption>
-</figure>
+<div data-type="example">
+  <h3 id="example-19-motion-101-velocity-and-random-acceleration">Example 1.9: Motion 101 (Velocity and Random Acceleration)</h3>
+  <figure>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/w9DU8ccWMf" data-example-path="examples/01_vectors/example_1_9_motion_101_velocity_and_random_acceleration"><img src="examples/01_vectors/example_1_9_motion_101_velocity_and_random_acceleration/screenshot.png"></div>
+    <figcaption></figcaption>
+  </figure>
+</div>
 <pre class="codesplit" data-code-language="javascript">  this.acceleration = p5.Vector.random2D();
   // Random
   <strong>this.acceleration.mult(random(2));</strong></pre>
@@ -988,8 +990,8 @@ <h3 id="algorithm-3-interactive-motion">Algorithm 3: Interactive Motion</h3>
 </div>
 <p>In Figure 1.16, you see that the acceleration vector (<em>dx</em>, <em>dy</em>) can be calculated by subtracting the object’s position from the mouse’s position:</p>
 <ul>
-  <li><span data-type="equation">dx = mouseX - x</span></li>
-  <li><span data-type="equation">dy = mouseY - y</span></li>
+  <li><span data-type="equation">\text{dx} = \text{mouseX} - x</span></li>
+  <li><span data-type="equation">\text{dy} = \text{mouseY} - y</span></li>
 </ul>
 <p>Let’s implement that by using <code>p5.Vector</code> syntax. Assuming the code will live inside the <code>Mover</code> class and thus have access to the object’s <code>position</code>, I can write this:</p>
 <pre class="codesplit" data-code-language="javascript">let mouse = createVector(mouseX, mouseY);

content/02_forces.html

@@ -43,7 +43,6 @@ <h3 id="newtons-third-law">Newton’s Third Law</h3>
 <p>Let’s say you push against a wall. The wall doesn’t actively decide to push you back, and yet it still provides resistance with an equal force in the opposite direction. There’s no “origin” force. Your push simply includes both forces, referred to as an <em>action/reaction pair</em>. A better way of stating Newton’s third law might therefore be the following:</p>
 <p><span class="highlight">Forces always occur in pairs. The two forces are of equal strength but in opposite directions.</span></p>
 <p>This still causes confusion because it sounds like these forces would always cancel each other out. This isn’t the case. Remember, the forces act on different objects. And just because the two forces are equal doesn’t mean that the objects’ movements are equal (or that the objects will stop moving).</p>
-<p>This still causes confusion because it sounds like these forces would always cancel each other out. This isn’t the case. Remember, the forces act on different objects. And just because the two forces are equal doesn’t mean that the objects’ movements are equal (or that the objects will stop moving).</p>
 <p>Consider pushing on a stationary truck. Although the truck is far more massive than you, a stationary truck (unlike a moving one) will never overpower you and send you flying backwards. The force your hands exert on the truck is equal and opposite to the force exerted by the truck on your hands. The outcome depends on a variety of other factors. If the truck is small and parked on an icy street, you’ll probably be able to get it to move. On the other hand, if it’s very large and on a dirt road and you push hard enough (maybe even take a running start), you could injure your hand.</p>
 <p>And what if, as in Figure 2.2, you are wearing roller skates when you push on that truck?</p>
 <figure>
@@ -213,7 +212,7 @@ <h2 id="creating-forces">Creating Forces</h2>
   <h3 id="example-21-forces">Example 2.1: Forces</h3>
   <figure>
     <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/4IRI8BEVE" data-example-path="examples/02_forces/example_2_1_forces"><img src="examples/02_forces/example_2_1_forces/screenshot.png"></div>
-    <figcaption>Click the mouse to apply the wind force.</figcaption>
+    <figcaption>Clicking the mouse applies the wind force.</figcaption>
   </figure>
 </div>
 <pre class="codesplit" data-code-language="javascript">let gravity = createVector(0, 0.1);
@@ -749,7 +748,7 @@ <h3 id="gravitational-attraction">Gravitational Attraction</h3>
 <table>
   <thead>
     <tr>
-      <th>Task</th>
+      <th style="width:350px">Task</th>
       <th>Function</th>
     </tr>
   </thead>

content/03_oscillation.html

@@ -1014,8 +1014,9 @@ <h3 id="example-311-swinging-pendulum">Example 3.11: Swinging Pendulum</h3>
   background(255);
   pendulum.update();
   pendulum.show();
-}</pre>
-<pre class="codesplit" data-code-language="javascript">class Pendulum  {
+}
+
+class Pendulum  {
 
   constructor(x, y, r) {
     //{!8} Many, many variables keep track of the Pendulum’s various properties.

content/09_ga.html

@@ -482,7 +482,7 @@ <h3 id="exercise-93">Exercise 9.3</h3>
   <table>
     <thead>
       <tr>
-        <th>Element</th>
+        <th style="width:300px">Element</th>
         <th>Probability</th>
       </tr>
     </thead>
@@ -505,8 +505,8 @@ <h3 id="exercise-93">Exercise 9.3</h3>
   <table>
     <thead>
       <tr>
-        <th>Element</th>
-        <th>Rank</th>
+        <th style="width:200px">Element</th>
+        <th style="width:100px">Rank</th>
         <th>Probability</th>
       </tr>
     </thead>
@@ -810,8 +810,8 @@ <h3 id="key-2-the-fitness-function">Key 2: The Fitness Function</h3>
 <table>
   <thead>
     <tr>
-      <th>Phrase</th>
-      <th>Characters Correct</th>
+      <th style="width:100px">Phrase</th>
+      <th style="width:100px">Characters Correct</th>
       <th>Fitness</th>
     </tr>
   </thead>
@@ -841,7 +841,7 @@ <h3 id="key-2-the-fitness-function">Key 2: The Fitness Function</h3>
 <table>
   <thead>
     <tr>
-      <th>Correct Characters</th>
+      <th style="width:100px">Correct Characters</th>
       <th>Fitness</th>
     </tr>
   </thead>
@@ -862,7 +862,7 @@ <h3 id="key-2-the-fitness-function">Key 2: The Fitness Function</h3>
 <table>
   <thead>
     <tr>
-      <th>Correct Characters</th>
+      <th style="width:100px">Correct Characters</th>
       <th>Fitness</th>
     </tr>
   </thead>
@@ -1178,13 +1178,16 @@ <h3 id="managing-the-population">Managing the Population</h3>
   }</pre>
 </div>
 <p>I need to make one more fairly significant change, however. With typing cats, a random phrase was evaluated as soon as it was created. The string of characters had no lifespan; it existed purely for the purpose of calculating its fitness. The rockets, however, need to live for a period of time before they can be evaluated—that is, they need to be given a chance to make their attempt at reaching the target. Therefore, I need to add one more method to the <code>Population</code> class that runs the physics simulation. This is identical to what I did in the <code>run()</code> method of a particle system—update all the particle positions and draw them:</p>
-<pre class="codesplit" data-code-language="javascript">  live() {
+<div class="snip-above">
+  <pre class="codesplit" data-code-language="javascript">  live() {
     for (let rocket of this.population) {
       //{!1} The run() method takes care of the simulation, updates the rocket’s
       // position, and draws it to the canvas.
       rocket.run();
     }
-  }</pre>
+  }
+}</pre>
+</div>
 <p>Finally, I’m ready for <code>setup()</code> and <code>draw()</code>. Here, my primary responsibility is to implement the steps of the GA in the appropriate order by calling the methods from the <code>Population</code> class:</p>
 <pre class="codesplit" data-code-language="javascript">    population.fitness();
     population.selection();
@@ -1527,19 +1530,20 @@ <h2 id="ecosystem-simulation">Ecosystem Simulation</h2>
   <li><strong>Bloops are born.</strong></li>
 </ul>
 <p>Bloops dying is my replacement for a fitness function and the process of selection. If a bloop dies, it can’t be selected to be a parent, because it no longer exists! One way I can build a mechanism to ensure bloop deaths in the world is by adding a <code>health</code> variable to the <code>Bloop</code> class:</p>
-<pre class="codesplit" data-code-language="javascript">class Bloop {
+<div class="snip-below">
+  <pre class="codesplit" data-code-language="javascript">class Bloop {
   constructor(position, dna) {
     //{!1} A variable to track the bloop’s health
     this.health = 100;  
-    // All the rest of the constructor
-  }
-}</pre>
+    /* All the rest of the constructor */</pre>
+</div>
 <p>Each time through <code>update()</code>, a bloop loses some of its health:</p>
-<pre class="codesplit" data-code-language="javascript">  update() {
+<div class="snip-below">
+  <pre class="codesplit" data-code-language="javascript">  update() {
     // Death is always looming.
     this.health -= 0.2;
-    // All the rest of update()
-  }</pre>
+    /* All the rest of update() */</pre>
+</div>
 <p>If <code>health</code> drops below <code>0</code>, the bloop dies:</p>
 <pre class="codesplit" data-code-language="javascript">  // A method to test whether the bloop is alive or dead.
   dead() {
@@ -1594,8 +1598,7 @@ <h3 id="genotype-and-phenotype">Genotype and Phenotype</h3>
     this.maxSpeed = map(this.dna.genes[0], 0, 1, 15, 0);
     this.r = map(this.dna.genes[0], 0, 1, 0, 25);
 
-    // All the rest of the bloop initialization
-  }</pre>
+    /* All the rest of the bloop initialization */</pre>
 </div>
 <p>Note that the <code>maxSpeed</code> property is mapped to a range from <code>15</code> to <code>0</code>. A bloop with a gene value of <code>0</code> will move at a speed of <code>15</code>, while a bloop with a gene value of <code>1</code> won’t move at all (speed of <code>0</code>).</p>
 <h3 id="selection-and-reproduction">Selection and Reproduction</h3>