Notion - Update docs

Author: shiffman

content/00_5_introduction.html

@@ -20,7 +20,7 @@ <h2 id="what-do-you-need-to-know">What Do You Need to Know?</h2>
 <p>I should also point out that experience with object-oriented programming is fairly critical. I’ll review some of the basics in Chapter 0, but if classes and objects are unfamiliar to you, I suggest watching <a href="https://thecodingtrain.com/oop">my p5.js and Processing object-oriented video tutorials, both also available at the Coding Train</a>.</p>
 <h2 id="how-are-you-reading-this-book">How Are You Reading This Book?</h2>
 <p>Are you reading this book on a Kindle? Printed paper? On your laptop in PDF form? On a tablet showing an animated HTML5 version? Are you strapped to a chair, absorbing the content directly into your brain via a series of electrodes, tubes, and cartridges?</p>
-<p>My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (<code>npm run build</code>), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the <a href="https://github.com/magicbookproject">Magic Book project</a>, an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.</p>
+<p>My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (<code>npm run build</code>), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the <a href="https://github.com/magicbookproject">Magic Book project</a>, which is an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.</p>
 <p>The reality of putting this book together isn’t quite so clean as that, and the story of how it happened is long. If you’re interested in learning more, make sure to read the book’s acknowledgments, and then go hire the people I’ve thanked to help you publish a book! <a href="https://github.com/nature-of-code">I’ll also include more details in the associated GitHub repository</a>.</p>
 <p>The bottom line is that no matter what format you’re reading it in, the material is all the same. The only difference will be in how you experience the code examples—more on that in <a href="#how-to-read-the-code">“How to Read the Code”</a>.</p>
 <h3 id="the-coding-train-connection">The Coding Train Connection</h3>

content/00_randomness.html

@@ -567,7 +567,6 @@ <h3 id="example-06-a-perlin-noise-walker">Example 0.6: A Perlin Noise Walker</h3
     // x- and y-position mapped from noise
     this.x = map(noise(this.tx), 0, 1, 0, width);
     this.y = map(noise(this.ty), 0, 1, 0, height);
-
     // Move forward through time.
     this.tx += 0.01;
     this.ty += 0.01;

content/01_vectors.html

@@ -658,13 +658,10 @@ <h3 id="example-16-normalizing-a-vector">Example 1.6: Normalizing a Vector</h3>
 
   translate(width / 2, height / 2);
   stroke(200);
-  strokeWeight(2);
   line(0, 0, mouse.x, mouse.y);
-
-  // In this example, after the vector is normalized, it’s multiplied by 50. Note that no matter where the mouse is, the vector always has the same length (50) because of the normalization process.
+  //{!2} In this example, after the vector is normalized, it’s multiplied by 50. Note that no matter where the mouse is, the vector always has the same length (50) because of the normalization process.
   mouse.normalize();
   mouse.mult(50);
-
   stroke(0);
   strokeWeight(8);
   line(0, 0, mouse.x, mouse.y);
