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

[Notion] Update docs

content/00_randomness.html

@@ -128,20 +128,20 @@ <h3 id="coding-conventions">Coding Conventions</h3>
   background(255);
 }</pre>
 <p>Finally, during each cycle through <code>draw()</code>, the walker takes a step and draws a dot:</p>
-<pre class="codesplit" data-code-language="javascript">//{!1} Then <code>draw()</code> loops forever and ever (until you quit).
-function draw() {
-  // Call functions on the walker.
-  walker.step();
-  walker.show();
-}</pre>
-<p>Since the background is drawn once in <code>setup()</code>, rather than clearing it continually each time through <code>draw()</code>, the trail of the random walk is visible in the canvas.</p>
 <div data-type="example">
   <h3 id="example-01-a-traditional-random-walk">Example 0.1: A Traditional Random Walk</h3>
   <figure>
     <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/5C69XyrlsR" data-example-path="examples/00_randomness/example_i_1_random_walk_traditional"><img src="examples/00_randomness/example_i_1_random_walk_traditional/screenshot.png"></div>
     <figcaption>Each time you see one of these example boxes in the book, it means that corresponding code is available in the p5.js web editor and on the book’s website. If you’re reading this book offline, you’ll see only a screenshot of the resulting canvas.</figcaption>
   </figure>
+  <pre class="codesplit" data-code-language="javascript">//{!1} Then <code>draw()</code> loops forever and ever (until you quit).
+function draw() {
+  // Call functions on the walker.
+  walker.step();
+  walker.show();
+}</pre>
 </div>
+<p>Since the background is drawn once in <code>setup()</code>, rather than clearing it continually each time through <code>draw()</code>, the trail of the random walk is visible in the canvas.</p>
 <p>I could make a couple of adjustments to the random walker. For one, this <code>Walker</code> object’s steps are limited to four options: up, down, left, and right. But any given pixel in the canvas could have eight possible neighbors, including diagonals (see Figure 0.1). A ninth possibility, to stay in the same place, could also be an option.</p>
 <figure>
   <img src="images/00_randomness/00_randomness_3.png" alt="Figure 0.1: The steps of a random walker, with and without diagonals">

content/10_nn.html

@@ -395,10 +395,12 @@ <h3 id="the-perceptron-code">The Perceptron Code</h3>
   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>
-<pre class="codesplit" data-code-language="javascript">// Move the origin <code>(0, 0)</code> to the center.
+<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);
 // Flip the y-axis orientation (positive points up!).
 scale(1, -1);</pre>
+</div>
 <p>I can now pick a random point in the 2D space:</p>
 <pre class="codesplit" data-code-language="javascript">let x = random(-100, 100);
 let y = random(-100, 100);</pre>