Notion - Update docs

content/02_forces.html

@@ -71,7 +71,7 @@
 <p>I’ve effectively removed mass from the equation, making the acceleration of an object equal to force. This is great news. After all, in Chapter 1 I described acceleration as the key to controlling the movement of objects in a canvas. I said that <code>position</code> changes according to <code>velocity</code>, and <code>velocity</code> according to <code>acceleration</code>. Acceleration seemed to be where it all began. Now you can see that <em>force</em> is truly where it all begins.</p>
 <p>Let’s take the <code>Mover</code> class, with position, velocity, and acceleration:</p>
 <pre class="codesplit" data-code-language="javascript">class Mover {
-  constructor(){
+  constructor() {
     this.position = createVector();
     this.velocity = createVector();
     this.acceleration = createVector();
@@ -125,7 +125,7 @@ mover.update();</pre>
 <p>Newton’s second law is really <span data-type="equation">\vec{F} = M \times \vec{A}</span>, not <span data-type="equation">\vec{F} = \vec{A}</span>. How can I incorporate mass into the simulation? To start, it’s as easy as adding a <code>this.mass</code> instance variable to the <code>Mover</code> class, but I need to spend a little more time here because of another impending complication.</p>
 <p>First, though, I’ll add mass:</p>
 <pre class="codesplit" data-code-language="javascript">class Mover {
-  constructor(){
+  constructor() {
     this.position = createVector();
     this.velocity = createVector();
     this.acceleration = createVector();
@@ -593,7 +593,7 @@ function setup() {
     // The x values are spaced out evenly according to i.
     movers[i] = new Mover(40 + i * 70, 0, mass);
   }
-  liquid = new Liquid(0, height/2, width, height/2, 0.1);
+  liquid = new Liquid(0, height / 2, width, height / 2, 0.1);
 }
 
 function draw() {
@@ -941,10 +941,10 @@ function draw() {
 <p>Although less accurate than using precise equations of motion, the examples built in this chapter can model both the two-body and three-body problems. To begin, I’ll move the <code>attract()</code> method from the <code>Attractor</code> class into the <code>Mover</code> class (which I will now call <code>Body</code>).</p>
 <pre class="codesplit" data-code-language="javascript">// The Mover is now called a Body
 class Body {
-	
+
   /* All the other stuff from before. */
 
-	// The attract method is now part of the Body class.
+  // The attract method is now part of the Body class.
   attract(body) {
     let force = p5.Vector.sub(this.position, body.position);
     let d = constrain(force.mag(), 5, 25);
@@ -959,7 +959,7 @@ let bodyB;
 
 function setup() {
   createCanvas(640, 240);
-	// Creating two Body objects A and B
+  // Creating two Body objects A and B
   bodyA = new Body(320, 40);
   bodyB = new Body(320, 200);
 }
@@ -967,7 +967,7 @@ function setup() {
 function draw() {
   background(255);
   
-	// A attracts B and B attracts A
+  //{!2} A attracts B and B attracts A
   bodyA.attract(bodyB);
   bodyB.attract(bodyA);
 
@@ -988,8 +988,8 @@ function draw() {
   createCanvas(640, 240);
   bodyA = new Body(320, 40);
   bodyB = new Body(320, 200);
-	
-	// Assigning horizontal velocities (in opposite directions) to each Body
+
+  // Assigning horizontal velocities (in opposite directions) to each Body
   bodyA.velocity = createVector(1, 0);
   bodyB.velocity = createVector(-1, 0);
 }</pre>

content/03_oscillation.html

@@ -120,7 +120,7 @@ function draw() {
 </div>
 <p>The logical next step is to incorporate this idea of angular motion into the <code>Mover</code> class. First, I need to add some variables to the class’s constructor.</p>
 <pre class="codesplit" data-code-language="javascript">class Mover {
-  constructor(){
+  constructor() {
     this.position = createVector();
     this.velocity = createVector();
     this.acceleration = createVector();
@@ -665,7 +665,7 @@ function setup() {
 
 function draw() {
   background(255);
-	
+
   // Each time through draw, the angle that increments is set to startAngle
   let angle = startAngle;
   
@@ -946,7 +946,7 @@ function draw()  {
 </ul>
 <p>The <code>Pendulum</code> class needs all these properties, too.</p>
 <pre class="codesplit" data-code-language="javascript">class Pendulum  {
-  constructor(){
+  constructor() {
     // Length of arm
     this.r = ????;
     // Pendulum arm angle

content/04_particles.html

@@ -456,7 +456,7 @@ function draw() {
 
 function setup() {
   createCanvas(640, 240);
-  emitter = new Emitter(width/2, 20);
+  emitter = new Emitter(width / 2, 20);
 }
 
 function draw() {
@@ -869,7 +869,7 @@ for (let animal of kingdom) {
 
   applyForce(force) {
     // {!2} Divide force by mass.
-    const f = force.copy();
+    let f = force.copy();
     f.div(this.mass);
     this.acceleration.add(f);
 }</pre>
@@ -885,8 +885,8 @@ for (let animal of kingdom) {
 <pre class="codesplit" data-code-language="javascript">function draw() {
   background(255);
 	
-	//{inline} Apply a force to all particles?
-	
+  /* Apply a force to all particles? */
+
   emitter.addParticle();
   emitter.run();
 }</pre>
@@ -954,7 +954,7 @@ class Emitter {
   run() {
     //{!7} Can’t use the enhanced loop because checking for particles to delete.
     for (let i = this.particles.length - 1; i >= 0; i--) {
-      const particle = this.particles[i];
+      let particle = this.particles[i];
       particle.run();
       if (particle.isDead()) {
         this.particles.splice(i, 1);
@@ -1117,7 +1117,7 @@ class Emitter {
 
   run() {
     for (let i = this.particles.length - 1; i >= 0; i--) {
-      const particle = this.particles[i];
+      let particle = this.particles[i];
       particle.run();
       if (particle.isDead()) {
         this.particles.splice(i, 1);

content/05_steering.html

@@ -957,7 +957,7 @@ function setup() {
   }
 }</pre>
 <p>Now, when it comes time to manipulate all the vehicles in <code>draw()</code>, I can loop through the array and call the necessary methods.</p>
-<pre class="codesplit" data-code-language="javascript">function draw(){
+<pre class="codesplit" data-code-language="javascript">function draw() {
   for (let vehicle of vehicles) {
     vehicle.update();
     vehicle.show();
@@ -1035,11 +1035,10 @@ function draw() {
 <p>This isn’t enough. I have a fleeing vector now, but what I really need is the average of the fleeing vectors for all the vehicles that are too close. How do I compute an average? Add up all the vectors and divide by the total.</p>
 <pre class="codesplit" data-code-language="javascript">  //{!1 .bold} Start with an empty vector.
   let sum = createVector();
-	//{!1 .bold} We have to keep track of how many Vehicles are too close.
+  //{!1 .bold} We have to keep track of how many Vehicles are too close.
   let count = 0;
 
   for (let other of vehicles) {
-
     let d = p5.Vector.dist(this.position, other.position);
     if (this !== other &#x26;&#x26; d &#x3C; desiredseparation) {
       let diff = p5.Vector.sub(this.position, other.position);
@@ -1055,7 +1054,7 @@ function draw() {
   // if nothing is too close (not to mention I can’t
   // divide by zero!).
   if (count > 0) {
-		//{.bold}
+    //{.bold}
     sum.div(count);
   }</pre>
 <p>Once I have the average vector (stored in the variable <code>sum</code>), that vector can be scaled to the maximum speed and become the desired velocity—the vehicle <em>desires</em> to move in that direction at maximum speed! (In fact, I really don't have to divide by <code>count</code> anymore since the magnitude is set manually.) And once I have the desired velocity, it’s the same old Reynolds story: steering equals desired minus velocity.</p>
@@ -1154,7 +1153,7 @@ function draw() {
 
     //{!1 .line-through}
     this.applyForce(steer);
-		//{!1} Instead of applying the force return the vector.
+    //{!1} Instead of applying the force return the vector.
     return steer;
   }</pre>
 <p>This is a subtle change, but incredibly important: it allows the strength of these forces to be weighted all in one place.</p>