Notion - Update docs

This commit is contained in:
jasongao97 2024-10-21 16:22:03 +00:00 committed by github-actions[bot]
parent 060145a917
commit 3d4369b0b0
3 changed files with 6 additions and 2 deletions

View file

@ -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>

View file

@ -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 &#x26; 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 wont point toward the objects current position, but rather its future position as extrapolated from its current velocity. Youll 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 &#x26; 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 wont point toward the objects current position, but rather its future position as extrapolated from its current velocity. Youll 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 &#x26; 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 &#x3C; 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 its 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 its 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>

View file

@ -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: Youll want to keep track of the branch directions and lengths by using vector math instead of p5.js transformations.) Can you animate the trees 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: Youll want to keep track of the branch directions and lengths by using vector math instead of p5.js transformations.) Can you animate the trees 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>