Merge branch 'main' into pdf/break-code-lines

content/00_5_introduction.html

@@ -155,7 +155,7 @@ <h3 id="context-free-code"><strong>Context-Free Code</strong></h3>
 <p>Occasionally, you’ll find lines of code hanging out on the page without a surrounding function or context. These snippets are there to illustrate a point, not necessarily to be run as is. They might represent a concept, a tiny piece of an algorithm, or a coding technique.</p>
 <pre class="codesplit" data-code-language="javascript">    // RGB values to make the circles pink
     fill(240, 99, 164);</pre>
-<p>Notice that this context-free snippet matches the indentation of <code>fill(255)</code> in the previous “complete” snippet. I’ll do this when the code has been established to be part of something demonstrated previously. Admittedly, this won’t always work out so cleanly or perfectly, but I’m doing my best!</p>
+<p>Notice that this context-free snippet matches the indentation of <code>fill(255)</code> in the previous “complete” snippet. I’ll do this when the code has been established to be part of something demonstrated previously. Admittedly, this won’t always work out so cleanly or perfectly, but<br>I’m doing my best!</p>
 <h3 id="snipped-code"><strong>Snipped Code</strong></h3>
 <p>Be on the lookout for the scissors! This design element indicates that a code snippet is a continuation of a previous piece or will be continued after some explanatory text. Sometimes it’s not actually being continued but is just cut off because all the code isn’t relevant to the discussion at hand. The scissors are there to say, “Hey, there might be more to this code above or below, or at the very least, this is a part of something bigger!” Here’s how this might play out with some surrounding body text.</p>
 <p>The first step to building a p5.js sketch is to create a canvas:</p>
@@ -200,5 +200,5 @@ <h3 id="the-ecosystem-project">The Ecosystem Project</h3>
 <h2 id="getting-help-and-submitting-feedback">Getting Help and Submitting Feedback</h2>
 <p>Coding can be tough and frustrating, and the ideas in this book aren’t always straightforward. You don’t have to go it alone. There’s probably someone else reading right now who would love to co-organize a study group or a book club where you can meet, chat, and share your struggles and successes. If you don’t find a local community for traveling this journey together, what about an online one? Two places I’d suggest are <a href="https://discourse.processing.org/">the official Processing forums</a> and <a href="https://thecodingtrain.com/discord">the Coding Train Discord server</a>.</p>
 <p>I consider the online version of this book a living document and welcome your feedback. For all things book related, <a href="https://natureofcode.com/">please visit the Nature of Code website</a>. The <a href="https://github.com/nature-of-code">raw source text of the book and all the illustrations are on GitHub</a>. Please <a href="https://github.com/nature-of-code/noc-book-2023/issues">leave feedback and submit corrections by using GitHub issues</a>.</p>
-<p>More important, I want to see what you make! You can share your ideas by <a href="https://thecodingtrain.com/showcase">submitting to the passenger showcase on the Coding Train website</a>, or in the channels on the aforementioned Discord. A hello in a YouTube comment is always welcome (although to be honest, it’s often best not to read the comments on YouTube), and feel free to tag me on whatever platform the future of social media has to offer—whichever one is the friendliest and least toxic! I want to enjoy all the bloops that swim in your ecosystem. Whether they leap triumphantly over a wave of creativity or make a tiny splash in a pond of learning, let’s bask in the ripples they send through the nature of coding!</p>
+<p>More important, I want to see what you make! You can share your ideas by <a href="https://thecodingtrain.com/showcase">submitting to the passenger showcase on the Coding Train website</a> or in the channels on the aforementioned Discord. A hello in a YouTube comment is always welcome (although to be honest, it’s often best not to read the comments on YouTube), and feel free to tag me on whatever platform the future of social media has to offer—whichever one is the friendliest and least toxic! I want to enjoy all the bloops that swim in your ecosystem. Whether they leap triumphantly over a wave of creativity or make a tiny splash in a pond of learning, let’s bask in the ripples they send through the nature of coding!</p>
 </section>

content/00_randomness.html

@@ -62,7 +62,7 @@ <h2 id="random-walks">Random Walks</h2>
   <li>The random walk instigates the two questions that I’ll ask over and over again throughout this book: “How do you define the rules that govern the behavior of your objects?” and then, “How do you implement these rules in code?”</li>
   <li>You’ll periodically need a basic understanding of randomness, probability, and Perlin noise for this book’s projects. The random walk will allow me to demonstrate key points that will come in handy later.</li>
 </ul>
-<p>I’ll first review a bit of OOP by coding a <code>Walker</code> class to create <code>Walker</code> objects that can go for a random walk. This will be only a cursory review. If you’ve never worked with OOP before, you may want something more comprehensive; I’d suggest stopping here and reviewing <a href="https://thecodingtrain.com/objects">the “Objects” section of my “Programming with p5.js” video course at the Coding Train website</a>.</p>
+<p>I’ll first review a bit of OOP by coding a <code>Walker</code> class to create <code>Walker</code> objects that can go for a random walk. This will be only a cursory review. If you’ve never worked with OOP before, you may want something more comprehensive; I’d suggest stopping here and reviewing <a href="https://thecodingtrain.com/objects">the “Objects” section of my “Code! Programming with p5.js” video course at the Coding Train website</a>.</p>
 <h2 id="the-random-walker-class">The Random Walker Class</h2>
 <p>An <strong>object</strong> in JavaScript is an entity that has both data and functionality. In this case, a <code>Walker</code> object should have data about its position on the canvas and functionality such as the capability to draw itself or take a step.</p>
 <p>A <strong>class</strong> is the template for building actual instances of objects. Think of a class as the cookie cutter and objects as the cookies themselves. To create a <code>Walker</code> object, I’ll begin by defining the <code>Walker</code> class—what it means to be a walker.</p>
@@ -296,7 +296,7 @@ <h2 id="a-normal-distribution-of-random-numbers">A Normal Distribution of Random
 <p>Another way to create a nonuniform distribution of random numbers is to use a <strong>normal distribution</strong>, where the numbers cluster around an average value. To see why this is useful, let’s go back to that population of simulated monkeys and assume your sketch generates a thousand <code>Monkey</code> objects, each with a random height value of 200 to 300 (as this is a world of monkeys that have heights of 200 to 300 pixels):</p>
 <pre class="codesplit" data-code-language="javascript">let h = random(200, 300);</pre>
 <p>Is this an accurate algorithm for creating a population of monkey heights? Think of a crowded sidewalk in New York City. Pick any person off the street, and it may appear that their height is random. Nevertheless, it’s not the kind of random that <code>random()</code> produces by default. People’s heights aren’t uniformly distributed; there are many more people of about average height than there are very tall or very short ones. To accurately reflect this population, random heights close to the <strong>mean</strong> (another word for <em>average</em>) should be more likely to be chosen, while outlying heights (very short or very tall) should be rarer.</p>
-<p>That’s exactly how a normal distribution (sometimes called a Gaussian distribution, after mathematician Carl Friedrich Gauss) works. A graph of this distribution is informally known as a <strong>bell curve</strong>. The curve is generated by a mathematical function that defines the probability of any given value occurring as a function of the mean (often written as μ, the Greek letter mu) and standard deviation (σ, the Greek letter sigma).</p>
+<p>That’s exactly how a normal distribution (sometimes called a Gaussian distribution, after mathematician Carl Friedrich Gauss) works. A graph of this distribution is informally known as a<br><strong>bell curve</strong>. The curve is generated by a mathematical function that defines the probability of any given value occurring as a function of the mean (often written as μ, the Greek letter mu) and<br>standard deviation (σ, the Greek letter sigma).</p>
 <p>In the case of height values from 200 to 300, you probably have an intuitive sense of the mean (average) as 250. However, what if I were to say that the standard deviation is 3? Or 15? What does this mean for the numbers? The graphs depicted in Figure 0.2 should give you a hint.</p>
 <figure>
   <div class="col-list">
@@ -436,7 +436,7 @@ <h3 id="example-05-an-accept-reject-distribution">Example 0.5: An Accept-Reject
     }
   }
 }</pre>
-<p>While the accept-reject algorithm does work for generating custom distributions of random numbers, this technique is not particularly efficient. It can lead to a considerable amount of wasted computation when a large number of random values are rejected, especially when the qualifying probability is very low. When I get to genetic algorithms in Chapter 9, I’ll take a different, more optimal approach.</p>
+<p>While the accept-reject algorithm does work for generating custom distributions of random<br>numbers, this technique is not particularly efficient. It can lead to a considerable amount of wasted computation when a large number of random values are rejected, especially when the qualifying probability is very low. When I get to genetic algorithms in Chapter 9, I’ll take a different, more optimal approach.</p>
 <div data-type="exercise">
   <h3 id="exercise-06">Exercise 0.6</h3>
   <p>Use a custom probability distribution to vary the size of the random walker’s steps. The step size can be determined by influencing the range of values picked with a qualifying random value. Can you map the probability to a quadratic function by making the likelihood that a value is picked equal to the value squared?</p>