Image and layout updates

[Notion] Update docs

content/00_4_acknowledgments.html

@@ -1,7 +1,7 @@
 <section data-type="page">
 <h1 id="acknowledgments">Acknowledgments</h1>
 <blockquote data-type="epigraph">
-  <p>The world around us moves in complicated and wonderful ways. We spend the earlier parts of our lives learning about our environment through perception and interaction. We expect the physical world around us to behave consistently with our perceptual memory, e.g., if we drop a rock, it will fall due to gravity, if a gust of wind blows, lighter objects will be tossed by the wind further. This class focuses on understanding, simulating, and incorporating motion-based elements of our physical world into the digital worlds that we create. Our hope is to create intuitive, rich, and more satisfying experiences by drawing from the perceptual memories of our users.</p>
+  <p><em>The world around us moves in complicated and wonderful ways. We spend the earlier parts of our lives learning about our environment through perception and interaction. We expect the physical world around us to behave consistently with our perceptual memory, e.g., if we drop a rock, it will fall due to gravity, if a gust of wind blows, lighter objects will be tossed by the wind further. This class focuses on understanding, simulating, and incorporating motion-based elements of our physical world into the digital worlds that we create. Our hope is to create intuitive, rich, and more satisfying experiences by drawing from the perceptual memories of our users.</em></p>
   <p>—James Tu, Dynamic Bodies course description, Spring 2003, ITP</p>
 </blockquote>
 <p>In 2003, as a graduate student at the Interactive Telecommunications Program (ITP) in the Tisch School of the Arts at New York University, I enrolled in a course called Dynamic Bodies. The course was taught by interaction designer and ITP adjunct professor James Tu. At the time, my work was focused on a series of software experiments that generated real-time, nonphotorealistic imagery. The applications involved capturing images from a live source and “painting” the colors with elements that moved about the screen according to various rules. Tu’s course—which covered vectors, forces, oscillations, particle systems, recursion, steering, and springs—aligned perfectly with my work.</p>

content/01_vectors.html

@@ -837,7 +837,9 @@ <h3 id="algorithm-1-constant-acceleration">Algorithm 1: Constant Acceleration</h
 <pre class="codesplit" data-code-language="javascript">    // The <code>limit()</code> function constrains the magnitude of a vector.
     this.velocity.limit(10);</pre>
 <p>This translates to the following:</p>
-<p>What is the magnitude of <code>velocity</code>? If it’s less than 10, no worries; just leave it as is. If it’s more than 10, however, reduce it to 10!</p>
+<blockquote data-type="epigraph">
+  <p><em>What is the magnitude of </em><code>velocity</code><em>? If it’s less than 10, no worries; just leave it as is. If it’s more than 10, however, reduce it to 10!</em></p>
+</blockquote>
 <div data-type="exercise">
   <h3 id="exercise-14">Exercise 1.4</h3>
   <p>Write the <code>limit()</code> function for the <code>p5.Vector</code> class:</p>

content/02_forces.html

@@ -543,7 +543,9 @@ <h3 id="air-and-fluid-resistance">Air and Fluid Resistance</h3>
   liquid = new Liquid(0, height / 2, width, height / 2, 0.1);
 }</pre>
 <p>Now comes an interesting question: How does the <code>Mover</code> object talk to the <code>Liquid</code> object? I want to implement the following:</p>
