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

[Notion] Update docs

Author: shiffman

content/03_oscillation.html

@@ -909,12 +909,12 @@ <h2 id="the-pendulum">The Pendulum</h2>
 <p>Solving for <span data-type="equation">F_{gx}</span>, I get this:</p>
 <div data-type="equation">F_{gx} = F_g \times \sin(\theta)</div>
 <p>I’ll now rename this force <span data-type="equation">F_p</span> for <em>force of the pendulum</em>. In Figure 3.21, I’ve restored the diagram to its original orientation and relabeled the components. I’ve also moved the starting point of <span data-type="equation">F_p</span> from the bottom of the right triangle to the bob’s center, to clarify how this force moves the bob.</p>
+<p>There it is. The net force of the pendulum that causes the rotation is calculated as follows:</p>
+<div data-type="equation">F_p = F_g \times \sin(\theta)</div>
 <figure>
   <img src="images/03_oscillation/03_oscillation_18.png" alt="Figure 3.21: F_{gx} is now labeled F_p, the net force in the direction of motion.">
   <figcaption>Figure 3.21: <span data-type="equation">F_{gx}</span> is now labeled <span data-type="equation">F_p</span>, the net force in the direction of motion.</figcaption>
 </figure>
-<p>There it is. The net force of the pendulum that causes the rotation is calculated as follows:</p>
-<div data-type="equation">F_p = F_g \times \sin(\theta)</div>
 <p>Lest you forget, however, my goal is to determine the angular acceleration of the pendulum. Once I have that, I’ll be able to apply the rules of motion to find a new angle <span data-type="equation">\theta</span> for each frame of the animation:</p>
 <div data-type="equation">\text{angular velocity} = \text{angular velocity} + \text{angular acceleration}</div>
 <div data-type="equation">\text{angle} = \text{angle + angular velocity}</div>
@@ -964,13 +964,11 @@ <h2 id="the-pendulum">The Pendulum</h2>
   }</pre>
 </div>
 <p>Note that the acceleration calculation now includes a multiplication by –1. When the pendulum is to the right of its resting position, the angle is positive, and so the sine of the angle is also positive. However, gravity should pull the bob back toward the resting position. Conversely, when the pendulum is to the left of its resting position, the angle is negative, and so its sine is negative too. In this case, the pulling force should be positive. Multiplying by –1 is necessary in both scenarios.</p>
-<div class="half-width-right">
-  <figure>
-    <img src="images/03_oscillation/03_oscillation_19.png" alt="Figure 3.22: The bob position relative to the pivot in polar and Cartesian coordinates">
-    <figcaption>Figure 3.22: The bob position relative to the pivot in polar and Cartesian coordinates</figcaption>
-  </figure>
-</div>
 <p>Next, I need a <code>show()</code> method to draw the pendulum on the canvas. But where exactly should I draw it? How do I calculate the x- and y-coordinates (Cartesian!) for both the pendulum’s pivot point (let’s call it <code>pivot</code>) and bob position (let’s call it <code>bob</code>)? This may be getting a little tiresome, but the answer, yet again, is trigonometry, as shown in Figure 3.22.</p>
+<figure>
+  <img src="images/03_oscillation/03_oscillation_19.png" alt="Figure 3.22: The bob position relative to the pivot in polar and Cartesian coordinates">
+  <figcaption>Figure 3.22: The bob position relative to the pivot in polar and Cartesian coordinates</figcaption>
+</figure>
 <p>First, I’ll need to add a <code>this.pivot</code> property to the constructor to specify where to draw the pendulum on the canvas:</p>
 <pre class="codesplit" data-code-language="javascript">this.pivot = createVector(100, 10);</pre>
 <p>I know the bob should be a set distance away from the pivot, as determined by the arm length. That’s my variable <code>r</code>, which I’ll set now:</p>