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

[Notion] Adding snippet tags in Notion for scissor mark ups

content/00_randomness.html

@@ -9,8 +9,8 @@ <h1 id="chapter-0-randomness">Chapter 0. Randomness</h1>
 </div>
 <div class="chapter-opening-figure">
   <figure>
-    <img src="images/00_randomness/00_randomness_1.png" alt="Image Credit TBD">
-    <figcaption>Image Credit TBD</figcaption>
+    <img src="images/00_randomness/00_randomness_1.png" alt="Photo from A Million Random Digits with 100,000 Normal Deviates, RAND Corporation, MR-1418-RC, 2001. As of October 17, 2023: https://www.rand.org/pubs/monograph_reports/MR1418.html">
+    <figcaption>Photo from <em>A Million Random Digits with 100,000 Normal Deviates,</em> RAND Corporation, MR-1418-RC, 2001. As of October 17, 2023: https://www.rand.org/pubs/monograph_reports/MR1418.html</figcaption>
   </figure>
   <h3 id="a-million-random-digits-with-100000-normal-deviates-rand-corporation">A Million Random Digits with 100,000 Normal Deviates, RAND Corporation</h3>
   <p>In 1947, the RAND Corporation produced a peculiar book titled <em>A Million Random Digits with 100,000 Normal Deviates</em>. The book wasn’t a work of literature or a philosophical treatise on randomness. Rather, it was a table of random numbers generated using an electronic simulation of a roulette wheel. This book was one of the last in a series of random number tables produced from the mid-1920s to the 1950s. With the development of high-speed computers, generating pseudorandom numbers became faster than reading them from tables, and so this era of printed random number tables ultimately came to an end.</p>
@@ -670,13 +670,15 @@ <h3 id="exercise-010">Exercise 0.10</h3>
 <p>Just as you can overuse randomness, however, it’s easy to fall into the trap of overusing Perlin noise. How should an object move? Perlin noise! What color should it be? Perlin noise! How fast should it grow? Perlin noise! If that becomes your answer to every question, then keep reading! My goal here is to introduce you to a universe of new possibilities for defining the rules of your systems. After all, those rules are yours to define, and the more possibilities at your disposal, the more you’ll be able to make thoughtful, informed choices. Randomness and Perlin noise are just the first stars in a vast creative cosmos that we’ll explore in this book.</p>
 <div data-type="project">
   <h3 id="the-ecosystem-project-1">The Ecosystem Project</h3>
-  <p><em>As mentioned in the Introduction, one way to use this book is to build a single project over the course of reading it, incorporating elements from each chapter as you go. One idea for this is a simulation of an ecosystem. Imagine a population of computational creatures swimming around a digital pond, interacting with each other according to various rules.</em></p>
+  <p><em>As mentioned in the Introduction, one way to use this book is to build a single project over the course of reading it, incorporating elements from each chapter as you go. One idea for this is a simulation of an ecosystem. Imagine a population of computational creatures </em><em>swimming around</em><em> a digital pond, interacting with each other according to various rules.</em></p>
   <p>Step 0 Exercise:</p>
   <p>Develop a set of rules for simulating the real-world behavior of a creature, building on top of principles from the “random walk” or other noise-driven motions. Can you simulate a jittery bug that flies in unpredictable ways, or perhaps a floating leaf carried by an inconsistent breeze? Start by exploring the boundaries of how much you can express a creature’s personality purely through its behavior. Then you can think about its visual characteristics.</p>
   <p>Here’s an illustration to help you generate ideas for building an ecosystem based on the topics covered in this book. Watch how the illustration evolves as new concepts and techniques are introduced with each subsequent chapter. The goal of this book is to demonstrate algorithms and behaviors, so my examples will almost always only include a single primitive shape, such as a circle. However, I fully expect that there are creative sparks within you, and encourage you to challenge yourself with the designs of the elements you draw on the canvas. If drawing with code is new to you, the book’s illustrator, Zannah Marsh, has written a helpful guide that you can find in the book’s Appendix.</p>
+  <p></p>
   <figure>
     <img src="images/00_randomness/00_randomness_9.png" alt="">
     <figcaption></figcaption>
   </figure>
