Skip to content

Commit

Permalink
Merge pull request #848 from nature-of-code/notion-update-docs
Browse files Browse the repository at this point in the history
[Notion] Update docs
  • Loading branch information
jasongao97 authored Feb 26, 2024
2 parents f56da65 + 8edd906 commit bfa0d1d
Show file tree
Hide file tree
Showing 4 changed files with 11 additions and 5 deletions.
2 changes: 1 addition & 1 deletion content/00_randomness.html
Original file line number Diff line number Diff line change
Expand Up @@ -459,7 +459,7 @@ <h2 id="a-smoother-approach-with-perlin-noise">A Smoother Approach with Perlin N
</div>
<figcaption>Figure 0.4: A graph of Perlin noise values over time (left) and of random noise values over time (right)</figcaption>
</figure>
<p>Ken Perlin developed the original Perlin noise algorithm while working on the movie <em>Tron</em> in the early 1980s; he later received an Academy Award in technical achievement for this work. The algorithm was designed to create procedural textures for computer-generated effects. (<em>Procedural</em> refers to generating the visual elements algorithmically, rather than an artist manually designing them.) Over the years, a variety of other flavors of noise have been developed by different authors. Some notable ones are value noise, Worley noise, and simplex noise (developed by Perlin himself in 2001). You can learn more about the history of Perlin noise at <a href="https://mrl.nyu.edu/~perlin/doc/oscar.html">Ken Perlin’s website</a> and its variations over the years in my “What Is OpenSimplex Noise?” video on <a href="https://thecodingtrain.com/opensimplexnoise">the Coding Train website</a>.</p>
<p>Ken Perlin developed the original Perlin noise algorithm while working on the movie <em>Tron</em> in the early 1980s; he later received an Academy Award in technical achievement for this work. The algorithm was designed to create procedural textures for computer-generated effects. (<em>Procedural</em> refers to generating the visual elements algorithmically, rather than an artist manually designing them.) Over the years, a variety of other flavors of noise have been developed by different authors. Some notable ones are value noise, Worley noise, and simplex noise (developed by Perlin himself in 2001). You can learn more about the history of Perlin noise at <a href="https://mrl.nyu.edu/~perlin/doc/oscar.html">Ken Perlin’s website</a> and its variations over the years in my <a href="https://thecodingtrain.com/opensimplexnoise">“What Is OpenSimplex Noise?” video on the Coding Train website</a>.</p>
<p>The p5.js library incorporates an implementation of the classic 1983 Perlin noise algorithm in a function called <code>noise()</code>. It can take one, two, or three arguments, as noise is computed in one, two, or three dimensions. I’ll start by showing you one-dimensional (1D) noise.</p>
<p>Say you want to draw a circle on a canvas at a random x-position. Out of habit, you might use the <code>random()</code> function:</p>
<pre class="codesplit" data-code-language="javascript">//{!1} A random x-position
Expand Down
5 changes: 4 additions & 1 deletion content/01_vectors.html
Original file line number Diff line number Diff line change
Expand Up @@ -834,7 +834,10 @@ <h3 id="algorithm-1-constant-acceleration">Algorithm 1: Constant Acceleration</h
</div>
<p>I’m almost finished. The only missing piece is to get that mover moving! In the constructor, the initial velocity is set to 0, rather than a random vector as previously done. Therefore, when the sketch starts, the object is at rest. To get it moving instead of changing the velocity directly, I’ll update it through the object’s acceleration. According to Algorithm 1, the acceleration should be constant, so I’ll choose a value now:</p>
<pre class="codesplit" data-code-language="javascript"> this.acceleration = createVector(-0.001, 0.01);</pre>
<p>This means that for every frame of the animation, the object’s velocity should increase by –0.001 pixels in the x-direction and 0.01 pixels in the y-direction. Maybe you’re thinking, “Gosh, those values seem awfully small!” Indeed, they are quite tiny, but that’s by design. Acceleration values accumulate over time in the velocity, about 30 times per second, depending on the sketch’s frame rate. To keep the magnitude of the velocity vector from growing too quickly and spiraling out of control, the acceleration values should remain quite small.</p>
<p>
This means that for every frame of the animation, the object’s velocity should increase by –0.001
pixels in the x-direction and 0.01 pixels in the y-direction. Maybe you’re thinking, “Gosh, those values seem awfully small!” Indeed, they are quite tiny, but that’s by design. Acceleration values accumulate over time in the velocity, about 30 times per second, depending on the sketch’s frame rate. To keep the magnitude of the velocity vector from growing too quickly and spiraling out of control, the acceleration values should remain quite small.
</p>
<p>I can also help keep the velocity within a reasonable range by incorporating the <code>p5.Vector</code> function <code>limit()</code>, which puts a cap on the magnitude of a vector:</p>
<pre class="codesplit" data-code-language="javascript"> // The <code>limit()</code> function constrains the magnitude of a vector.
this.velocity.limit(10);</pre>
Expand Down
7 changes: 5 additions & 2 deletions content/02_forces.html
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,10 @@ <h3 id="newtons-third-law">Newton’s Third Law</h3>
</div>
<p>Considering p5.js again, I could restate Newton’s third law as follows:</p>
<p><span class="highlight">If you calculate a <code>p5.Vector</code> called <code>f</code> that represents a force of object A on object B, you must also apply the opposite force that object B exerts on object A. You can calculate this other force as <code>p5.Vector.mult(f, -1)</code>.</span></p>
<p>You’ll soon see that in the world of coding simulation, it’s often not necessary to stay true to Newton’s third law. Sometimes, such as in the case of gravitational attraction between bodies (see Example 2.8), I’ll want to model equal and opposite forces in my example code. Other times, such as a scenario where I’ll say, “Hey, there’s some wind in the environment,” I’m not going to bother to model the force that a body exerts back on the air. In fact, I’m not going to bother modeling the air at all! Remember, the examples in this book are taking inspiration from the physics of the natural world for the purposes of creativity and interactivity. They don’t require perfect precision.</p>
<p>
You’ll soon see that in the world of coding simulation, it’s often not necessary to stay true to Newton’s third law. Sometimes, such as in the case of gravitational attraction between bodies (see Example
2.8), I’ll want to model equal and opposite forces in my example code. Other times, such as a scenario where I’ll say, “Hey, there’s some wind in the environment,” I’m not going to bother to model the force that a body exerts back on the air. In fact, I’m not going to bother modeling the air at all! Remember, the examples in this book are taking inspiration from the physics of the natural world for the purposes of creativity and interactivity. They don’t require perfect precision.
</p>
<h3 id="newtons-second-law">Newton’s Second Law</h3>
<p>Now it’s time for most important law for you, the p5.js coder: Newton’s second law. It’s stated as follows:</p>
<p><span class="highlight">Force equals mass times acceleration.</span></p>
Expand Down Expand Up @@ -1083,7 +1086,7 @@ <h3 id="exercise-215">Exercise 2.15</h3>
</div>
<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 <a href="https://thecodingtrain.com/nbody">the Coding Train website</a>.</p>
<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 <a href="https://thecodingtrain.com/nbody">“Mutual Attraction” video in the Nature of Code series on the Coding Train website</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>
Expand Down
2 changes: 1 addition & 1 deletion content/10_nn.html
Original file line number Diff line number Diff line change
Expand Up @@ -593,7 +593,7 @@ <h3 id="classification-and-regression">Classification and Regression</h3>
<p>Rather than picking from a discrete set of output options, the goal of the neural network is now to guess a number—any number. Will the house use 30.5 kilowatt-hours of electricity that day? Or 48.7 kWh? Or 100.2 kWh? The output prediction could be any value from a continuous range.</p>
<h3 id="network-design">Network Design</h3>
<p>Knowing what problem you’re trying to solve (step 0) also has a significant bearing on the design of the neural network—in particular, on its input and output layers. I’ll demonstrate with another classic “Hello, world!” classification example from the field of data science and machine learning: the iris dataset. This dataset, which can be found in the Machine Learning Repository at the University of California, Irvine, originated from the work of American botanist Edgar Anderson.</p>
<p>Anderson collected flower data over many years across multiple regions of the United States and Canada. For more on the origins of this famous dataset, see “The Iris Data Set: In Search of the Source of <em>Virginica</em><a href="https://academic.oup.com/jrssig/article/18/6/26/7038520">” by Antony Unwin and Kim Kleinman</a>. After carefully analyzing the data, Anderson built a table to classify iris flowers into three distinct species: <em>Iris setosa</em>, <em>Iris virginica</em>, and <em>Iris versicolor </em>(see Figure 10.17).</p>
<p>Anderson collected flower data over many years across multiple regions of the United States and Canada. For more on the origins of this famous dataset, see <a href="https://academic.oup.com/jrssig/article/18/6/26/7038520">“The Iris Data Set: In Search of the Source of <em>Virginica</em>” by Antony Unwin and Kim Kleinman</a>. After carefully analyzing the data, Anderson built a table to classify iris flowers into three distinct species: <em>Iris setosa</em>, <em>Iris virginica</em>, and <em>Iris versicolor </em>(see Figure 10.17).</p>
<figure>
<img src="images/10_nn/10_nn_18.png" alt="Figure 10.17: Three distinct species of iris flowers">
<figcaption>Figure 10.17: Three distinct species of iris flowers</figcaption>
Expand Down

0 comments on commit bfa0d1d

Please sign in to comment.