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

orphans

content/00_5_introduction.html

@@ -15,10 +15,7 @@
 <p>All the examples in this book have been tested with p5.js version 1.9.0, but for the most part they should also work with earlier versions. I’ll be keeping them up to date with the latest version. The most <a href="https://natureofcode.com/">recent code can always be found on this book’s website</a> and <a href="https://github.com/nature-of-code">its associated GitHub repository</a>.</p>
 <h2 id="what-do-you-need-to-know">What Do You Need to Know?</h2>
 <p>The prerequisites for understanding the material in this book could be stated as “one semester of programming instruction with p5.js, Processing, or any other creative coding environment.” That said, there’s no reason you couldn’t read this book having learned programming with a different language or development environment.</p>
-<p>
-  If you’ve never written any code before, while you could read the book for the concepts and inspiration, you’ll likely struggle with the code because I’m assuming knowledge of the fundamentals: variables, conditionals, loops, functions, objects, and arrays. If these concepts are new to you, my <a href="https://thecodingtrain.com/p5js">“Code! Programming with p5.js”</a> and <a href="https://thecodingtrain.com/processing">“Learning Processing”</a> video courses provide the fundamentals of what you need
-  to know.
-</p>
+<p>If you’ve never written any code before, while you could read the book for the concepts and inspiration, you’ll likely struggle with the code because I’m assuming knowledge of the fundamentals: variables, conditionals, loops, functions, objects, and arrays. If these concepts are new to you, my <a href="https://thecodingtrain.com/p5js">“Code! Programming with p5.js”</a> and <a href="https://thecodingtrain.com/processing">“Learning Processing”</a> video courses provide the fundamentals of what you need<br>to know.</p>
 <p>If you’re an experienced programmer but haven’t worked with p5.js, you can probably pick it up by <a href="https://p5js.org/">checking out the p5.js documentation</a>, poking through the examples, and <a href="https://p5js.org/get-started">reading through the library’s “Get Started” page</a>.</p>
 <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>
@@ -42,7 +39,7 @@
 <p>You draw a shape at position <code>x</code>. With each frame of animation, you increment the value of <code>x</code>, redraw the shape, and voilà—the illusion of motion! Maybe you took it a step or two further and included a <code>y</code> position, as well as variables for speed along the x- and y-axes:</p>
 <pre class="codesplit" data-code-language="javascript">x = x + xspeed;
 y = y + yspeed;</pre>
-<p style="letter-spacing : 0.1">Part 1 of this story will take this idea even further. After exploring how to use different flavors of randomness to drive an object’s motion (<strong>Chapter 0</strong>), I’m going to take these <code>xspeed</code> and <code>yspeed</code> variables and demonstrate how together they form a vector (<strong>Chapter 1</strong>). You won’t get any new functionality out of this, but it will build a solid foundation for programming motion in the rest of the book.</p>
+<p>Part 1 of this story will take this idea even further. After exploring how to use different flavors of randomness to drive an object’s motion (<strong>Chapter 0</strong>), I’m going to take these <code>xspeed</code> and <code>yspeed</code> variables and demonstrate how together they form a vector (<strong>Chapter 1</strong>). You won’t get any new functionality out of this, but it will build a solid foundation for programming motion in the rest of<br>the book.</p>
 <p>Once you know a little something about vectors, you’re going to quickly realize that a force (<strong>Chapter 2</strong>) is a vector. Kick a soccer ball and you’re applying a force. What does a force cause an object to do? According to Sir Isaac Newton, force equals mass times acceleration, so that force causes an object to accelerate. Modeling forces will allow you to create systems with dynamic motion, in which objects move according to a variety of rules.</p>
 <p>Now, that soccer ball to which you applied a force might have also been spinning. If an object moves according to its <em>linear</em> acceleration, it can spin according to its <em>angular</em> acceleration (<strong>Chapter 3</strong>). Understanding the basics of angles and trigonometry will allow you to model rotating objects as well as grasp the principles behind oscillating motion, like a pendulum swinging or a spring bouncing.</p>
 <p>Once you’ve tackled the basics of motion and forces for an individual inanimate object, I’ll show you how to make thousands upon thousands of those objects and manage them as a single unit called a <em>particle system</em> (<strong>Chapter 4</strong>). Particle systems are also a good excuse to look at some additional features of object-oriented programming—namely, inheritance and polymorphism.</p>

content/00_randomness.html

@@ -309,7 +309,7 @@ if (num < 0.6) {
   </div>
   <figcaption>Figure 0.2: Two example bell curves of a normal distribution, with a low (left) and high (right) standard deviation</figcaption>
 </figure>
-<p>On the left is a distribution with a very low standard deviation, with the majority of the values piling up around the mean (they don’t deviate much from the standard). The version on the right has a higher standard deviation, so the values are more evenly spread out from the average (they deviate more).</p>
+<p>On the left is a distribution with a very low standard deviation, with the majority of the values piling up around the mean (they don’t deviate much from the standard). The version on the right has a higher standard deviation, so the values are more evenly spread out from the average (they<br>deviate more).</p>
 <p>The numbers work out as follows: given a population, 68 percent of its members will have values in the range of one standard deviation from the mean, 95 percent within two standard deviations, and 99.7 percent within three standard deviations. Given a standard deviation of 5 pixels, only 0.3 percent of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250). Meanwhile, 68 percent of the monkey heights will be from 245 to 255 pixels.</p>
 <p>Luckily, to use a normal distribution of random numbers in a p5.js sketch, you don’t have to do any of these calculations manually. Instead, the <code>randomGaussian()</code> function takes care of the math and returns random numbers with a normal distribution:</p>
 <pre class="codesplit" data-code-language="javascript">function draw() {

content/03_oscillation.html

@@ -884,7 +884,7 @@ function draw()  {
   </figure>
 </div>
 <p>Instead of using <em>linear</em> acceleration and velocity, I’m going to describe the motion of the pendulum in terms of <em>angular</em> acceleration and <em>angular </em>velocity, which refer to the change of the arm’s angle <span data-type="equation">\theta</span> relative to the pendulum’s resting position. I should first warn you, especially if you’re a seasoned physicist, that I’m going to conveniently ignore several important concepts here: conservation of energy, momentum, centripetal force, and more. This isn’t intended to be a comprehensive description of pendulum physics. My goal is to offer you an opportunity to practice your new skills in trigonometry and further explore the relationship between forces and angles through a concrete example.</p>
-<p>To calculate the pendulum’s angular acceleration, I’m going to use Newton’s second law of motion but with a little trigonometric twist. Take a look at Figure 3.19 and tilt your head so that the pendulum’s arm becomes the vertical axis. The force of gravity suddenly points askew, a little to the left—it’s at an angle with respect to your tilted head. If this is starting to hurt your neck, don’t worry. I’ll redraw the tilted figure and relabel the forces <span data-type="equation">F_g</span> for gravity and <span data-type="equation">T</span> for tension (Figure 3.20, left).</p>
+<p>To calculate the pendulum’s angular acceleration, I’m going to use Newton’s second law of motion but with a little trigonometric twist. Take a look at Figure 3.19 and tilt your head so that the pendulum’s arm becomes the vertical axis. The force of gravity suddenly points askew, a little to the left—it’s at an angle with respect to your tilted head. If this is starting to hurt your neck, don’t worry. I’ll redraw the tilted figure and relabel the forces <span data-type="equation">F_g</span> for gravity and <span data-type="equation">T</span> for tension (Figure<br>3.20, left).</p>
 <p>Let’s now take the force of gravity and divide its vector into x- and y-components, with the arm as the new y-axis<em>.</em> These components form a right triangle, with the force of gravity as the hypotenuse (Figure 3.20, right). I’ll call them <span data-type="equation">F_{gx}</span> and <span data-type="equation">F_{gy}</span>, but what do these components mean? Well, the <span data-type="equation">F_{gy}</span> component represents the force that’s opposite to <span data-type="equation">T</span>, the tension force. Remember, the tension force is what keeps the bob from falling off.</p>
 <p>The other component, <span data-type="equation">F_{gx}</span>, is perpendicular to the arm of the pendulum, and it’s the force I’ve been looking for all along! It causes the pendulum to rotate. As the pendulum swings, the y-axis (the arm) will always be perpendicular to the direction of motion. Therefore, I can ignore the tension and <span data-type="equation">F_{gy}</span> forces and focus on <span data-type="equation">F_{gx}</span>, which is the <strong>net force</strong> in the direction of motion. And because this force is part of a right triangle, I can calculate it with . . . you guessed it, trigonometry!</p>
 <figure>