+  <p></p>
 </div>
 </section>

content/08_fractals.html

@@ -373,8 +373,8 @@ <h3 id="the-monster-curve">The “Monster” Curve</h3>
   <figcaption>Figure 8.15: The original line expressed as a vector <span data-type="equation">\vec{v}</span> can be divided by 3 to find the positions of the points for the next generation.</figcaption>
 </figure>
 <p>Here’s how that looks in code:</p>
-<pre class="codesplit" data-code-language="javascript">    ...
-    // Create a vector from start to end
+<div class="snip-above snip-below">
+  <pre class="codesplit" data-code-language="javascript">    // Create a vector from start to end
     let v = p5.Vector.sub(this.end, this.start);    
     // One-third the length
     v.div(3);
@@ -383,26 +383,27 @@ <h3 id="the-monster-curve">The “Monster” Curve</h3>
     let b = p5.Vector.add(a, v);
 
     // d is just another 1/3 of the way past b!
-    let d = p5.Vector.add(b, v);
-    ... </pre>
+    let d = p5.Vector.add(b, v);</pre>
+</div>
 <div class="half-width-right">
   <figure>
     <img src="images/08_fractals/08_fractals_18.png" alt="Figure 8.16: The vector \vec{v} is rotated by 60° to find the third point.">
     <figcaption>Figure 8.16: The vector <span data-type="equation">\vec{v}</span> is rotated by 60<em>° </em>to find the third point.</figcaption>
   </figure>
 </div>
 <p>The last point, <span data-type="equation">c</span>, is the most difficult one to compute. However, if you consider that the angles of an equilateral triangle are all 60 degrees, this makes things suddenly easier. If you know how to find the new <span data-type="equation">b</span> with a vector one-third the length of the line, what if you rotate that same vector 60 degrees (or <span data-type="equation">\pi/3</span> radians) and add it to <span data-type="equation">b</span>, as in Figure 8.16? You’d arrive at <span data-type="equation">c</span>!</p>
-<pre class="codesplit" data-code-language="javascript">    ...
-    //{!1} Rotate by -PI/3 radians (negative angle so it rotates “up”).
+<div class="snip-above snip-below">
+  <pre class="codesplit" data-code-language="javascript">    //{!1} Rotate by -PI/3 radians (negative angle so it rotates “up”).
     v.rotate(-PI / 3);    
     //{!1} Move along from b by v to get to point c.
-    let c = p5.Vector.add(b, v);
-    ...</pre>
+    let c = p5.Vector.add(b, v);</pre>
+</div>
 <p>Finally, after calculating the five points, I can return them all together in an array. This will match the code for destructuring the array into five separate variables, as previously outlined.</p>
-<pre class="codesplit" data-code-language="javascript">    ...
-    // Return all five points in an array
+<div class="snip-above">
+  <pre class="codesplit" data-code-language="javascript">    // Return all five points in an array
     return [a, b, c, d, e];
   }</pre>
+</div>
 <p>Now all that remains is to call <code>generate()</code> a certain number of times (say, five) in <code>setup()</code> to calculate the Koch line segments up to that generation.</p>
 <div data-type="example">
   <h3 id="example-85-the-koch-curve">Example 8.5: The Koch Curve</h3>
@@ -868,7 +869,8 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
   </tbody>
 </table>
 <p>Assuming I’ve generated a sentence from the L-system, I can iterate through the sentence character by character and execute the appropriate code for that character.</p>
-<pre class="codesplit" data-code-language="javascript">for (let i = 0; i &#x3C; sentence.length; i++) {
+<div class="snip-above snip-below">
+  <pre class="codesplit" data-code-language="javascript">for (let i = 0; i &#x3C; sentence.length; i++) {
 
   //{!1} Looking at each character one at a time.
   let c = sentence.charAt(i);
@@ -892,6 +894,7 @@ <h3 id="example-88-simple-l-system-sentence-generation">Example 8.8: Simple L-sy
     pop();
   }
 }</pre>
+</div>
 <p>With this code and the right L-system conditions, I can draw incredibly elaborate, plantlike structure. For the next example, here’s the L-system I’ll use:</p>
 <table>
   <tbody>