From 8893347364b18905a8d82b729d5040d897af08d7 Mon Sep 17 00:00:00 2001 From: shiffman Date: Mon, 5 Feb 2024 17:22:50 +0000 Subject: [PATCH] Notion - Update docs --- content/00_randomness.html | 2 +- content/01_vectors.html | 2 +- content/02_forces.html | 8 ++++---- content/06_libraries.html | 4 ++-- content/08_fractals.html | 2 +- content/10_nn.html | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/content/00_randomness.html b/content/00_randomness.html index 6f4d0999..28d299a6 100644 --- a/content/00_randomness.html +++ b/content/00_randomness.html @@ -461,7 +461,7 @@

A Smoother Approach with Perlin N
Figure 0.4: A graph of Perlin noise values over time (left) and of random noise values over time (right)
-

Ken Perlin developed the original Perlin noise algorithm while working on the movie Tron 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. (Procedural 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 Ken Perlin’s website and its variations over the years in my “What Is OpenSimplex Noise?” video on the Coding Train website.

+

Ken Perlin developed the original Perlin noise algorithm while working on the movie Tron 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. (Procedural 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 Ken Perlin’s website and its variations over the years in my “What Is OpenSimplex Noise?” video on the Coding Train website.

The p5.js library incorporates an implementation of the classic 1983 Perlin noise algorithm in a function called noise(). 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.

Say you want to draw a circle on a canvas at a random x-position. Out of habit, you might use the random() function:

//{!1} A random x-position
diff --git a/content/01_vectors.html b/content/01_vectors.html
index edd0d0fc..37b2e1ed 100644
--- a/content/01_vectors.html
+++ b/content/01_vectors.html
@@ -487,13 +487,13 @@ 
Example 1.3: Vector Subtraction

 }

Note the use of translate() to visualize the resulting vector as a line from the center (width / 2, height / 2) to the mouse. Vector subtraction is its own kind of translation, moving the “origin” of a position vector. Here, by subtracting the center vector from the mouse vector, I’m effectively moving the starting point of the resulting vector to the center of the canvas. Therefore, I also need to move the origin by using translate(). Without this, the line would be drawn from the top-left corner, and the visual connection wouldn’t be as clear.

Vector Multiplication and Division

-

Moving on to multiplication, you have to think a bit differently. Multiplying a vector typically refers to the process of scaling a vector. If I want to scale a vector to twice its size or one-third of its size, while leaving its direction the same, I would say, “Multiply the vector by 2” or “Multiply the vector by 1/3.” Unlike with addition and subtraction, I’m multiplying the vector by a scalar (a single number), not by another vector. Figure 1.9 illustrates how to scale a vector by a factor of 3.

Figure 1.9: Scaling a vector with multiplication
Figure 1.9: Scaling a vector with multiplication
+

Moving on to multiplication, you have to think a bit differently. Multiplying a vector typically refers to the process of scaling a vector. If I want to scale a vector to twice its size or one-third of its size, while leaving its direction the same, I would say, “Multiply the vector by 2” or “Multiply the vector by 1/3.” Unlike with addition and subtraction, I’m multiplying the vector by a scalar (a single number), not by another vector. Figure 1.9 illustrates how to scale a vector by a factor of 3.

To scale a vector, multiply each component (x and y) by a scalar. That is, \vec{w} = \vec{u} \times n can be written as shown here:

w_x = u_x \times n
w_y = u_y \times n
diff --git a/content/02_forces.html b/content/02_forces.html index 32bbb13f..5d95442e 100644 --- a/content/02_forces.html +++ b/content/02_forces.html @@ -697,13 +697,13 @@

Gravitational Attraction

// Normalize and scale the force vector to the appropriate magnitude. force.setMag(magnitude);

Note that I also changed the name of the direction vector to force. After all, when the calculations are finished, the vector I started with ends up being the actual force vector I wanted all along.

-

Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the Mover class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an applyForce() method. I’ll take this class and put it in a sketch with the following:

Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.
Figure 2.9: One mover and one attractor. The mover experiences a gravitational force toward the attractor.
+

Now that I’ve worked out the math and code for calculating an attractive force (emulating gravitational attraction), let’s turn our attention to applying this technique in the context of an actual p5.js sketch. I’ll continue to use the Mover class as a starting point—a template for making objects with position, velocity, and acceleration vectors, as well as an applyForce() method. I’ll take this class and put it in a sketch with the following: