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

[Notion] Update docs

content/00_2_dedication.html

@@ -1,4 +1,4 @@
-<section data-type="page">
+<section data-type="page" id="section-dedication">
 <h1 id="dedication">Dedication</h1>
 <p>For my grandmother, Bella Manel Greenfield (October 13, 1915–April 3, 2010) </p>
 <figure>

content/00_4_acknowledgments.html

@@ -1,4 +1,4 @@
-<section data-type="page">
+<section data-type="page" id="section-acknowledgements">
 <h1 id="acknowledgments">Acknowledgments</h1>
 <blockquote data-type="epigraph">
   <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>

content/00_5_introduction.html

@@ -1,4 +1,4 @@
-<section data-type="page">
+<section data-type="page" id="section-introduction">
 <h1 id="introduction">Introduction</h1>
 <p>Over a decade ago, I self-published <em>The Nature of Code</em>, an online resource and print book exploring the unpredictable evolutionary and emergent properties of nature in software via the creative coding framework Processing. It’s the understatement of the century to say that much has changed in the world of technology and creative media since then, and so here I am again, with a new and rebooted version of this book built around JavaScript and the p5.js library. The book has a few new coding tricks this time, but it’s the same old nature—birds still flap their wings, and apples still fall on our heads.</p>
 <h2 id="what-is-this-book">What Is This Book?</h2>
@@ -22,7 +22,7 @@ <h2 id="how-are-you-reading-this-book">How Are You Reading This Book?</h2>
 <p>Are you reading this book on a Kindle? Printed paper? On your laptop in PDF form? On a tablet showing an animated HTML5 version? Are you strapped to a chair, absorbing the content directly into your brain via a series of electrodes, tubes, and cartridges?</p>
 <p>My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (<code>npm run build</code>), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the <a href="https://github.com/magicbookproject">Magic Book project</a>, which is an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.</p>
 <p>The reality of putting this book together isn’t quite so clean as that, and the story of how it happened is long. If you’re interested in learning more, make sure to read the book’s acknowledgments, and then go hire the people I’ve thanked to help you publish a book! <a href="https://github.com/nature-of-code">I’ll also include more details in the associated GitHub repository</a>.</p>
-<p>The bottom line is that no matter what format you’re reading it in, the material is all the same. The only difference will be in how you experience the code examples—more on that in <a href="#how-to-read-the-code">“How to Read the Code”</a>.</p>
+<p>The bottom line is that no matter what format you’re reading it in, the material is all the same. The only difference will be in how you experience the code examples—more on that in <a href="#how-to-read-the-code" class="page-reference">“How to Read the Code”</a>.</p>
 <h3 id="the-coding-train-connection">The Coding Train Connection</h3>
 <p>Personally, I still love an assembled amalgamation of cellulose pulp, meticulously bound together with a resilient spine, upon which pigmented compounds have been artfully deployed to convey words and ideas. Yet, ever since 2012, when I impulsively recorded my very first video lesson about programming in my office at ITP, I’ve discovered the tremendous value and joy in conveying ideas and lessons through moving pictures.</p>
 <p>All this is to say, I have a YouTube channel called <a href="https://www.youtube.com/thecodingtrain">the Coding Train</a>. I mentioned it earlier when discussing options for learning the prerequisite material for this book, and if you continue reading, you’ll find I continue to reference related videos. I might allude to one I made about a related algorithm or alternative technique for a particular coding example, or suggest a series on a tangential concept that could provide additional context to a topic I’m exploring.</p>

content/00_randomness.html

@@ -1,4 +1,4 @@
-<section data-type="chapter">
+<section data-type="chapter" id="section-random">
 <h1 id="chapter-0-randomness">Chapter 0. Randomness</h1>
 <div class="chapter-opening-quote">
   <blockquote data-type="epigraph">
@@ -546,7 +546,7 @@ <h3 id="noise-ranges">Noise Ranges</h3>
   //{!1} Use <code>map()</code> to customize the range of Perlin noise.
   let x = map(n, 0, 1, 0, width);
   ellipse(x, 180, 16, 16);
-  //{!1} Move forward in "time".
+  //{!1} Move forward in time.
   t += 0.01;
 }</pre>
 <p>The same logic can be applied to the random walker, assigning both its x- and y-values according to Perlin noise. This creates a smoother, more organic random walk.</p>

content/01_vectors.html

@@ -1,4 +1,4 @@
-<section data-type="chapter">
+<section data-type="chapter" id="section-vectors">
 <h1 id="chapter-1-vectors">Chapter 1. Vectors</h1>
 <div class="chapter-opening-quote">
   <blockquote data-type="epigraph">
@@ -308,7 +308,7 @@ <h3 id="example-12-bouncing-ball-with-vectors">Example 1.2: Bouncing Ball with V
 <p>It may not always be obvious when to directly access an object’s properties versus when to reference the object as a whole or use one of its methods. The goal of this chapter (and most of this book) is to help you distinguish between these scenarios by providing a variety of examples and use cases.</p>
 <div data-type="exercise">
   <h3 id="exercise-11">Exercise 1.1</h3>
-  <p>Take one of the walker examples from <a href="/random#">Chapter 0</a> and convert it to use vectors.</p>
+  <p>Take one of the walker examples from <a href="/random#section-random">Chapter 0</a> and convert it to use vectors.</p>
 </div>
 <div data-type="exercise">
   <h3 id="exercise-12">Exercise 1.2</h3>
@@ -674,7 +674,7 @@ <h2 id="motion-with-vectors">Motion with Vectors</h2>
   <li>Add the velocity to the position.</li>
   <li>Draw the object at the position.</li>
 </ol>
-<p>In the bouncing ball example, all this code happened within <code>setup()</code> and <code>draw()</code>. What I want to do now is move toward encapsulating all the logic for an object’s motion inside a <strong>class</strong>. This way, I can create a foundation for programming moving objects that I can easily reuse again and again. (See “<a href="/random#the-random-walker-class">The Random Walker Class”</a> for a brief review of OOP basics.)</p>
+<p>In the bouncing ball example, all this code happened within <code>setup()</code> and <code>draw()</code>. What I want to do now is move toward encapsulating all the logic for an object’s motion inside a <strong>class</strong>. This way, I can create a foundation for programming moving objects that I can easily reuse again and again. (See “<a href="/random#the-random-walker-class" class="page-reference">The Random Walker Class”</a> for a brief review of OOP basics.)</p>
 <p>To start, I’m going to create a generic <code>Mover</code> class that will describe a shape moving around the canvas. For that, I must consider the following two questions:</p>
 <ol>
   <li>What data does a mover have?</li>
@@ -788,7 +788,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 Chapter 4, 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="/forces#">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#section-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>