mirror of
https://github.com/nature-of-code/noc-book-2
synced 2024-11-16 07:47:48 +01:00
Notion - Update docs
This commit is contained in:
shiffman
GitHub
parent
4e19e97e92
commit
a432a69226
5 changed files with 21 additions and 19 deletions
|
|
@ -301,19 +301,6 @@ if (num < 0.6) {
|
|||
<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>
|
||||
<figure>
|
||||
<div class="col-list">
|
||||
<div>
|
||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/lwgyvHXFy" data-example-path="examples/00_randomness/figure_0_2_bell_curve_low"><img src="examples/00_randomness/figure_0_2_bell_curve_low/screenshot.png"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/4jvvCSdZP" data-example-path="examples/00_randomness/figure_0_2_bell_curve_high"><img src="examples/00_randomness/figure_0_2_bell_curve_high/screenshot.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>Figure 0.2: Two example bell curves of a normal distribution, with a low (left) and high (right) standard deviation</figcaption>
|
||||
</figure>
|
||||
<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. On the left is a distribution with a very low standard deviation, with the majority of the values piling up around the mean (they don’t deviate much from the standard). The version on the right has a higher standard deviation, so the values are more evenly spread out from the average (they deviate more).</p>
|
||||
<p>The numbers work out as follows: given a population, 68 percent of its members will have values in the range of one standard deviation from the mean, 95 percent within two standard deviations, and 99.7 percent within three standard deviations. Given a standard deviation of 5 pixels, only 0.3 percent of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250). Meanwhile, 68 percent of the monkey heights will be from 245 to 255 pixels.</p>
|
||||
<div data-type="note">
|
||||
<h3 id="calculating-mean-and-standard-deviation">Calculating Mean and Standard Deviation</h3>
|
||||
<p>Consider a class of 10 students who receive the following scores (out of 100) on a test: 85, 82, 88, 86, 85, 93, 98, 40, 73, and 83.</p>
|
||||
|
|
@ -352,6 +339,19 @@ if (num < 0.6) {
|
|||
</table>
|
||||
<p>The standard deviation is the square root of the variance: 15.13.</p>
|
||||
</div>
|
||||
<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. On the left is a distribution with a very low standard deviation, with the majority of the values piling up around the mean (they don’t deviate much from the standard). The version on the right has a higher standard deviation, so the values are more evenly spread out from the average (they deviate more).</p>
|
||||
<figure>
|
||||
<div class="col-list">
|
||||
<div>
|
||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/lwgyvHXFy" data-example-path="examples/00_randomness/figure_0_2_bell_curve_low"><img src="examples/00_randomness/figure_0_2_bell_curve_low/screenshot.png"></div>
|
||||
</div>
|
||||
<div>
|
||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/4jvvCSdZP" data-example-path="examples/00_randomness/figure_0_2_bell_curve_high"><img src="examples/00_randomness/figure_0_2_bell_curve_high/screenshot.png"></div>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>Figure 0.2: Two example bell curves of a normal distribution, with a low (left) and high (right) standard deviation</figcaption>
|
||||
</figure>
|
||||
<p>The numbers work out as follows: given a population, 68 percent of its members will have values in the range of one standard deviation from the mean, 95 percent within two standard deviations, and 99.7 percent within three standard deviations. Given a standard deviation of 5 pixels, only 0.3 percent of the monkey heights will be less than 235 pixels (three standard deviations below the mean of 250) or greater than 265 pixels (three standard deviations above the mean of 250). Meanwhile, 68 percent of the monkey heights will be from 245 to 255 pixels.</p>
|
||||
<p>Luckily, to use a normal distribution of random numbers in a p5.js sketch, you don’t have to do any of these calculations manually. Instead, the <code>randomGaussian()</code> function takes care of the math and returns random numbers with a normal distribution:</p>
|
||||
<pre class="codesplit" data-code-language="javascript">function draw() {
|
||||
// Ask for a Gaussian random number.
|
||||
|
|
|
|||
|
|
@ -488,12 +488,12 @@ friction.mult(frictionMag);</pre>
|
|||
</div>
|
||||
<h3 id="air-and-fluid-resistance">Air and Fluid Resistance</h3>
|
||||
<p>Friction also occurs when a body passes through a liquid or gas. The resulting force has many names, all really meaning the same thing: <em>viscous force</em>, <em>drag force</em>, <em>air resistance</em>, or <em>fluid resistance</em> (see Figure 2.4).</p>
|
||||
<p>The effect of a drag force is ultimately the same as the effect in our previous friction examples: the object slows down. The exact behavior and calculation of a drag force is a bit different, however. Here’s the formula:</p>
|
||||
<div data-type="equation">\vec{F_d} = - \frac{1}{2}\rho{v}^2 A C_d\hat{v}</div>
|
||||
<figure>
|
||||
<img src="images/02_forces/02_forces_5.png" alt="Figure 2.4: A drag force (air or fluid resistance) is proportional to the speed of an object and its surface area pointing in the opposite direction of the object’s velocity.">
|
||||
<figcaption>Figure 2.4: A drag force (air or fluid resistance) is proportional to the speed of an object and its surface area pointing in the opposite direction of the object’s velocity.</figcaption>
|
||||
</figure>
|
||||
<p>The effect of a drag force is ultimately the same as the effect in our previous friction examples: the object slows down. The exact behavior and calculation of a drag force is a bit different, however. Here’s the formula:</p>
|
||||
<div data-type="equation">\vec{F_d} = - \frac{1}{2}\rho{v}^2 A C_d\hat{v}</div>
|
||||
<p>Let me break this down to see what’s really necessary for an effective simulation in p5.js, making a simpler formula in the process:</p>
|
||||
<ul>
|
||||
<li><span data-type="equation">\vec{F_d}</span> refers to <em>drag force</em>, the vector to compute and pass into the <code>applyForce()</code> method.</li>
|
||||
|
|
|
|||
|
|
@ -594,12 +594,12 @@ function draw() {
|
|||
</div>
|
||||
<h2 id="waves">Waves</h2>
|
||||
<p>Imagine a single circle oscillating up and down according to the sine function. This is the equivalent of simulating a single point along the x-axis of a wave pattern. With a little panache and a <code>for</code> loop, you can animate the entire wave by placing a whole bunch of these oscillating circles next to one another (Figure 3.12).</p>
|
||||
<p>You could use this wavy pattern to design the body or appendages of a creature, or to simulate a soft surface (such as water). Let’s dive into how the code for this sketch works.</p>
|
||||
<p>Here, the same concepts of amplitude (the wave’s height) and period (the wave’s duration) come into play. However, when drawing the entire wave, the term <em>period</em> shifts its meaning from representing time to describing the width (in pixels) of a full wave cycle. The term for the spatial period (as opposed to the temporal period) of a wave is <strong>wavelength</strong>—the distance a wave travels to complete one full oscillation cycle. And just as with the previous oscillation example, you have the choice of computing the wave pattern according to a precise wavelength or by arbitrarily incrementing the angle value (<em>delta angle</em>) for each spot on the wave.</p>
|
||||
<figure>
|
||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/qe6oK9F1o" data-example-path="examples/03_oscillation/example_3_9_the_wave"><img src="examples/03_oscillation/example_3_9_the_wave/screenshot.png"></div>
|
||||
<figcaption>Figure 3.12: Animating the sine wave with oscillating circles</figcaption>
|
||||
</figure>
|
||||
<p>You could use this wavy pattern to design the body or appendages of a creature, or to simulate a soft surface (such as water). Let’s dive into how the code for this sketch works.</p>
|
||||
<p>Here, the same concepts of amplitude (the wave’s height) and period (the wave’s duration) come into play. However, when drawing the entire wave, the term <em>period</em> shifts its meaning from representing time to describing the width (in pixels) of a full wave cycle. The term for the spatial period (as opposed to the temporal period) of a wave is <strong>wavelength</strong>—the distance a wave travels to complete one full oscillation cycle. And just as with the previous oscillation example, you have the choice of computing the wave pattern according to a precise wavelength or by arbitrarily incrementing the angle value (<em>delta angle</em>) for each spot on the wave.</p>
|
||||
<p>I’ll go with the simpler case, incrementing the angle. I know I need three variables: an angle, a delta angle (analogous to the previous angular velocity), and an amplitude:</p>
|
||||
<pre class="codesplit" data-code-language="javascript">let angle = 0;
|
||||
let deltaAngle = 0.2;
|
||||
|
|
|
|||
|
|
@ -59,11 +59,11 @@
|
|||
<h2 id="importing-the-matterjs-library">Importing the Matter.js Library</h2>
|
||||
<p>In a moment, I’ll turn to working with Matter.js, created by Liam Brummitt in 2014. But before you can use an external JavaScript library in a p5.js project, you need to import it into your sketch. As you’re already quite aware, I’m using the official p5.js web editor for developing and sharing this book’s code examples. The easiest way to add a library is to edit the <em>index.html</em> file that’s part of every new p5.js sketch created in the editor.</p>
|
||||
<p>To do that, first expand the file navigation bar on the left-hand side of the editor and select <em>index.html</em>, as shown in Figure 6.2.</p>
|
||||
<p>The file includes a series of <code><script></code> tags inside the HTML tags <code><head></code> and <code></head></code>. This is how JavaScript libraries are referenced in a p5.js sketch. It’s no different from including <code>sketch.js</code> or <code>particle.js</code> in the page’s <code><body></code>, only here, instead of keeping and editing a copy of the JavaScript code, the library is referenced with a URL of a <strong>content delivery network (CDN)</strong>. This is a type of server for hosting files. For JavaScript libraries that are used across hundreds of thousands of web pages accessed by millions upon millions of users, CDNs need to be pretty good at their job of serving up these libraries.</p>
|
||||
<figure>
|
||||
<img src="images/06_libraries/06_libraries_3.png" alt="Figure 6.2: Accessing a sketch’s index.html file">
|
||||
<figcaption>Figure 6.2: Accessing a sketch’s <em>index.html</em> file</figcaption>
|
||||
</figure>
|
||||
<p>The file includes a series of <code><script></code> tags inside the HTML tags <code><head></code> and <code></head></code>. This is how JavaScript libraries are referenced in a p5.js sketch. It’s no different from including <code>sketch.js</code> or <code>particle.js</code> in the page’s <code><body></code>, only here, instead of keeping and editing a copy of the JavaScript code, the library is referenced with a URL of a <strong>content delivery network (CDN)</strong>. This is a type of server for hosting files. For JavaScript libraries that are used across hundreds of thousands of web pages accessed by millions upon millions of users, CDNs need to be pretty good at their job of serving up these libraries.</p>
|
||||
<p>You should already see a <code><script></code> tag referencing the CDN for p5.js (it may be a later version by the time you are reading this):</p>
|
||||
<pre class="codesplit" data-code-language="html"><script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script></pre>
|
||||
<p>To use Matter.js, add another <code><script></code> tag referencing its CDN right below the one for p5:</p>
|
||||
|
|
|
|||
|
|
@ -81,10 +81,12 @@
|
|||
background(0);
|
||||
}</pre>
|
||||
<p>Here’s the key difference with recursion: What would happen if you called the function you’re defining within that function itself? Can <code>someFunction()</code> call <code>someFunction()</code>?</p>
|
||||
<pre class="codesplit" data-code-language="javascript">function someFunction() {
|
||||
<div class="avoid-break">
|
||||
<pre class="codesplit" data-code-language="javascript">function someFunction() {
|
||||
//{!1} Is this a paradox?
|
||||
someFunction();
|
||||
}</pre>
|
||||
</div>
|
||||
<p>Not only is this allowed, but it’s quite encouraged! In fact, it’s essential to the way I’ll implement the Cantor set. Functions that call themselves are known as <strong>recursive functions</strong>, and they’re well suited for solving certain problems. For example, some mathematical calculations are implemented recursively; the most well-known example is the <strong>factorial</strong>.</p>
|
||||
<p>The factorial of any number <em>n</em>, usually written as <em>n</em>!, is defined as follows:</p>
|
||||
<div data-type="equation">n! = n × (n - 1) × … × 3 × 2 × 1</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue