Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Notion - Update docs

Browse source
This commit is contained in:
shiffman 2023-02-06 15:33:49 +00:00 committed by GitHub
parent 04351ab09b
commit 33361de5d2
3 changed files with 34 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
content/00_7_introduction.html
View file

@ -201,7 +201,7 @@
</div><a data-type="indexterm" data-primary="arrays" data-secondary="custom distributions" data-tertiary="creating with"></a><a data-type="indexterm" data-primary="distributions" data-secondary="non-uniform" data-tertiary="creating with arrays"></a><a data-type="indexterm" data-primary="non-uniform distributions" data-secondary="creating with arrays"></a><a data-type="indexterm" data-primary="random() function" data-secondary="non-uniform distributions" data-tertiary="creating with"></a>
<p>There are a couple of ways in which you can use the <code>random()</code> function with probability in code. One technique is to fill an array with numbers—some of which are repeated—then choose random elements from that array and generate events based on those choices.</p>
<pre class="codesplit" data-code-language="javascript"> // 1 and 3 are stored in the array twice, making them more likely to be picked than 2.
let stuff = {1, 1, 2, 3, 3};
let stuff = [1, 1, 2, 3, 3];
// Picking a random element from an array
let value = random(stuff);
print(value);</pre>
@ -336,7 +336,8 @@
</figure>
</div>
<pre class="codesplit" data-code-language="javascript"> function draw() {
//{!1} A normal distribution with mean 320 and standard deviation 60 let x = randomGaussian(320, 120);
//{!1} A normal distribution with mean 320 and standard deviation 60
let x = randomGaussian(320, 60);
noStroke();
fill(0, 10);
ellipse(x, 180, 16, 16);

57
content/01_vectors.html
View file

@ -4,16 +4,16 @@
<p>“Roger, Roger. What’s our vector, Victor?”</p>
<p>— Captain Oveur (Airplane)</p>
</blockquote><a data-type="indexterm" data-primary="vectors"></a>
<p>This book is all about looking at the world around us and coming up with clever ways to simulate that world with code. Divided into three parts, the book will start by looking at basic physics—how an apple falls from a tree, a pendulum swings in the air, the earth revolves around the sun, etc. Absolutely everything contained within the first five chapters of this book requires the use of the most basic building block for programming motion—the <strong><em>vector</em></strong>. And so this is where I begin the story.</p><a data-type="indexterm" data-primary="Euclid"></a><a data-type="indexterm" data-primary="Euclidean vector"></a><a data-type="indexterm" data-primary="geometric vector"></a><a data-type="indexterm" data-primary="vectors" data-secondary="defined"></a>
<p>Now, the word vector can mean a lot of different things. Vector is the name of a New Wave rock band formed in Sacramento, CA in the early 1980s. It’s the name of a breakfast cereal manufactured by Kellogg’s Canada. In the field of epidemiology, a vector is used to describe an organism that transmits infection from one host to another. In the C++ programming language, a vector (std::vector) is an implementation of a dynamically resizable array data structure. While all these definitions are interesting, they’re not what we’re looking for. What I want to focus on is a <strong><em>Euclidean vector</em></strong> (named for the Greek mathematician Euclid and also known as a geometric vector). When you see the term “vector” in this book, you can assume it refers to a Euclidean vector, defined as <em>an entity that has both magnitude and direction</em>.</p><a data-type="indexterm" data-primary="vectors" data-secondary="notation"></a>
<p>This book is all about looking at the world around us and developing ways to simulate that world with code. Divided into three parts, the book will start by looking at basic physics—how an apple falls from a tree, a pendulum swings in the air, the earth revolves around the sun, etc. Absolutely everything contained within the first five chapters of this book requires the use of the most basic building block for programming motion—the <strong><em>vector</em></strong>. And so this is where I begin the story.</p><a data-type="indexterm" data-primary="Euclid"></a><a data-type="indexterm" data-primary="Euclidean vector"></a><a data-type="indexterm" data-primary="geometric vector"></a><a data-type="indexterm" data-primary="vectors" data-secondary="defined"></a>
<p>Now, the word vector can mean a lot of different things. Vector is the name of a New Wave rock band formed in Sacramento, CA in the early 1980s. It’s the name of a breakfast cereal manufactured by Kellogg’s Canada. In the field of epidemiology, a vector is used to describe an organism that transmits infection from one host to another. In the C++ programming language, a vector (std::vector) is an implementation of a dynamically resizable array data structure. While all these definitions are worth exploring, they’re not the focus here. Instead, this chapter dives into the <strong><em>Euclidean vector</em></strong> (named for the Greek mathematician Euclid and also known as a geometric vector). When you see the term “vector” in this book, you can assume it refers to a Euclidean vector, defined as <em>an entity that has both magnitude and direction</em>.</p><a data-type="indexterm" data-primary="vectors" data-secondary="notation"></a>
<figure class="half-width-left">
<img src="images/01_vectors/01_vectors_1.png" alt=" Figure 1.1">
<figcaption>Figure 1.1</figcaption>
<img src="images/01_vectors/01_vectors_1.png" alt=" Figure 1.1: A vector represented as an arrow drawing from point A to point B.">
<figcaption>Figure 1.1: A vector represented as an arrow drawing from point A to point B.</figcaption>
</figure>
<p>A vector is typically drawn as a arrow; the direction is indicated by where the arrow is pointing, and the magnitude by the length of the arrow itself.</p>
<p>A vector is typically drawn as an arrow; the direction is indicated by where the arrow is pointing, and the magnitude by the length of the arrow itself.</p>
<p>In the Figure 1.1, the vector is drawn as an arrow from point A to point B and serves as an instruction for how to travel from A to B.</p>
<h2 id="11-vectors-you-complete-me">1.1 Vectors, You Complete Me</h2><a data-type="indexterm" data-primary="bouncing ball sketch"></a><a data-type="indexterm" data-primary="vectors" data-secondary="bouncing ball sketch"></a>
<p>Before we dive into more of the details about vectors, I’d like to create a basic p5.js example that demonstrates why you should care about vectors in the first place. If you’ve read any of the introductory p5.js textbooks or taken an introduction to creative coding course (and hopefully you’ve done one of these things to help prepare you for this book), you probably, at one point or another, learned how to write a simple bouncing ball sketch.</p>
<p>Before diving into more of the details about vectors, I’d like to create a p5.js example that demonstrates why you should care about vectors in the first place. If you’ve watched any beginner p5.js tutorials, read any introductory p5.js textbooks or taken an introduction to creative coding course (and hopefully you’ve done one of these things to help prepare you for this book!), you probably, at one point or another, learned how to write a bouncing ball sketch.</p>
<div data-type="example">
<h3 id="example-11-bouncing-ball-with-no-vectors">Example 1.1: Bouncing ball with no vectors</h3>
<figure>
@ -50,10 +50,10 @@ function draw() {
stroke(0);
fill(175);
//{!1} Display the ball at the position (x,y).
ellipse(x, y, 16, 16);
//{!1} Draw the ball at the position (x,y).
circle(x, y, 48);
}</pre>
<p>In the above example, there is a very simple world—a blank canvas with a circular shape (a “ball”) traveling around. This ball has some properties, which are represented in the code as variables.</p>
<p>In the above example, there is a flat two dimensional world—a blank canvas—with a circular shape (a “ball”) traveling around. This ball has properties, which are represented in the code as variables.</p>
<table>
<tbody>
<tr>
@ -87,8 +87,8 @@ function draw() {
</tr>
</tbody>
</table>
<p>It’s becoming clearer that for every concept in this world (wind, position, acceleration, etc.), I’ll need two variables. And this is only a two-dimensional world. In a 3D world, I’d need <code>x</code>, <code>y</code>, <code>z</code>, <code>xspeed</code>, <code>yspeed</code>, <code>zspeed</code>, and so on.</p>
<p>Wouldn’t it be nice if I could simplify the code and use fewer variables?</p>
<p>You might notice that for every concept in this world (wind, position, acceleration, etc.), there are two variables. And this is only a two-dimensional world. In a 3D world, you’d need <code>x</code>, <code>y</code>, <code>z</code>, <code>xspeed</code>, <code>yspeed</code>, <code>zspeed</code>, and so on.</p>
<p>Wouldn’t it be nice to simplify the code and use fewer variables?</p>
<p>Instead of:</p>
<pre class="codesplit" data-code-language="javascript">let x;
let y;
@ -97,14 +97,14 @@ let yspeed;</pre>
<p>I would love to have…</p>
<pre class="codesplit" data-code-language="javascript">let position;
let speed;</pre>
<p>Taking this first step in using vectors won’t allow me to do anything new. Just adding vectors won’t magically make your Processing sketches simulate physics. However, they will simplify your code and provide a set of functions for common mathematical operations that happen over and over and over again while programming motion.</p>
<p>As an introduction to vectors, I’m going to stick to two dimensions for quite some time (at least the first several chapters). All of these examples can be fairly easily extended to three dimensions (and the class I will use—<code>p5.Vector</code>—allows for three dimensions.) However, it’s easier to start with just two.</p>
<p>Taking this first step in using vectors won’t allow me to do anything new. Just adding vectors won’t magically turn your p5.js sketches into physics simulations. However, they will help organize your code and provide a set of functions for common mathematical operations that happen over and over and over again while programming motion.</p>
<p>As an introduction to vectors, I’m going to stick to two dimensions for quite some time (at least the first several chapters). All of these examples can be fairly easily extended to three dimensions (and the class I will use—<code>p5.Vector</code>—allows for three dimensions.) However, for the purposes of learning the fundamentals, the added complexity of the 3rd dimension would be a distraction.</p>
<h2 id="12-vectors-for-p5js-programmers">1.2 Vectors for p5.js Programmers</h2><a data-type="indexterm" data-primary="Processing" data-secondary="vectors and"></a><a data-type="indexterm" data-primary="PVector class (Processing)"></a><a data-type="indexterm" data-primary="vectors" data-secondary="Processing and"></a>
<p>One way to think of a vector is the difference between two points. Consider how you might go about providing instructions to walk from one point to another.</p>
<p>One way to think of a vector is the difference between two points. Consider how you might write instructions to walk from one point to another.</p>
<p>Here are some vectors and possible translations:</p>
<figure>
<img src="images/01_vectors/01_vectors_2.png" alt="Figure 1.2">
<figcaption>Figure 1.2</figcaption>
<img src="images/01_vectors/01_vectors_2.png" alt="Figure 1.2: Three example vectors drawn as arrows with accompanying instructions for walking in north, south, east, or west directions.">
<figcaption>Figure 1.2: Three example vectors drawn as arrows with accompanying instructions for walking in north, south, east, or west directions.</figcaption>
</figure>
<table>
<tbody>
@ -122,19 +122,20 @@ let speed;</pre>
</tr>
</tbody>
</table>
<p>You’ve probably done this before when programming motion. For every frame of animation (i.e. a single cycle through p5’s <code>draw()</code> loop), you instruct each object on the screen to move a certain number of pixels horizontally and a certain number of pixels vertically.</p>
<p>You’ve probably done this before when programming motion. For every frame of animation (i.e. a single cycle through p5’s <code>draw()</code> loop), you instruct each object to move a certain number of pixels horizontally and a certain number of pixels vertically in a canvas.</p>
<figure>
<img src="images/01_vectors/01_vectors_3.png" alt="Figure 1.3">
<figcaption>Figure 1.3</figcaption>
<img src="images/01_vectors/01_vectors_3.png" alt="Figure 1.3: A vector showing the number of horizontal and vertical steps to go from a position to a “new” position.">
<figcaption>Figure 1.3: A vector showing the number of horizontal and vertical steps to go from a position to a “new” position.</figcaption>
</figure>
<p>For every frame:</p>
<p><strong><em>new position = velocity applied to current position</em></strong></p><a data-type="indexterm" data-primary="positions" data-secondary="as vectors"></a><a data-type="indexterm" data-primary="vectors" data-secondary="positions and"></a><a data-type="indexterm" data-primary="vectors" data-secondary="velocity and"></a><a data-type="indexterm" data-primary="velocity" data-secondary="as vector"></a>
<p>If velocity is a vector (the difference between two points), what is position? Is it a vector too? Technically, you could argue that position is not a vector, since it’s not describing how to move from one point to another—it’s describing a singular point in space.</p>
<p>Nevertheless, another way to describe a position is the path taken from the origin to reach that position. Hence, a position is the vector representing the difference between position and origin.</p>
<p>Nevertheless, another way to describe a position is the path taken from the origin to reach that point. Hence, a position is the vector representing the difference between origin and position.</p>
<figure>
<img src="images/01_vectors/01_vectors_4.png" alt="Figure 1.4">
<figcaption>Figure 1.4</figcaption>
<img src="images/01_vectors/01_vectors_4.png" alt="Figure 1.4: A computer graphics window with (0,0) in the top left showing a position vector and a velocity vector.">
<figcaption>Figure 1.4: A computer graphics window with (0,0) in the top left showing a position vector and a velocity vector.</figcaption>
</figure>
<p>In Figure 1.4, the vectors are placed in a computer graphics canvas. Unlike the Figure 1.2, the origin point <code>(0,0)</code> is not the center and instead of north, south, east, and west there are positive and negative directions along the x and y axes (with y pointing down in the positive direction!).</p>
<p>Let’s examine the underlying data for both position and velocity. In the bouncing ball example, I had the following:</p>
<table>
<tbody>
@ -148,7 +149,7 @@ let speed;</pre>
</tr>
</tbody>
</table>
<p>Notice how I am storing the same data for both—two floating point numbers, an <code>x</code> and a <code>y</code>. If I were to write a vector class myself, I’d start with something rather basic:</p>
<p>Notice how the vectors store the same data for both—two floating point numbers, an <code>x</code> and a <code>y</code>. If I were to write a vector class myself, I’d start with something like:</p>
<pre class="codesplit" data-code-language="javascript">class Vector {
constructor(x, y) {
this.x = x;
@ -164,8 +165,8 @@ let yspeed = 3.3;</pre>
<p>becomes …</p>
<pre class="codesplit" data-code-language="javascript">let position = createVector(100, 100);
let velocity = createVector(1, 3.3);</pre>
<p>I'll note that in the above code the vector objects are not created, as you might expect, by invoking a constructor function. Instead of <code>new Vector(x, y)</code> (or more accurately in p5 <code>new p5.Vector(x, y)</code>), <code>createVector(x, y)</code> is called. The <code>createVector()</code> function is included in a p5.js as a helper function to take care of some details behind the scenes as well as simplify the code. Except in special circumstances, <code>p5.Vector objects</code> should always be created with <code>createVector()</code>.</p><a data-type="indexterm" data-primary="vectors" data-secondary="motion" data-tertiary="implementing with"></a>
<p>Now that I have two vector objects (position and velocity), I’m ready to implement the algorithm for motion—<strong><em>position = position + velocity</em></strong>. In Example 1.1, without vectors, I had:</p>
<p>I'll note that in the above code the vector objects are not created, as you might expect, by invoking a constructor function. Instead of <code>new Vector(x, y)</code> (or more accurately in p5 <code>new p5.Vector(x, y)</code>), <code>createVector(x, y)</code> is called. The <code>createVector()</code> function is included in p5.js as a helper function to take care of details behind the scenes as well as simplify the code. Except in special circumstances, <code>p5.Vector</code> objects should always be created with <code>createVector()</code>.</p><a data-type="indexterm" data-primary="vectors" data-secondary="motion" data-tertiary="implementing with"></a>
<p>Now that I have two vector objects (position and velocity), I’m ready to implement the algorithm for motion—<strong><em>position = position + velocity</em></strong>. In Example 1.1, without vectors, the code read:</p>
<pre class="codesplit" data-code-language="javascript">// Add each speed to each position.
x = x + xspeed;
y = y + yspeed;</pre>
@ -174,7 +175,7 @@ y = y + yspeed;</pre>
position = position + velocity;</pre><a data-type="indexterm" data-primary="addition operator"></a>
<p>However, in JavaScript, the addition operator + is reserved for primitive values (integers, floats, etc.) only. JavaScript doesn’t know how to add two <code>p5.Vector</code> objects together any more than it knows how to add two <code>p5.Font</code> objects or <code>p5.Image</code> objects. Fortunately, the <code>p5.Vector</code> class includes functions for common mathematical operations.</p>
<h2 id="13-vector-addition">1.3 Vector Addition</h2><a data-type="indexterm" data-primary="add() function (PVector class)"></a><a data-type="indexterm" data-primary="vectors" data-secondary="adding"></a>
<p>Before I continue looking at the <code>p5.Vector</code> class and its <code>add()</code> method (purely for the sake of learning since it’s already implemented for us in p5.js itself), let’s examine vector addition using the notation found in math and physics textbooks.</p><a data-type="indexterm" data-primary="scalar notation" data-secondary="vs. vector notation"></a><a data-type="indexterm" data-primary="vector notation" data-secondary="vs. scalar notation"></a>
<p>Before I continue looking at the <code>p5.Vector</code> class and the <code>add()</code> method, let’s examine vector addition using the notation found in math and physics textbooks.</p><a data-type="indexterm" data-primary="scalar notation" data-secondary="vs. vector notation"></a><a data-type="indexterm" data-primary="vector notation" data-secondary="vs. scalar notation"></a>
<p>Vectors are typically written either in boldface type or with an arrow on top. For the purposes of this book, to distinguish a <strong><em>vector</em></strong> from a <strong><em>scalar</em></strong> (<em>scalar</em> refers to a single value, such as an integer or a floating point number), we’ll use the arrow notation:</p>
<ul>
<li>Vector: <span data-type="equation">\vec{v}</span></li>
@ -182,8 +183,8 @@ position = position + velocity;</pre><a data-type="indexterm" data-primary="addi
</ul>
<p>Let’s say I have the following two vectors:</p>
<figure>
<img src="images/01_vectors/01_vectors_5.png" alt="Figure 1.5">
<figcaption>Figure 1.5</figcaption>
<img src="images/01_vectors/01_vectors_5.png" alt="Figure 1.5: Two vectors ">
<figcaption>Figure 1.5: Two vectors</figcaption>
</figure>
<p>Each vector has two components, an <code>x</code> and a <code>y</code>. To add two vectors together, add both <code>x</code>’s and both <code>y</code>’s.</p>
<figure>

4
content/examples/01_vectors/example_1_1_bouncing_ball_with_no_vectors/sketch.js
View file

@ -26,9 +26,9 @@ function draw() {
yspeed = yspeed * -1;
}
// Display circle at x position
// Draw circle at x y position
stroke(0);
strokeWeight(2);
fill(127);
ellipse(x, y, 48, 48);
circle(x, y, 48);
}