mirror of
https://github.com/nature-of-code/noc-book-2
synced 2024-11-17 07:49:05 +01:00
Notion - Update docs
This commit is contained in:
parent
060145a917
commit
3d4369b0b0
3 changed files with 6 additions and 2 deletions
|
@ -691,6 +691,7 @@ function draw() {
|
||||||
</div>
|
</div>
|
||||||
<div data-type="exercise">
|
<div data-type="exercise">
|
||||||
<h3 id="exercise-312">Exercise 3.12</h3>
|
<h3 id="exercise-312">Exercise 3.12</h3>
|
||||||
|
<div data-type="video-link" data-title="Additive Waves" href="https://youtu.be/okfZRl4Xw-c?si=Wc5YzC8gH2Z5pl47"></div>
|
||||||
<p>To create more complex waves, you can add multiple waves together. Calculate the height (or <code>y</code>) values for several waves and add those values together to get a single <code>y</code> value. The result is a new wave that incorporates the characteristics of each individual wave.</p>
|
<p>To create more complex waves, you can add multiple waves together. Calculate the height (or <code>y</code>) values for several waves and add those values together to get a single <code>y</code> value. The result is a new wave that incorporates the characteristics of each individual wave.</p>
|
||||||
<figure>
|
<figure>
|
||||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/lUxbHeeHLH" data-example-path="examples/03_oscillation/exercise_3_12_additive_wave"><img src="examples/03_oscillation/exercise_3_12_additive_wave/screenshot.png"></div>
|
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/lUxbHeeHLH" data-example-path="examples/03_oscillation/exercise_3_12_additive_wave"><img src="examples/03_oscillation/exercise_3_12_additive_wave/screenshot.png"></div>
|
||||||
|
|
|
@ -222,6 +222,7 @@ desired.setMag(this.maxspeed);</pre>
|
||||||
</div>
|
</div>
|
||||||
<div data-type="exercise">
|
<div data-type="exercise">
|
||||||
<h3 id="exercise-53">Exercise 5.3</h3>
|
<h3 id="exercise-53">Exercise 5.3</h3>
|
||||||
|
<div data-type="video-link" data-title="Pursue & Evade" href="https://youtu.be/Q4MU7pkDYmQ?si=4gQp2reoo9rJAgCf"></div>
|
||||||
<p>Implement a seeking behavior with a moving target, often referred to as <em>pursuit</em>. In this case, your desired vector won’t point toward the object’s current position, but rather its future position as extrapolated from its current velocity. You’ll see this ability for a vehicle to “predict the future” in later examples. The solution is covered in the <a href="https://thecodingtrain.com/pursuit">“Pursue & Evade” video on the Coding Train website</a>.</p>
|
<p>Implement a seeking behavior with a moving target, often referred to as <em>pursuit</em>. In this case, your desired vector won’t point toward the object’s current position, but rather its future position as extrapolated from its current velocity. You’ll see this ability for a vehicle to “predict the future” in later examples. The solution is covered in the <a href="https://thecodingtrain.com/pursuit">“Pursue & Evade” video on the Coding Train website</a>.</p>
|
||||||
<figure>
|
<figure>
|
||||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/RkDbZ0drr" data-example-path="examples/05_steering/exercise_5_2"><img src="examples/05_steering/exercise_5_2/screenshot.png"></div>
|
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/RkDbZ0drr" data-example-path="examples/05_steering/exercise_5_2"><img src="examples/05_steering/exercise_5_2/screenshot.png"></div>
|
||||||
|
@ -1174,8 +1175,8 @@ function draw() {
|
||||||
let steer = p5.Vector.sub(desired, this.velocity);
|
let steer = p5.Vector.sub(desired, this.velocity);
|
||||||
steer.limit(this.maxforce);
|
steer.limit(this.maxforce);
|
||||||
|
|
||||||
<s>this.applyForce(steer);</s><s>
|
<s>this.applyForce(steer);</s>
|
||||||
</s> //{!1} Instead of applying the force, return the vector.
|
//{!1} Instead of applying the force, return the vector.
|
||||||
return steer;
|
return steer;
|
||||||
}</pre>
|
}</pre>
|
||||||
<p>This change is subtle but incredibly important: it allows the strength of these forces to be weighted all in one place.</p>
|
<p>This change is subtle but incredibly important: it allows the strength of these forces to be weighted all in one place.</p>
|
||||||
|
@ -1479,6 +1480,7 @@ for (let i = 0; i < grid.length; i++) {
|
||||||
<p>The quadtree expands the spatial subdivision strategy by dynamically adapting the grid according to the distribution of the boids. Instead of a fixed grid, a quadtree starts with a single large cell that encompasses the entire space. If too many boids are found within this cell, it splits into four smaller cells. This process can repeat for each new cell that gets too crowded, creating a flexible grid that provides finer resolution when and where it’s needed.</p>
|
<p>The quadtree expands the spatial subdivision strategy by dynamically adapting the grid according to the distribution of the boids. Instead of a fixed grid, a quadtree starts with a single large cell that encompasses the entire space. If too many boids are found within this cell, it splits into four smaller cells. This process can repeat for each new cell that gets too crowded, creating a flexible grid that provides finer resolution when and where it’s needed.</p>
|
||||||
<div data-type="example">
|
<div data-type="example">
|
||||||
<h3 id="example-513-quadtree">Example 5.13: Quadtree</h3>
|
<h3 id="example-513-quadtree">Example 5.13: Quadtree</h3>
|
||||||
|
<div data-type="video-link" data-title="Quadtree" href="https://youtu.be/OJxEcs0w_kE"></div>
|
||||||
<figure>
|
<figure>
|
||||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/J5XVww9xQ" data-example-path="examples/05_steering/5_11_quadtree_part_1"><img src="examples/05_steering/5_11_quadtree_part_1/screenshot.png"></div>
|
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/J5XVww9xQ" data-example-path="examples/05_steering/5_11_quadtree_part_1"><img src="examples/05_steering/5_11_quadtree_part_1/screenshot.png"></div>
|
||||||
<figcaption></figcaption>
|
<figcaption></figcaption>
|
||||||
|
|
|
@ -591,6 +591,7 @@ function draw() {
|
||||||
</div>
|
</div>
|
||||||
<div data-type="exercise">
|
<div data-type="exercise">
|
||||||
<h3 id="exercise-88">Exercise 8.8</h3>
|
<h3 id="exercise-88">Exercise 8.8</h3>
|
||||||
|
<div data-type="video-link" data-title="Object-oriented Fractal Trees" href="https://youtu.be/fcdNSZ9IzJM?si=V32AtJY3ThsH8PQI"></div>
|
||||||
<p>Re-create the tree by using a <code>Branch</code> class and an array to keep track of the branches. (Hint: You’ll want to keep track of the branch directions and lengths by using vector math instead of p5.js transformations.) Can you animate the tree’s growth? What about drawing leaves at the ends of the branches?</p>
|
<p>Re-create the tree by using a <code>Branch</code> class and an array to keep track of the branches. (Hint: You’ll want to keep track of the branch directions and lengths by using vector math instead of p5.js transformations.) Can you animate the tree’s growth? What about drawing leaves at the ends of the branches?</p>
|
||||||
<figure>
|
<figure>
|
||||||
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/mR4_GpQS-" data-example-path="examples/08_fractals/exercise_8_8_branch_objects_animation"><img src="examples/08_fractals/exercise_8_8_branch_objects_animation/screenshot.png"></div>
|
<div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/mR4_GpQS-" data-example-path="examples/08_fractals/exercise_8_8_branch_objects_animation"><img src="examples/08_fractals/exercise_8_8_branch_objects_animation/screenshot.png"></div>
|
||||||
|
|
Loading…
Reference in a new issue