-<p><em>When a mover passes through a liquid, that mover experiences a drag force.</em></p>
+<blockquote data-type="epigraph">
+  <p><em>When a mover passes through a liquid, that mover experiences a drag force.</em></p>
+</blockquote>
 <p>Translating that into object-oriented speak:</p>
 <pre class="codesplit" data-code-language="javascript">// If the liquid contains the mover, apply the drag force.
 if (liquid.contains(mover)) {

content/03_oscillation.html

@@ -710,14 +710,14 @@ <h3 id="exercise-312">Exercise 3.12</h3>
   </figure>
 </div>
 <h2 id="spring-forces">Spring Forces</h2>
-<p>Exploring the mathematics of triangles and waves has been lovely, but perhaps you’re starting to miss Newton’s laws of motion and vectors. After all, the core of this book is about simulating the physics of moving bodies. In <a href="#properties-of-oscillation">“Properties of Oscillation”</a>, I modeled simple harmonic motion by mapping a sine wave to a range of pixels on a canvas. <a href="#exercise-37">Exercise 3.7</a> asked you to use this technique to create a simulation of a bob hanging from a spring with the <code>sin()</code> function. That kind of quick-and-dirty, one-line-of-code solution won’t do, however, if what you really want is a bob hanging from a spring that responds to other forces in the environment (wind, gravity, and so on). To achieve a simulation like that, you need to model the force of the spring by using vectors.</p>
-<p>I’ll consider a spring to be a connection between a movable<em> </em>bob (or weight) and a fixed anchor point (see Figure 3.14).</p>
 <div class="half-width-right">
   <figure>
     <img src="images/03_oscillation/03_oscillation_11.png" alt="Figure 3.14: A spring with an anchor and bob">
     <figcaption>Figure 3.14: A spring with an anchor and bob</figcaption>
   </figure>
 </div>
+<p>Exploring the mathematics of triangles and waves has been lovely, but perhaps you’re starting to miss Newton’s laws of motion and vectors. After all, the core of this book is about simulating the physics of moving bodies. In <a href="#properties-of-oscillation">“Properties of Oscillation”</a>, I modeled simple harmonic motion by mapping a sine wave to a range of pixels on a canvas. <a href="#exercise-37">Exercise 3.7</a> asked you to use this technique to create a simulation of a bob hanging from a spring with the <code>sin()</code> function. That kind of quick-and-dirty, one-line-of-code solution won’t do, however, if what you really want is a bob hanging from a spring that responds to other forces in the environment (wind, gravity, and so on). To achieve a simulation like that, you need to model the force of the spring by using vectors.</p>
+<p>I’ll consider a spring to be a connection between a movable<em> </em>bob (or weight) and a fixed anchor point (see Figure 3.14).</p>
 <p>The force of the spring is a vector calculated according to Hooke’s law, named for Robert Hooke, a British physicist who developed the formula in 1660. Hooke originally stated the law in Latin: “<em>Ut tensio, sic vis</em>,” or “As the extension, so the force.” Think of it this way:</p>
 <p><span class="highlight">The force of the spring is directly proportional to the extension of the spring.</span></p>
 <div class="half-width-right">

content/04_particles.html

@@ -18,7 +18,7 @@ <h3 id="positron">Positron</h3>
 </div>
 <p>In 1982, Lucasfilm researcher William T. Reeves was working on <em>Star Trek II: The Wrath of Khan</em>. Much of the movie revolves around the Genesis Device, a torpedo that, when shot at a barren, lifeless planet, has the ability to reorganize matter and create a habitable world for colonization. During the sequence, a wall of fire ripples over the planet while it’s being “terraformed.” The term <strong>particle system</strong>, an incredibly common and useful technique in computer graphics, was coined in the creation of this particular effect. As Reeves put it:</p>
 <blockquote data-type="epigraph">
-  <p>A particle system is a collection of many, many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system.</p>
+  <p><em>A particle system is a collection of many, many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system.</em></p>
 </blockquote>
 <p>Since the early 1980s, particle systems have been used in countless video games, animations, digital art pieces, and installations to model various irregular types of natural phenomena, such as fire, smoke, waterfalls, fog, grass, bubbles, and so on.</p>
 <p>This chapter is dedicated to looking at strategies for coding a particle system and managing the associated data. How do you organize your code? Where do you store information related to individual particles versus information related to the system as a whole? The examples I’ll cover will use simple dots for the particles and apply only the most basic behaviors. However, these characteristics shouldn’t limit your imagination. Just because particle systems tend to look sparkly, fly forward, or fall with gravity doesn’t mean that yours should have those characteristics too. By building on this chapter’s framework and adding more creative ways to render the particles and compute their behavior, you can achieve a variety of effects.</p>