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

6-8

content/06_libraries.html

@@ -1005,7 +1005,7 @@ <h2 id="collision-events">Collision Events</h2>
 <p><strong>Step 3: Bodies, could you tell me which particles you’re associated with?</strong></p>
 <p>Getting from the relevant Matter.js bodies to the <code>Particle</code> objects they’re associated with is a little harder. After all, Matter.js doesn’t know anything about my code. Sure, it’s doing all sorts of stuff to keep track of the relationships between bodies and constraints, but it’s up to me to manage my own objects and their associations with Matter.js elements. That said, every Matter.js body is instantiated with an empty object—<code>{ }</code>—called <code>plugin</code>, ready to store any custom data about that body. I can link the body to a custom object (in this case, a <code>Particle</code>) by storing a reference to that object in the <code>plugin</code> property.</p>
 <p>Take a look at the updated constructor in the <code>Particle</code> class where the body is made. Note that the body-making procedure has been expanded by one line of code to add a <code>particle</code> property inside <code>plugin</code>. It’s important to make sure you’re adding a new property to the existing <code>plugin</code> object (in this case, <code>plugin.particle = this</code>) rather than overwriting the <code>plugin</code> object (for example, with <code>plugin = this</code>). The latter could interfere with other features or customizations.</p>
-<div class="snip-below">
+<div class="snip-below avoid-break">
   <pre class="codesplit" data-code-language="javascript">class Particle {
 
   constructor(x, y, radius) {

content/07_ca.html

@@ -431,7 +431,7 @@ <h2 id="the-game-of-life">The Game of Life</h2>
 <p>In 1970, Martin Gardner wrote a <em>Scientific American</em> article that documented mathematician John Conway’s new Game of Life, describing it as <em>recreational mathematics</em>: “To play life you must have a fairly large checkerboard and a plentiful supply of flat counters of two colors. It is possible to work with pencil and graph paper but it is much easier, particularly for beginners, to use counters and a board.”</p>
 <p>The Game of Life has become something of a computational cliché, as myriad projects display the game on LEDs, screens, projection surfaces, and so on. But practicing building the system with code is still valuable for a few reasons.</p>
 <p>For one, the Game of Life provides a good opportunity to practice skills with 2D arrays, nested loops, and more. Perhaps more important, however, this CA’s core principles are tied directly to a core goal of this book: simulating the natural world with code. The Game of Life algorithm and technical implementation will provide you with the inspiration and foundation to build simulations that exhibit the characteristics and behaviors of biological systems of reproduction.</p>
-<p>Unlike von Neumann, who created an extraordinarily complex system of states and rules, Conway wanted to achieve a similar lifelike result with the simplest set of rules possible. Gardner outlined Conway’s goals as follows:</p>
+<p>Unlike von Neumann, who created an extraordinarily complex system of states and rules, Conway wanted to achieve a similar lifelike result with the simplest set of rules possible. Gardner outlined Conway’s goals as follows.</p>
 <ol>
   <li><em>There should be no initial pattern for which there is a simple proof that the population can grow without limit.</em></li>
   <li><em>There should be initial patterns that apparently do grow without limit.</em></li>
@@ -571,7 +571,6 @@ <h3 id="the-implementation">The Implementation</h3>
 <p>Putting this all together:</p>
 <pre class="codesplit" data-code-language="javascript">// The next board
 let next = create2DArray(columns, rows);
-
 //{!2} Loop but skip the edge cells.
 for (let i = 1; i &#x3C; columns - 1; i++) {
   for (let j = 1; j &#x3C; rows - 1; j++) {
@@ -585,15 +584,13 @@ <h3 id="the-implementation">The Implementation</h3>
     }
     // Correct by subtracting the cell state.
     neighborSum -= board[i][j];
-
     //{!4} The rules of life!
     if (board[i][j] === 1 &#x26;&#x26; neighborSum &#x3C; 2) next[i][j] = 0;
     else if (board[i][j] === 1 &#x26;&#x26; neighborSum > 3) next[i][j] = 0;
     else if (board[i][j] === 0 &#x26;&#x26; neighborSum === 3) next[i][j] = 1;
     else next[i][j] = board[i][j];
   }
 }
-
 board = next;</pre>
 <p>Now I just need to draw the board. I’ll draw a square for each spot: white for off, black for on.</p>
 <div data-type="example">

content/08_fractals.html

@@ -117,12 +117,12 @@ <h3 id="implementing-recursive-functions">Implementing Recursive Functions</h3>
     return n * factorial(n - 1);
   }
 }</pre>
+<p>The <code>factorial()</code> function calls itself within its own definition. It may look a bit odd at first, but it works, as long as a stopping condition exists (in this case, <code>n &#x3C;= 1</code>) so the function doesn’t get stuck calling itself forever. (I’m using <code>&#x3C;=</code> instead of <code>===</code> as a safeguard against infinite recursion, but I should probably include additional error checking to manage noninteger or negative inputs to be more mathematically accurate.) Figure 8.7 illustrates the steps that unfold when <code>factorial(4)</code> is called.</p>
+<p>The function keeps calling itself, descending deeper and deeper down a rabbit hole of nested function calls until it reaches the stopping condition. Then it works its way up out of the hole, returning values until it arrives back home at the original call of <code>factorial(4)</code>.</p>
 <figure>
   <img src="images/08_fractals/08_fractals_9.png" alt="Figure 8.7: Visualizing the process of calling the recursive factorial() function">
   <figcaption>Figure 8.7: Visualizing the process of calling the recursive <code>factorial()</code> function</figcaption>
 </figure>
-<p>The <code>factorial()</code> function calls itself within its own definition. It may look a bit odd at first, but it works, as long as a stopping condition exists (in this case, <code>n &#x3C;= 1</code>) so the function doesn’t get stuck calling itself forever. (I’m using <code>&#x3C;=</code> instead of <code>===</code> as a safeguard against infinite recursion, but I should probably include additional error checking to manage noninteger or negative inputs to be more mathematically accurate.) Figure 8.7 illustrates the steps that unfold when <code>factorial(4)</code> is called.</p>
-<p>The function keeps calling itself, descending deeper and deeper down a rabbit hole of nested function calls until it reaches the stopping condition. Then it works its way up out of the hole, returning values until it arrives back home at the original call of <code>factorial(4)</code>.</p>
 <p>You can apply the same recursive principle illustrated by the <code>factorial()</code> function to graphics in a canvas, only instead of returning values, you draw shapes. This is precisely what you’ll see in the examples throughout this chapter. To begin, here’s a simple recursive function that draws increasingly smaller circles.</p>
 <div data-type="example">
   <h3 id="example-81-recursive-circles-once">Example 8.1: Recursive Circles Once</h3>

content/examples/06_libraries/6_1_default_matter_js/sketch.js

@@ -10,7 +10,6 @@ function setup() {
 
   // Make the Engine
   let engine = Engine.create();
-  engine.gravity.set(1, 0);
 
   let render = Matter.Render.create({
     canvas: canvas.elt,