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

[Notion] Update docs - Ecosystem project subheader updates

content/00_randomness.html

@@ -222,7 +222,7 @@ <h2 id="probability-and-nonuniform-distributions">Probability and Nonuniform Dis
 <p>The probability of drawing a diamond is shown here:</p>
 <div data-type="equation">\textrm{number of diamonds }/ \textrm{ number of cards} = 13 / 52 = 0.25 = 25\%</div>
 <p>You can also calculate the probability of multiple events occurring in sequence by multiplying the individual probabilities of each event. For example, here’s the probability of a coin turning up heads three times in a row:</p>
-<div data-type="equation">(1/2) * (1/2) * (1/2) = 1/8 = 0.125 = 12.5\%</div>
+<div data-type="equation">(1/2) \times (1/2) \times (1/2) = 1/8 = 0.125 = 12.5\%</div>
 <p>This indicates a coin will turn up heads three times in a row one out of eight times on average. If you flip a coin three times in a row 500 times, you would expect to see an outcome of three consecutive heads an average of one-eighth of the time, or about 63 times.</p>
 <div data-type="exercise">
   <h3 id="exercise-02">Exercise 0.2</h3>

content/01_vectors.html

@@ -494,11 +494,11 @@ <h3 id="vector-multiplication-and-division">Vector Multiplication and Division</
   </figure>
 </div>
 <p>To scale a vector, multiply each component (<em>x</em> and <em>y</em>) by a scalar. That is, <span data-type="equation">\vec{w} = \vec{u} * n</span> can be written as shown here:</p>
-<div data-type="equation">w_x = u_x * n</div>
-<div data-type="equation">w_y = u_y * n</div>
+<div data-type="equation">w_x = u_x \times n</div>
+<div data-type="equation">w_y = u_y \times n</div>
 <p>As an example, say <span data-type="equation">\vec{u} = (-3, 7)</span> and <span data-type="equation">n = 3</span>. You can calculate <span data-type="equation">\vec{w} = \vec{u} * n</span> as follows:</p>
-<div data-type="equation">w_x = -3 * 3</div>
-<div data-type="equation">w_y = 7 * 3</div>
+<div data-type="equation">w_x = -3 \times 3</div>
+<div data-type="equation">w_y = 7 \times 3</div>
 <div data-type="equation">\vec{w} = (-9,21)</div>
 <p>This is exactly how the <code>mult()</code> function inside the <code>p5.Vector</code> class works:</p>
 <pre class="codesplit" data-code-language="javascript">mult(n) {
@@ -555,9 +555,9 @@ <h3 id="example-14-multiplying-a-vector">Example 1.4: Multiplying a Vector</h3>
 <div data-type="note">
   <h3 id="more-number-properties-with-vectors">More Number Properties with Vectors</h3>
   <p>As with addition, basic algebraic rules of multiplication apply to vectors.</p>
-  <p>The associative rule: <span data-type="equation">(n * m) * \vec{v} = n * (m * \vec{v})</span></p>
-  <p>The distributive rule with two scalars, one vector: <span data-type="equation">(n + m) * \vec{v} = (n * \vec{v}) + (m * \vec{v})</span></p>
-  <p>The distributive rule with two vectors, one scalar: <span data-type="equation">(\vec{u} + \vec{v}) * n = (\vec{u} * n) + (\vec{v} * n)</span></p>
+  <p>The associative rule: <span data-type="equation">(n \times m) \times \vec{v} = n \times (m \times \vec{v})</span></p>
+  <p>The distributive rule with two scalars, one vector: <span data-type="equation">(n + m) \times \vec{v} = (n \times \vec{v}) + (m \times \vec{v})</span></p>
+  <p>The distributive rule with two vectors, one scalar: <span data-type="equation">(\vec{u} + \vec{v}) \times n = (\vec{u} \times n) + (\vec{v} \times n)</span></p>
 </div>
 <h2 id="vector-magnitude">Vector Magnitude</h2>
 <div class="half-width-right">
@@ -1042,7 +1042,7 @@ <h3 id="exercise-18">Exercise 1.8</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-2">The Ecosystem Project</h3>
-  <p>Step 1 Exercise:</p>
+  <p><strong>Step 1 Exercise</strong></p>
   <p>Incorporate vectors to further develop and refine the motion of the elements within your ecosystem. Explore how motion can be directed by solely manipulating an object’s acceleration vector.</p>
   <p>How might you calculate acceleration to emulate certain behaviors—the erratic buzzing of a nervous fly, the gentle hops of a bunny, or the slithering of a snake? What role does acceleration play in nature? Consider the way a bird accelerates when taking off or how a fish suddenly changes direction when swimming. Again, how much of a creature’s personality can be shaped by its behavior alone? What is added (or taken away) by incorporating more visual design elements beyond simple shapes?</p>
   <figure>

content/02_forces.html

@@ -387,7 +387,7 @@ <h3 id="parsing-formulas">Parsing Formulas</h3>
   <ul>
     <li><strong>Evaluate the right side; assign to the left side.</strong> This is just like in code! In the preceding case, the left side represents what I want to calculate—the force of friction—and the right side elaborates on how to do it.</li>
     <li><strong>Am I talking about a vector or a scalar?</strong> It’s important to realize that in some cases, you’ll be calculating a vector; in others, a scalar. For example, in this case, the force of friction is a vector. That is indicated by the arrow above the <span data-type="equation">f</span>. It has a magnitude and direction. The right side of the equation also has a vector, as indicated by the symbol <span data-type="equation">\hat{v}</span>, which in this case stands for the velocity unit vector.</li>
-    <li><strong>When symbols are placed next to each other, this typically means multiply them.</strong> The right side of the friction formula has four elements: -, <em>μ</em>, <em>N</em>, and <span data-type="equation">\hat{v}</span>. They should be multiplied together, reading the formula as <span data-type="equation">\vec{f} = -1 * \mu * N * \hat{v}</span>.</li>
+    <li><strong>When symbols are placed next to each other, this typically means multiply them.</strong> The right side of the friction formula has four elements: -, <em>μ</em>, <em>N</em>, and <span data-type="equation">\hat{v}</span>. They should be multiplied together, reading the formula as <span data-type="equation">\vec{f} = -1 \times \mu \times N \times \hat{v}</span>.</li>
   </ul>
 </div>
 <h3 id="friction">Friction</h3>
@@ -398,14 +398,14 @@ <h3 id="friction">Friction</h3>
   <img src="images/02_forces/02_forces_4.png" alt="Figure 2.3: Friction is a force that points in the opposite direction of the sled’s velocity when the sled is sliding in contact with the hill.">
   <figcaption>Figure 2.3: Friction is a force that points in the opposite direction of the sled’s velocity when the sled is sliding in contact with the hill.</figcaption>
 </figure>
-<p>Since friction is a vector, let me separate this formula into two parts that determine the direction of friction as well as its magnitude. Figure 2.3 indicates that <em>friction points in the opposite direction of velocity.</em> In fact, that’s the part of the formula that says <span data-type="equation">-1 * \hat{v}</span>, or –1 times the velocity unit vector. In p5.js, this would mean taking an object’s <code>velocity</code> vector and multiplying it by <code>-1</code>:</p>
+<p>Since friction is a vector, let me separate this formula into two parts that determine the direction of friction as well as its magnitude. Figure 2.3 indicates that <em>friction points in the opposite direction of velocity.</em> In fact, that’s the part of the formula that says <span data-type="equation">-1 \times \hat{v}</span>, or –1 times the velocity unit vector. In p5.js, this would mean taking an object’s <code>velocity</code> vector and multiplying it by <code>-1</code>:</p>
 <pre class="codesplit" data-code-language="javascript">let friction = this.velocity.copy();
 friction.normalize();
 // Let’s figure out the direction of the friction force
 // (a unit vector in the opposite direction of velocity).
 friction.mult(-1);</pre>
 <p>Notice two additional steps here. First, it’s important to make a copy of the <code>velocity</code> vector, as I don’t want to reverse the object’s direction by accident. Second, the vector is normalized. This is because the magnitude of friction isn’t associated with the speed of the object, and I want to start with a vector of length 1 so it can easily be scaled.</p>
-<p>According to the formula, the magnitude is <span data-type="equation">\mu * N</span>. The Greek letter <em>mu</em> (<span data-type="equation">\mu</span>, pronounced <em>mew</em>), is used here to describe the <strong>coefficient of friction</strong>. The coefficient of friction establishes the strength of a friction force for a particular surface. The higher it is, the stronger the friction; the lower, the weaker. A block of ice, for example, will have a much lower coefficient of friction than, say, sandpaper. Since this is a pretend p5.js world, I can arbitrarily set the coefficient to scale the strength of the friction:</p>
+<p>According to the formula, the magnitude is <span data-type="equation">\mu \times N</span>. The Greek letter <em>mu</em> (<span data-type="equation">\mu</span>, pronounced <em>mew</em>), is used here to describe the <strong>coefficient of friction</strong>. The coefficient of friction establishes the strength of a friction force for a particular surface. The higher it is, the stronger the friction; the lower, the weaker. A block of ice, for example, will have a much lower coefficient of friction than, say, sandpaper. Since this is a pretend p5.js world, I can arbitrarily set the coefficient to scale the strength of the friction:</p>
 <pre class="codesplit" data-code-language="javascript">let c = 0.01;</pre>
 <p>Now for the second part. <em>N</em> refers to the <strong>normal force</strong>, the force perpendicular to the object’s motion along a surface. Think of a vehicle driving along a road. The vehicle pushes down against the road with gravity, and Newton’s third law tells us that the road, in turn, pushes back against the vehicle. That’s the normal force. The greater the gravitational force, the greater the normal force.</p>
 <p>As you’ll see in the next section, gravitational attraction is associated with mass, and so a lightweight sports car would experience less friction than a massive tractor trailer truck. In Figure 2.3, however, because the object is moving along a surface at an angle, computing the magnitude and direction of the normal force is a bit more complex because it doesn’t point in the opposite direction of gravity. You’d need to know something about angles and trigonometry.</p>
@@ -1071,10 +1071,14 @@ <h3 id="exercise-215">Exercise 2.15</h3>
 <div data-type="exercise">
   <h3 id="exercise-216">Exercise 2.16</h3>
   <p>Can you arrange the bodies of the <em>n</em>-body simulation to orbit the center of the canvas in a pattern that resembles a spiral galaxy? You may need to include an additional large body in the center to hold everything together. A solution is offered in my “Mutual Attraction” video in the Nature of Code series on the Coding Train (<a href="https://www.thecodingtrain.com/nbody"><em>https://www.thecodingtrain.com/nbody</em></a>).</p>
+  <figure>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/Qxahj4k5D" data-example-path="examples/02_forces/exercise_2_16"><img src="examples/02_forces/exercise_2_16/screenshot.png"></div>
+    <figcaption></figcaption>
+  </figure>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-3">The Ecosystem Project</h3>
-  <p>Step 2 Exercise:</p>
+  <p><strong>Step 2 Exercise</strong></p>
   <p>Incorporate forces into your ecosystem. How might other environmental factors (for example, water versus mud, or the current of a river) affect the way a character moves through an ecosystem?</p>
   <p>Try introducing other elements into the environment (food, a predator) for the creature to interact with. Does the creature experience attraction or repulsion to things in its world? Can you think more abstractly and design forces based on the creature’s desires or goals?</p>
   <figure>

content/04_particles.html

@@ -1280,7 +1280,7 @@ <h3 id="exercise-414">Exercise 4.14</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-5">The Ecosystem Project</h3>
-  <p>Step 4 Exercise:</p>
+  <p><strong>Step 4 Exercise</strong></p>
   <p>Take your creature from step 3 and build a system of creatures. How do they interact with one another? Can you use inheritance and polymorphism to create a variety of creatures, derived from the same codebase? Develop a methodology for the way they compete for resources (for example, food). Can you track a creature’s health much like a particle’s lifespan, removing creatures when appropriate? What rules can you incorporate to control the way creatures are born into the system?</p>
   <p>Also, you might consider using a particle system in the design of a creature. What happens if an emitter is tied to the creature’s position?</p>
   <figure>

content/05_steering.html

@@ -1587,7 +1587,7 @@ <h3 id="exercise-521">Exercise 5.21</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-6">The Ecosystem Project</h3>
-  <p>Step 5 Exercise:</p>
+  <p><strong>Step 5 Exercise</strong></p>
   <p>Use steering forces to drive the behavior of the creatures in your ecosystem. Here are some possibilities:</p>
   <ul>
     <li>Create schools or flocks of creatures.</li>

content/06_libraries.html

@@ -1624,7 +1624,7 @@ <h3 id="a-force-directed-graph">A Force-Directed Graph</h3>
 <p>Have you ever had the following thought? “I have a whole bunch of stuff I want to draw, and I want all that stuff to be spaced out evenly in a nice, neat, organized manner. Otherwise, I’ll have trouble sleeping at night.”</p>
 <p>This isn’t an uncommon problem in computational design. One solution is a <strong>force-directed graph</strong>, a visualization of elements—let’s call them <em>nodes</em>—whose positions aren’t manually assigned. Instead, the nodes arrange themselves according to a set of forces. While any forces can be used, a classic approach uses spring forces: each node is connected to every other node with a spring, such that when the springs reach equilibrium, the nodes are evenly spaced (see Figure 6.18). Sounds like a job for Toxiclibs.js!</p>
 <figure>
-  <img src="images/06_libraries/06_libraries_20.png" alt="Figure 6.18: In this force-directed graph, clusters of particles are connected by spring forces.">
+  <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/0RqAtTXwI" data-example-path="examples/06_libraries/figure_6_18"><img src="examples/06_libraries/figure_6_18/screenshot.png"></div>
   <figcaption>Figure 6.18: In this force-directed graph, clusters of particles are connected by spring forces.</figcaption>
 </figure>
 <p>To create a force-directed graph, I’ll first need a class to describe an individual node in the system. Because the term <em>node</em> is associated with the JavaScript framework Node.js, I’ll stick with the term <em>particle</em> to avoid any confusion, and I’ll continue using my <code>Particle</code> class from the earlier soft-body examples.</p>
@@ -1646,7 +1646,7 @@ <h3 id="a-force-directed-graph">A Force-Directed Graph</h3>
 <p>Let’s assume that the <code>Cluster</code> class also has a <code>show()</code> method to draw all the particles in the cluster and that I’ll create a new <code>Cluster</code> object in <code>setup()</code> and render it in <code>draw()</code>. If I ran the sketch as is, nothing would happen. Why? Because I have yet to implement the whole force-directed graph part! I need to connect every single node to every other node with a spring. This is somewhat similar to creating a soft-body character, but rather than handcraft a skeleton, I want to write an algorithm to make all the connections automatically.</p>
 <p>What exactly do I mean by that? Say I have five <code>Particle</code> objects: 0, 1, 2, 3, and 4. Figure 6.19 illustrates the connections.</p>
 <figure>
-  <img src="images/06_libraries/06_libraries_21.png" alt="Figure 6.19: A network graph showing each of the five nodes connected to every other node">
+  <img src="images/06_libraries/06_libraries_20.png" alt="Figure 6.19: A network graph showing each of the five nodes connected to every other node">
   <figcaption>Figure 6.19: A network graph showing each of the five nodes connected to every other node</figcaption>
 </figure>
 <p>Notice two important details about the list of connections:</p>
@@ -1708,7 +1708,7 @@ <h3 id="exercise-612">Exercise 6.12</h3>
   <h3 id="exercise-613">Exercise 6.13</h3>
   <p>Expand the force-directed graph to have more than one <code>Cluster</code> object. Use a <code>VerletMinDistanceSpring2D</code> object to connect cluster to cluster. What kind of data might you visualize with this technique?</p>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/WexUSx7dN" data-example-path="examples/06_libraries/exercise_6_12_force_directed_graph"><img src="examples/06_libraries/exercise_6_12_force_directed_graph/screenshot.png"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/WexUSx7dN" data-example-path="examples/06_libraries/exercise_6_13_force_directed_graph"><img src="examples/06_libraries/exercise_6_13_force_directed_graph/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -1775,7 +1775,7 @@ <h3 id="exercise-614">Exercise 6.14</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-7">The Ecosystem Project</h3>
-  <p>Step 6 Exercise:</p>
+  <p><strong>Step 6 Exercise</strong></p>
   <p>Take your system of creatures from step 5 and use a physics engine to drive their motion and behaviors. Here are some possibilities:</p>
   <ul>
     <li>Use Matter.js to allow collisions between creatures. Consider triggering an event when two creatures collide.</li>
@@ -1785,7 +1785,7 @@ <h3 id="the-ecosystem-project-7">The Ecosystem Project</h3>
     <li>Use spring (or joint) connections between objects to control their interactions. Create and delete these springs on the fly. Consider making these connections visible or invisible to the viewer.</li>
   </ul>
   <figure>
-    <img src="images/06_libraries/06_libraries_22.png" alt="">
+    <img src="images/06_libraries/06_libraries_21.png" alt="">
     <figcaption></figcaption>
   </figure>
 </div>

content/07_ca.html

@@ -786,7 +786,7 @@ <h3 id="exercise-714">Exercise 7.14</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-8">The Ecosystem Project</h3>
-  <p>Step 7 Exercise:</p>
+  <p><strong>Step 7 Exercise</strong></p>
   <p>Incorporate CA into your ecosystem. Here are some possibilities:</p>
   <ul>
     <li>Give each creature a state. How can that state drive its behavior? Taking inspiration from CA, how can that state change over time according to its neighbors’ states?</li>

content/08_fractals.html

@@ -971,7 +971,7 @@ <h3 id="exercise-813">Exercise 8.13</h3>
 </div>
 <div data-type="project">
   <h3 id="the-ecosystem-project-9">The Ecosystem Project</h3>
-  <p>Step 8 Exercise:</p>
+  <p><strong>Step 8 Exercise</strong></p>
   <p>Incorporate fractals into your ecosystem. Here are some possibilities:</p>
   <ul>
     <li>Add plant-like creatures to the ecosystem environment.</li>

content/09_ga.html

@@ -1700,7 +1700,7 @@ <h3 id="example-95-an-evolving-ecosystem">Example 9.5: An Evolving Ecosystem</h3
 <p>This example is rather simplistic given its single gene and cloning instead of crossover. Here are some suggestions for applying the bloop example in a more elaborate ecosystem simulation.</p>
 <div data-type="project">
   <h3 id="the-ecosystem-project-10">The Ecosystem Project</h3>
-  <p>Step 9 Exercise:</p>
+  <p><strong>Step 9 Exercise</strong></p>
   <p>Add evolution to your ecosystem, building from the examples in this chapter:</p>
   <ul>
     <li>Add a population of predators to your ecosystem. Biological evolution between predators and prey (or parasites and hosts) is often referred to as an <em>arms race</em>, in which the creatures continuously adapt and counter-adapt to one another. Can you achieve this behavior in a system of multiple creatures?</li>