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

10-11

content/10_nn.html

@@ -399,7 +399,7 @@ <h3 id="the-perceptron-code">The Perceptron Code</h3>
 function f(x) {
   return 0.5 * x - 1;
 }</pre>
-<p>Now there’s the matter of the p5.js canvas defaulting to (0, 0) in the top-left corner with the y-axis pointing down. For this discussion, I’ll assume I’ve built the following into the code to reorient the canvas to match a more traditional Cartesian space:</p>
+<p>Now there’s the matter of the p5.js canvas defaulting to (0, 0) in the top-left corner with the y-axis pointing down. For this discussion, I’ll assume I’ve built the following into the code to reorient the canvas to match a more traditional Cartesian space.</p>
 <div class="avoid-break">
   <pre class="codesplit" data-code-language="javascript">// Move the origin <code>(0, 0)</code> to the center.
 translate(width / 2, height / 2);
@@ -424,7 +424,7 @@ <h3 id="the-perceptron-code">The Perceptron Code</h3>
   //{!1} The answer becomes +1 if <code>y</code> is above the line.
   desired = 1;
 }</pre>
-<p>I can then make an input array to go with the <code>desired</code> output:</p>
+<p>I can then make an input array to go with the <code>desired</code> output.</p>
 <pre class="codesplit" data-code-language="javascript">// Don’t forget to include the bias!
 let trainingInputs = [x, y, 1];</pre>
 <p>Assuming that I have a <code>perceptron</code> variable, I can train it by providing the inputs along with the desired answer:</p>
@@ -879,8 +879,9 @@ <h3 id="deploying-the-model">Deploying the Model</h3>
   }
 ]</pre>
 <p>In this example output, the model is highly confident (approximately 96.7 percent) that the correct label is <code>"right"</code>, while it has minimal confidence (0.03 percent) in the <code>"left"</code> label. The confidence values are normalized and add up to 100 percent.</p>
-<p>All that remains now is to fill out the sketch with code so the model can receive live input from the mouse. The first step is to signal the completion of the training process so the user knows the model is ready. I’ll include a global <code>status</code> variable to track the training process and ultimately display the predicted label on the canvas. The variable is initialized to <code>"training"</code> but updated to <code>"ready"</code> through the <code>finishedTraining()</code> callback:</p>
-<pre class="codesplit" data-code-language="javascript">// When the sketch starts, it will show a status of <code>training</code>.
+<p>All that remains now is to fill out the sketch with code so the model can receive live input from the mouse. The first step is to signal the completion of the training process so the user knows the model is ready. I’ll include a global <code>status</code> variable to track the training process and ultimately display the predicted label on the canvas. The variable is initialized to <code>"training"</code> but updated to <code>"ready"</code> through the <code>finishedTraining()</code> callback.</p>
+<div class="avoid-break">
+  <pre class="codesplit" data-code-language="javascript">// When the sketch starts, it will show a status of <code>training</code>.
 let status = "training";
 
 function draw() {
@@ -894,6 +895,7 @@ <h3 id="deploying-the-model">Deploying the Model</h3>
 function finishedTraining() {
   status = "ready";
 }</pre>
+</div>
 <p>Finally, I’ll use p5.js’s mouse functions to build a vector while the mouse is being dragged and call <code>classifier.classify()</code> on that vector when the mouse is clicked.</p>
 <div data-type="example">
   <h3 id="example-102-gesture-classifier">Example 10.2: Gesture Classifier</h3>

content/11_nn_ga.html

@@ -295,7 +295,6 @@ <h3 id="variation-a-flock-of-flappy-birds">Variation: A Flock of Flappy Birds</h
   for (let i = 0; i &#x3C; populationSize; i++) {
     birds[i] = new Bird();
   }
-
   //{!1} Run the computations on the CPU for better performance.
   ml5.setBackend("cpu");
 }
@@ -826,7 +825,6 @@ <h3 id="learning-from-the-sensors">Learning from the Sensors</h3>
     for (let i = 0; i &#x3C; this.sensors.length; i++) {
       inputs[i] = this.sensors[i].value;
     }
-
     // Predict a steering force from the sensors.
     let outputs = this.brain.predictSync(inputs);
     let angle = outputs[0].value * TWO_PI;
@@ -840,14 +838,12 @@ <h3 id="learning-from-the-sensors">Learning from the Sensors</h3>
   <pre class="codesplit" data-code-language="javascript">class Creature {  
   constructor() {
     /* All of the creature's properties */
-
     // The health starts at 100.
     this.health = 100;
   } 
 
   update() {
     /* The usual updating position, velocity, acceleration */
-
     // Lose some health!
     this.health -= 0.25;
   }</pre>
@@ -887,35 +883,30 @@ <h3 id="example-116-a-neuroevolutionary-ecosystem">Example 11.6: A Neuroevolutio
   </figure>
 </div>
 <pre class="codesplit" data-code-language="javascript">let bloops = [];
-let timeSlider;
 let food = [];
 
 function setup() {
   createCanvas(640, 240);
-  ml5.setBackend("cpu");
   for (let i = 0; i &#x3C; 20; i++) {
     bloops[i] = new Creature(random(width), random(height));
   }
   for (let i = 0; i &#x3C; 8; i++) {
     food[i] = new Food();
   }
-  timeSlider = createSlider(1, 20, 1);
 }
 
 function draw() {
   background(255);
-  for (let i = 0; i &#x3C; timeSlider.value(); i++) {
-    for (let i = bloops.length - 1; i >= 0; i--) {
-      bloops[i].think();
-      bloops[i].eat();
-      bloops[i].update();
-      bloops[i].borders();
-      if (bloops[i].health &#x3C; 0) {
-        bloops.splice(i, 1);
-      } else if (random(1) &#x3C; 0.001) {
-        let child = bloops[i].reproduce();
-        bloops.push(child);
-      }
+  for (let i = bloops.length - 1; i >= 0; i--) {
+    bloops[i].think();
+    bloops[i].eat();
+    bloops[i].update();
+    bloops[i].borders();
+    if (bloops[i].health &#x3C; 0) {
+      bloops.splice(i, 1);
+    } else if (random(1) &#x3C; 0.001) {
+      let child = bloops[i].reproduce();
+      bloops.push(child);
     }
   }
   for (let treat of food) {