@@ -713,7 +710,7 @@ <h2 id="motion-with-vectors">Motion with Vectors</h2>
 <p>The <code>Mover</code> class also needs a function that determines what the object should do when it reaches the edge of the canvas. For now, I’ll do something simple and have it wrap around the edges:</p>
 <div class="snip-above">
   <pre class="codesplit" data-code-language="javascript">  checkEdges() {
-    //{!11} When it reaches one edge, set the position to the other edge.
+    //{!5} When it reaches one edge, set the position to the other edge.
     if (this.position.x > width) {
       this.position.x = 0;
     } else if (this.position.x &#x3C; 0) {

content/02_forces.html

@@ -589,7 +589,6 @@ <h3 id="example-25-fluid-resistance">Example 2.5: Fluid Resistance</h3>
   </figure>
 </div>
 <pre class="codesplit" data-code-language="javascript">let movers = [];
-
 let liquid;
 
 function setup() {
@@ -623,7 +622,6 @@ <h3 id="example-25-fluid-resistance">Example 2.5: Fluid Resistance</h3>
     let gravity = createVector(0, 0.1 * movers[i].mass);
     // Apply gravity.
     movers[i].applyForce(gravity);
-
     // Update and display the mover.
     movers[i].update();
     movers[i].show();
@@ -740,10 +738,8 @@ <h3 id="gravitational-attraction">Gravitational Attraction</h3>
 
 function draw() {
   background(255);
-
-  // Draw the <code>Attractor</code> object.
+  //{!1} Draw the <code>Attractor</code> object.
   attractor.show();
-
   mover.update();
   mover.show();
 }</pre>
@@ -812,10 +808,9 @@ <h3 id="gravitational-attraction">Gravitational Attraction</h3>
 <pre class="codesplit" data-code-language="javascript">function draw() {
   background(255);
 
-  // Calculate the attraction force and apply it.
+  //{!2} Calculate the attraction force and apply it.
   <strong>let force = attractor.attract(mover);
   mover.applyForce(force);</strong>
-
   mover.update();
 
   attractor.show();
@@ -915,7 +910,6 @@ <h3 id="example-27-attraction-with-many-movers">Example 2.7: Attraction with Man
 </div>
 <pre class="codesplit" data-code-language="javascript">// Now you have 10 movers!
 let movers = [];
-
 let attractor;
 
 function setup() {
@@ -936,7 +930,6 @@ <h3 id="example-27-attraction-with-many-movers">Example 2.7: Attraction with Man
     //{!1} Calculate an attraction force for each <code>Mover</code> object.
     let force = attractor.attract(movers[i]);
     movers[i].applyForce(force);
-
     movers[i].update();
     movers[i].show();
   }

content/03_oscillation.html

@@ -269,9 +269,8 @@ <h2 id="pointing-in-the-direction-of-movement">Pointing in the Direction of Move
 </table>
 <p>Now that I have the formula, let’s see where it should go in the <code>Mover</code> class’s <code>show()</code> method to make the mover (now drawn as a rectangle) point in its direction of motion. Note that in p5.js, the function for inverse tangent is <code>atan()</code>:</p>
 <pre class="codesplit" data-code-language="javascript">  show() {
-    // Solve for the angle by using <code>atan()</code>.
+    //{!1} Solve for the angle by using <code>atan()</code>.
     let angle = atan(this.velocity.y / this.velocity.x);
-
     stroke(0);
     fill(175);
     push();
@@ -483,9 +482,8 @@ <h3 id="example-35-simple-harmonic-motion-i">Example 3.5: Simple Harmonic Motion
   let period = 120;
   let amplitude = 200;
 
-  // Calculate the horizontal position according to the formula for simple harmonic motion.
+  //{!1} Calculate the horizontal position according to the formula for simple harmonic motion.
   let x = amplitude * sin(TWO_PI * frameCount / period);
-
   stroke(0);
   fill(127);
   translate(width / 2, height / 2);
@@ -748,7 +746,6 @@ <h2 id="spring-forces">Spring Forces</h2>
 let force = p5.Vector.sub(bob, anchor);
 let currentLength = force.mag();
 let x = currentLength - restLength;
-
 // Put it together: direction and magnitude!
 force.setMag(-1 * k * x);</pre>
 <p>Now that I have the algorithm for computing the spring force, the question remains: What OOP structure should I use? This is one of those situations that has no one correct answer. Several possibilities exist, and the one I choose depends on my goals and personal coding style.</p>
@@ -1025,11 +1022,9 @@ <h3 id="example-311-swinging-pendulum">Example 3.11: Swinging Pendulum</h3>
     let gravity = 0.4;
     // Formula for angular acceleration
     this.angleAcceleration = (-1 * gravity / this.r) * sin(this.angle);
-
     // Standard angular motion algorithm
     this.angleVelocity += this.angleAcceleration;
     this.angle += this.angleVelocity;
-
     //{!1} Apply some damping.
     this.angleVelocity *= this.damping;
   }

content/04_particles.html

@@ -129,11 +129,9 @@ <h3 id="example-41-a-single-particle">Example 4.1: A Single Particle</h3>
   // Operate the single particle.
   particle.update();
   particle.show();
-
   // Apply a gravity force.
   let gravity = createVector(0, 0.1);
   particle.applyForce(gravity);
-
   // Check the particle’s state and make a new particle.
   if (particle.isDead()) {
     particle = new Particle(width / 2, 20);
@@ -610,7 +608,6 @@ <h3 id="inheritance-basics">Inheritance Basics</h3>
 <p>Here’s how the syntax of inheritance works:</p>
 <pre class="codesplit" data-code-language="javascript">//{!1} The <code>Animal</code> class is the parent (or superclass).
 class Animal {
-
   constructor() {
     // <code>Dog</code> and <code>Cat</code> inherit the variable <code>age</code>.
     this.age = 0;
@@ -1101,7 +1098,6 @@ <h3 id="example-47-a-particle-system-with-a-repeller">Example 4.7: A Particle Sy
 
 //{!1} The emitter manages all the particles.
 class Emitter {
-
   constructor(x, y) {
     this.origin = createVector(x, y);
     this.particles = [];