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

[Notion] Update docs

content/06_libraries.html

@@ -291,9 +291,11 @@ <h3 id="render">Render</h3>
 <p>Once a body is added to the world, Matter.js will always know it’s there, check it for collisions, and update its position appropriately, according to any forces in the environment. It’ll do all that without you having to lift a finger! But how do you draw the body?</p>
 <p>In the next section, I’ll show you how to query Matter.js for the position of the various bodies in order to render the world with p5.js. The way that works is fundamental to being able to control the look of your own animations. This is your time to shine: you can be the designer of your world, using your creativity and p5.js skills to visualize the bodies, while politely asking Matter.js to compute all the physics in the background.</p>
 <p>That said, Matter.js does include a fairly simple and straightforward <code>Render</code> class, which is incredibly useful for quickly seeing and debugging the world you’ve designed. It provides ways to customize the <em>debug drawing</em> style, but I find the defaults perfectly adequate for quickly double-checking that I’ve configured a world correctly.</p>
-<p>The first step is to call <code>Matter.Render.create()</code> (or <code>Render.create()</code>, assuming an alias). This method expects an object with the desired settings for the renderer, which I’ll call <code>params</code>:</p>
-<pre class="codesplit" data-code-language="javascript">// Store the canvas in a variable.
+<p>The first step is to call <code>Matter.Render.create()</code> (or <code>Render.create()</code>, assuming an alias). This method expects an object with the desired settings for the renderer, which I’ll call <code>params</code>.</p>
+<div class="avoid-break">
+  <pre class="codesplit" data-code-language="javascript">// Store the canvas in a variable.
 let canvas = createCanvas(640, 360);
+
 // Configure the renderer.
 let params = {
   canvas: canvas.elt,
@@ -302,6 +304,7 @@ <h3 id="render">Render</h3>
 };
 // Create the renderer.
 let render = Render.create(params);</pre>
+</div>
 <p>Notice that I’m storing a reference to the p5.js canvas in the <code>canvas</code> variable. This is necessary because I need to tell the renderer to draw in a specific canvas. Matter.js doesn’t know about p5.js, so the canvas it’s assigned is a native HTML5 canvas, stored inside the <code>elt</code> property of a p5.js canvas object. The engine is the <code>engine</code> I previously created. The Matter.js default canvas dimensions are 800×600, so if I prefer a different size, I need to configure an <code>options</code> property with <code>width</code> and <code>height</code>.</p>
 <p>Once I have a <code>render</code> object, I need to tell Matter.js to run it:</p>
 <pre class="codesplit" data-code-language="javascript">// Run the renderer!
@@ -635,23 +638,19 @@ <h3 id="example-65-multiple-shapes-on-one-body">Example 6.5: Multiple Shapes on
 <pre class="codesplit" data-code-language="javascript">  show() {
     // The angle comes from the compound body.
     let angle = this.body.angle;
-
     //{!2} Get the position for each part.
     let position1 = this.part1.position;
     let position2 = this.part2.position;
-
     fill(200);
     stroke(0);
     strokeWeight(1);
-
     // Translate and rotate the rectangle (<code>part1</code>).
     push();
     translate(position1.x, position1.y);    
     rotate(angle);
     rectMode(CENTER);
     rect(0, 0, this.w, this.h);
     pop();
-
     // Translate and rotate the circle (<code>part2</code>).
     push();
     translate(position2.x, position2.y);    
@@ -662,6 +661,7 @@ <h3 id="example-65-multiple-shapes-on-one-body">Example 6.5: Multiple Shapes on
 <p>Before moving on, I want to stress that what you draw in your canvas window doesn’t magically experience perfect physics just by the mere act of creating Matter.js bodies. The chapter’s examples have worked because I’ve been carefully matching the way I’ve drawn each p5.js body with the way I’ve defined the geometry of each Matter.js body. If you accidentally draw a shape differently, you won’t get an error—not from p5.js or from Matter.js. However, your sketch will look odd, and the physics won’t work correctly because the world you’re seeing won’t be aligned with the world as Matter.js understands it.</p>
 <p>To illustrate, let me return to Example 6.5. A lollipop is a compound body consisting of two parts, a rectangle (<code>this.part1</code>) and a circle (<code>this.part2</code>). I’ve been drawing each lollipop by getting the positions for the two parts separately: <code>this.part1.position</code> and <code>this.part2.position</code>. However, the overall compound body also has a position, <code>this.body.position</code>. It would be tempting to use that as the position for drawing the rectangle, and to figure out the circle’s position manually using an offset. After all, that’s how I conceived of the compound shape to begin with (look back at Figure 6.8):</p>
 <pre class="codesplit" data-code-language="javascript">  show() {
+    //{!1} Getting the body position rather than the parts. 
     let position = this.body.position;
     let angle = this.body.angle;
     push();