Notion - Update docs

content/06_libraries.html

@@ -195,8 +195,8 @@ function setup() {
   engine = Engine.create();
 }</pre>
 <p>Notice how the very first line of code creates a variable called <code>Engine</code> and sets it equal to <code>Matter.Engine</code>. Here, I am deciding to point the single keyword <code>Engine</code> to the <code>Engine</code> class namespaced inside matter.js. I am making this decision because I know that I will not be using the word <code>Engine</code> for any other variables (nor does it conflict with something in p5.js) and want to be able to keep my code less verbose. I’ll be doing this with <code>Vector</code>, <code>Bodies</code>, <code>Composite</code>, and more as I continue to build the examples. (But while the linked source code will always include all the alias’s, I won’t always include them in the book text itself.)</p>
-<p><span class="highlight"><strong>Object Destructuring
+<p><span class="highlight"><strong>Object Destructuring</strong></span>
-</strong>Object destructuring in JavaScript is a technique to extract properties from an object and assign them to variables. In the case of matter.js, the <code>Matter</code>object contains the <code>Engine</code> property. An alias can be set with <code>let Engine = Matter.Engine</code>, however, by with destructuring, the <code>Engine</code>can be accessed more concisely: <code>let { Engine } = Matter</code>. In the examples in this chapter, I will create multiple aliases with this methodology.</span>
+  <p><strong></strong>Object destructuring in JavaScript is a technique to extract properties from an object and assign them to variables. In the case of matter.js, the <code>Matter</code>object contains the <code>Engine</code> property. An alias can be set with <code>let Engine = Matter.Engine</code>, however, by with destructuring, the <code>Engine</code>can be accessed more concisely: <code>let { Engine } = Matter</code>. In the examples in this chapter, I will create multiple aliases with this methodology.</p>
   <pre class="codesplit" data-code-language="javascript">// Using Object Destructuring to extract aliases for Engine and Vector
 let { Engine, Vector } = Matter;</pre>
 </p>
@@ -1108,28 +1108,40 @@ location.add(velocity);</pre>
   </thead>
   <tbody>
     <tr>
-      <td><code>let a = createVector(1, -1);
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = createVector(1, -1);
 let b = createVector(3, 4);
-a.add(b);</code></td>
+a.add(b);</pre>
-      <td><code>let a = new Vec2D(1, -1);
+      </td>
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = new Vec2D(1, -1);
 let b = new Vec2D(3, 4);
-a.addSelf(b);</code></td>
+a.addSelf(b);</pre>
+      </td>
     </tr>
     <tr>
-      <td><code>let a = createVector(1, -1);
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = createVector(1, -1);
 let b = createVector(3, 4);
-let c = p5.Vector.add(a, b);</code></td>
+let c = p5.Vector.add(a, b);</pre>
-      <td><code>let a = new Vec2D(1, -1);
+      </td>
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = new Vec2D(1, -1);
 let b = new Vec2D(3, 4);
-let c = a.add(b);</code></td>
+let c = a.add(b);</pre>
+      </td>
     </tr>
     <tr>
-      <td><code>let a = createVector(1, -1);
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = createVector(1, -1);
 let m = a.mag();
-a.normalize();</code></td>
+a.normalize();</pre>
-      <td><code>let a = new Vec2D(1, -1);
+      </td>
+      <td>
+        <pre class="codesplit" data-code-language="javascript">let a = new Vec2D(1, -1);
 let m = a.magnitude();
-a.normalize();</code></td>
+a.normalize();</pre>
+      </td>
     </tr>
   </tbody>
 </table>
@@ -1559,8 +1571,4 @@ let behavior = new AttractionBehavior(particle, distance, strength);</pre>
     <li>Use spring (or joint) connections between objects to control their interactions. Create and delete these springs on the fly. Consider making these connections visible or invisible to the viewer.</li>
   </ul>
 </div>
-<figure>
-  <img src="images/06_libraries/06_libraries_19.png" alt="">
-  <figcaption></figcaption>
-</figure>
 </section>

content/examples/02_forces/example_2_6_attraction/style.css

@@ -1,6 +1,7 @@
-html, body {
+html,
- margin: 0;
+body {
- padding: 0;
+  margin: 0;
+  padding: 0;
 }
 canvas {
   display: block;