Notion - Update docs

content/01_vectors.html

@@ -795,7 +795,7 @@ <h3 id="example-17-motion-101-velocity">Example 1.7: Motion 101 (Velocity)</h3>
 }</pre>
 <p>If OOP is at all new to you, one aspect here may seem a bit strange. I spent the beginning of this chapter discussing the <code>p5.Vector</code> class, and this class is the template for making the <code>position</code> object and the <code>velocity</code> object. So what are those objects doing inside yet another object, the <code>Mover</code> object?</p>
 <p>In fact, this is just about the most normal thing ever. An object is something that holds data (and functionality). That data can be numbers, or it can be other objects (arrays too)! You’ll see this over and over again in this book. In <a href="/particles#why-particle-systems-matter">Chapter 4</a>, for example, I’ll write a class to describe a system of particles. That <code>ParticleSystem</code> object will include a list of <code>Particle</code> objects . . . and each <code>Particle</code> object will have as its data several <code>p5.Vector</code> objects!</p>
-<p>You may have also noticed in the <code>Mover</code> class that I’m setting the initial position and velocity directly within the constructor, without using any arguments. While this approach keeps the code simple for now, I’ll explore the benefits of adding arguments to the constructor in <a href="/force#">Chapter 2</a>.</p>
+<p>You may have also noticed in the <code>Mover</code> class that I’m setting the initial position and velocity directly within the constructor, without using any arguments. While this approach keeps the code simple for now, I’ll explore the benefits of adding arguments to the constructor in <a href="/forces#">Chapter 2</a>.</p>
 <p>At this point, you hopefully feel comfortable with two concepts: (1) what a vector is and (2) how to use vectors inside an object to keep track of its position and movement. This is an excellent first step and deserves a mild round of applause. Before standing ovations are in order, however, you need to make one more, somewhat bigger step forward. After all, watching the Motion 101 example is fairly boring. The circle never speeds up, never slows down, and never turns. For more sophisticated motion—the kind of motion that appears in the world around us—one more vector needs to be added to the class: <code>acceleration</code>.</p>
 <h2 id="acceleration">Acceleration</h2>
 <p><strong>Acceleration</strong> is the<em> </em>rate of change of velocity. Think about that definition for a moment. Is it a new concept? Not really. Earlier I defined velocity as<em> </em>the rate of change of position, so in essence I’m developing a trickle-down effect. Acceleration affects velocity, which in turn affects position. (To provide some brief foreshadowing, this point will become even more crucial in the next chapter, when I show how forces like friction affect acceleration, which affects velocity, which affects position.) In code, this trickle-down effect reads like this:</p>

content/03_oscillation.html

@@ -16,9 +16,9 @@ <h1 id="chapter-3-oscillation">Chapter 3. Oscillation</h1>
   <h3 id="gala-by-bridget-riley-1974-acrylic-on-canvas-1597--1597-cm">Gala by Bridget Riley, 1974; acrylic on canvas, 159.7 × 159.7 cm</h3>
   <p>Bridget Riley, a celebrated British artist, was a driving force behind the Op Art movement of the 1960s. Her work features geometric patterns that challenge the viewer’s perceptions and evoke feelings of movement or vibration. Her 1974 piece <em>Gala</em> showcases a series of curvilinear forms that ripple across the canvas, evoking the natural rhythm of the sine wave.</p>
 </div>
-<p>In <a href="/vectors#">Chapters 1</a> and <a href="/force#">2</a>, I carefully worked out an object-oriented structure to animate a shape in a p5.js canvas, using a vector to represent position, velocity, and acceleration driven by forces in the environment. I could move straight from here into topics such as particle systems, steering forces, group behaviors, and more. However, doing so would mean skipping a fundamental aspect of motion in the natural world: <strong>oscillation</strong>, or the back-and-forth movement of an object around a central point or position.</p>
+<p>In <a href="/vectors#">Chapters 1</a> and <a href="/forces#">2</a>, I carefully worked out an object-oriented structure to animate a shape in a p5.js canvas, using a vector to represent position, velocity, and acceleration driven by forces in the environment. I could move straight from here into topics such as particle systems, steering forces, group behaviors, and more. However, doing so would mean skipping a fundamental aspect of motion in the natural world: <strong>oscillation</strong>, or the back-and-forth movement of an object around a central point or position.</p>
 <p>To model oscillation, you need to understand a little bit about <strong>trigonometry</strong>, the mathematics of triangles. Learning some trig will give you new tools to generate patterns and create new motion behaviors in a p5.js sketch. You’ll learn to harness angular velocity and acceleration to spin objects as they move. You’ll be able to use the sine and cosine functions to model nice ease-in, ease-out wave patterns. You’ll also learn to calculate the more complex forces at play in situations that involve angles, such as a pendulum swinging or a box sliding down an incline.</p>
-<p>I’ll start with the basics of working with angles in p5.js, then cover several aspects of trigonometry. In the end, I’ll connect trigonometry with what you learned about forces in <a href="/force#">Chapter 2</a>. This chapter’s content will pave the way for more sophisticated examples that require trig later in this book.</p>
+<p>I’ll start with the basics of working with angles in p5.js, then cover several aspects of trigonometry. In the end, I’ll connect trigonometry with what you learned about forces in <a href="/forces#">Chapter 2</a>. This chapter’s content will pave the way for more sophisticated examples that require trig later in this book.</p>
 <h2 id="angles">Angles</h2>
 <p>Before going any further, I need to make sure you understand how the concept of an <strong>angle</strong> fits into creative coding in p5.js. If you have experience with p5.js, you’ve undoubtedly encountered this issue while using the <code>rotate()</code> function to rotate and spin objects.</p>
 <p>You’re most likely to be familiar with the concept of an angle as measured in <strong>degrees</strong> (see Figure 3.1). A full rotation goes from 0 to 360 degrees, and 90 degrees (a right angle) is one-fourth of 360, shown in Figure 3.1 as two perpendicular lines.</p>
@@ -63,7 +63,7 @@ <h3 id="exercise-31">Exercise 3.1</h3>
 </div>
 <h2 id="angular-motion">Angular Motion</h2>
 <p>Another term for rotation is <strong>angular motion</strong>—that is, motion about an angle. Just as linear motion can be described in terms of velocity—the rate at which an object’s position changes over time—angular motion can be described in terms of <strong>angular velocity</strong>—the rate at which an object’s angle changes over time. By extension, <strong>angular acceleration</strong> describes changes in an object’s angular velocity.</p>
-<p>Luckily, you already have all the math you need to understand angular motion. Remember the stuff I dedicated almost all of <a href="/vectors#">Chapters 1</a> and <a href="/force#">2</a> to explaining?</p>
+<p>Luckily, you already have all the math you need to understand angular motion. Remember the stuff I dedicated almost all of <a href="/vectors#">Chapters 1</a> and <a href="/forces#">2</a> to explaining?</p>
 <div data-type="equation">\overrightarrow{\text{velocity}} = \overrightarrow{\text{velocity}} + \overrightarrow{\text{acceleration}}</div>
 <div data-type="equation">\overrightarrow{\text{position}} = \overrightarrow{\text{position}} + \overrightarrow{\text{velocity}}</div>
 <p>You can apply exactly the same logic to a rotating object:</p>
@@ -734,7 +734,7 @@ <h2 id="spring-forces">Spring Forces</h2>
 let restLength = 100;</pre>
 <p>I’ll then use Hooke’s law to calculate the magnitude of the force. For that, I need <code>k</code> and <code>x</code>. Calculating <code>k</code> is easy; it’s just a constant, so I’ll make something up:</p>
 <pre class="codesplit" data-code-language="javascript">let k = 0.1;</pre>
-<p>Finding <code>x</code> is perhaps a bit more difficult. I need to know the difference between the current length and the rest length. The rest length is defined as the variable <code>restLength</code>. What’s the current length? The distance between the anchor and the bob. And how can I calculate that distance? How about the magnitude of a vector that points from the anchor to the bob? (Note that this is exactly the same process I employed to find the distance between objects for the purposes of calculating gravitational attraction in <a href="/force#">Chapter 2</a>.)</p>
+<p>Finding <code>x</code> is perhaps a bit more difficult. I need to know the difference between the current length and the rest length. The rest length is defined as the variable <code>restLength</code>. What’s the current length? The distance between the anchor and the bob. And how can I calculate that distance? How about the magnitude of a vector that points from the anchor to the bob? (Note that this is exactly the same process I employed to find the distance between objects for the purposes of calculating gravitational attraction in <a href="/forces#">Chapter 2</a>.)</p>
 <pre class="codesplit" data-code-language="javascript">//{!1} A vector pointing from the anchor to the bob gives you the current length of the spring.
 let dir = p5.Vector.sub(bob, anchor);
 let currentLength = dir.mag();
@@ -800,7 +800,7 @@ <h2 id="spring-forces">Spring Forces</h2>
   bob.show();
   spring.show();
 }</pre>
-<p>Think about how this compares to my first stab at gravitational attraction in <a href="/force#example-26-attraction">Example 2.6</a>, when I had separate <code>Mover</code> and <code>Attractor</code> classes. There, I wrote something like this:</p>
+<p>Think about how this compares to my first stab at gravitational attraction in <a href="/forces#example-26-attraction">Example 2.6</a>, when I had separate <code>Mover</code> and <code>Attractor</code> classes. There, I wrote something like this:</p>
 <pre class="codesplit" data-code-language="javascript">  let force = attractor.attract(mover);
   mover.applyForce(force);</pre>
 <p>The analogous situation with a spring might have been as follows:</p>
@@ -997,7 +997,7 @@ <h2 id="the-pendulum">The Pendulum</h2>
 fill(127);
 line(this.pivot.x, this.pivot.y, this.bob.x, this.bob.y);
 circle(this.bob.x, this.bob.y, 16);</pre>
-<p>Finally, a real-world pendulum is going to experience a certain amount of friction (at the pivot point) and air resistance. As it stands, the pendulum would swing forever with the given code. To make it more realistic, I can slow the pendulum with a damping trick. I say <em>trick</em> because rather than model the resistance forces with some degree of accuracy (as I did in <a href="/force#">Chapter 2</a>), I can achieve a similar result simply by reducing the angular velocity by an arbitrary amount during each cycle. The following code reduces the velocity by 1 percent (or multiplies it by 0.99) for each frame of animation:</p>
+<p>Finally, a real-world pendulum is going to experience a certain amount of friction (at the pivot point) and air resistance. As it stands, the pendulum would swing forever with the given code. To make it more realistic, I can slow the pendulum with a damping trick. I say <em>trick</em> because rather than model the resistance forces with some degree of accuracy (as I did in <a href="/forces#">Chapter 2</a>), I can achieve a similar result simply by reducing the angular velocity by an arbitrary amount during each cycle. The following code reduces the velocity by 1 percent (or multiplies it by 0.99) for each frame of animation:</p>
 <pre class="codesplit" data-code-language="javascript">this.angleVelocity *= 0.99;</pre>
 <p>Putting everything together, I have the following example (with the pendulum beginning at a 45-degree angle).</p>
 <div data-type="example">
@@ -1085,7 +1085,7 @@ <h3 id="exercise-317">Exercise 3.17</h3>
 <div data-type="project">
   <h3 id="the-ecosystem-project-4">The Ecosystem Project</h3>
   <p>Take one of your creatures and incorporate oscillation into its motion. You can use the <code>Oscillator</code> class from Example 3.7 as a model. The <code>Oscillator</code> object, however, oscillates around a single point (the middle of the window). Try oscillating around a moving point.</p>
-  <p>In other words, design a creature that moves around the screen according to position, velocity, and acceleration. But that creature isn’t just a static shape; it’s an oscillating body. Consider tying the speed of oscillation to the speed of motion. Think of a butterfly’s flapping wings or the legs of an insect. Can you make it appear as though the creature’s internal mechanics (oscillation) drive its locomotion? See the book’s website for an additional example combining attraction from <a href="/force#">Chapter 2</a> with oscillation.</p>
+  <p>In other words, design a creature that moves around the screen according to position, velocity, and acceleration. But that creature isn’t just a static shape; it’s an oscillating body. Consider tying the speed of oscillation to the speed of motion. Think of a butterfly’s flapping wings or the legs of an insect. Can you make it appear as though the creature’s internal mechanics (oscillation) drive its locomotion? See the book’s website for an additional example combining attraction from <a href="/forces#">Chapter 2</a> with oscillation.</p>
   <figure>
     <img src="images/03_oscillation/03_oscillation_21.png" alt="">
     <figcaption></figcaption>

content/04_particles.html

@@ -42,7 +42,7 @@ <h2 id="why-particle-systems-matter">Why Particle Systems Matter</h2>
 <p>No single particle is referenced in this code, and yet the result will be full of particles flying all over the canvas. This works because the details are hidden inside the <code>ParticleSystem</code> class, which holds references to lots of instances of the <code>Particle</code> class. Getting used to this technique of writing sketches with multiple classes, including classes that keep lists of instances of other classes, will prove useful as you get to later chapters in this book.</p>
 <p>Finally, working with particle systems is also an opportunity to tackle two other OOP techniques: inheritance and polymorphism. With the examples you’ve seen up until now, I’ve always used an array of a single type of object, like an array of movers or an array of oscillators. With inheritance and polymorphism, I’ll demonstrate a convenient way to use a single list to store objects of different types. This way, a particle system need not be a system of only one kind of particle.</p>
 <h2 id="a-single-particle">A Single Particle</h2>
-<p>Before I can get rolling on coding the particle system, I need to write a class to describe a single particle. The good news: I’ve done this already! The <code>Mover</code> class from <a href="/force#">Chapter 2</a> serves as the perfect template. A particle is an independent body that moves about the canvas, so just like a mover, it has <code>position</code>, <code>velocity</code>, and <code>acceleration</code> variables; a constructor to initialize those variables; and methods to <code>show()</code> itself and <code>update()</code> its position:</p>
+<p>Before I can get rolling on coding the particle system, I need to write a class to describe a single particle. The good news: I’ve done this already! The <code>Mover</code> class from <a href="/forces#">Chapter 2</a> serves as the perfect template. A particle is an independent body that moves about the canvas, so just like a mover, it has <code>position</code>, <code>velocity</code>, and <code>acceleration</code> variables; a constructor to initialize those variables; and methods to <code>show()</code> itself and <code>update()</code> its position:</p>
 <pre class="codesplit" data-code-language="javascript">class Particle {
   // A <code>Particle</code> object is just another name for a mover. It has position, velocity, and acceleration.
   constructor(x, y) {