Merge pull request #933 from nature-of-code/notion-update-docs

minor layout updates
This commit is contained in:
Daniel Shiffman 2024-04-06 17:47:08 -04:00 committed by GitHub
commit 22890f9eb5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 13 additions and 10 deletions

View file

@ -910,12 +910,14 @@ for (let animal of kingdom) {
emitter.run();
}</pre>
<p>Of course, if I call an <code>applyForce()</code> method on the <code>Emitter</code> object in <code>draw()</code>, I then have to define that method in the <code>Emitter</code> class. In English, that method needs to be able to receive a force as a <code>p5.Vector</code> and apply that force to all the particles. Heres the translation into code:</p>
<pre class="codesplit" data-code-language="javascript"> applyForce(force) {
<div class="avoid-break">
<pre class="codesplit" data-code-language="javascript"> applyForce(force) {
for (let particle of this.particles) {
particle.applyForce(force);
}
}</pre>
<p>It almost seems silly to write this method. The code is essentially saying, “Apply a force to a particle system so that the system can apply that force to all the individual particles.” Although this may sound a bit roundabout, this approach is quite reasonable. After all, the emitter is in charge of managing the particles, so if you want to talk to the particles, youve got to talk to them through their manager. (Also, heres a chance to use an enhanced <code>for...of</code> loop, since no particles are being deleted!)</p>
</div>
<p>It almost seems silly to write this method. The code is essentially saying, “Apply a force to a particle system so that the system can apply that force to all the individual particles.” Although this may sound a bit roundabout, this approach is quite reasonable. After all, the emitter is in charge of managing the particles, so if you want to talk to the particles, youve got to talk to them through their manager. (Also, heres a chance to use a <code>for...of</code> loop, since no particles are being deleted!)</p>
<p>Heres the full example, including this change. (The code assumes the existence of the <code>Particle</code> class written earlier; theres no need to show it again, since nothing has changed.)</p>
<div data-type="example">
<h3 id="example-46-a-particle-system-with-forces">Example 4.6: A Particle System with Forces</h3>
@ -940,7 +942,6 @@ function draw() {
emitter.run();
}
class Emitter {
constructor(x, y) {
this.origin = createVector(x, y);

View file

@ -1197,7 +1197,7 @@ function draw() {
<p>Modify Example 5.10 so that the behavior weights change over time. For example, what if the weights were calculated according to a sine wave or Perlin noise? Or what if some vehicles are more concerned with seeking and others are more concerned with separating? Can you introduce other steering behaviors as well?</p>
</div>
<h3 id="flocking">Flocking</h3>
<p><strong>Flocking</strong> is a group animal behavior found in many living creatures, such as birds, fish, and insects. In 1986, Reynolds created a computer simulation of flocking behavior and documented the algorithm in his paper “Flocks, Herds, and Schools: A Distributed Behavioral Model.” Re-creating this simulation in p5.js will bring together all the concepts in this chapter:</p>
<p><strong>Flocking</strong> is a group animal behavior found in many living creatures, such as birds, fish, and insects.<br>In 1986, Reynolds created a computer simulation of flocking behavior and documented the algorithm in his paper “Flocks, Herds, and Schools: A Distributed Behavioral Model.” Re-creating this simulation in p5.js will bring together all the concepts in this chapter:</p>
<ol>
<li>I will use the steering force formula (steer = desired velocity) to implement the rules of flocking.</li>
<li>These steering forces will be group behaviors and will require each vehicle to perceive all the other vehicles.</li>
@ -1232,7 +1232,7 @@ function draw() {
this.applyForce(alignment);
this.applyForce(cohesion);
}</pre>
<p>Now, its just a matter of implementing the three rules. I applied separation already; its identical to the previous example. Instead, Ill focus on alignment, or steering in the same direction as the neighboring boids. As with all other steering behaviors, I have to express this concept as a desire: the boids desired velocity is the average velocity of its neighbors. The algorithm is therefore to calculate the average velocity of all the other boids and set that to the desired velocity:</p>
<p>Now, its just a matter of implementing the three rules. I applied separation already; its identical<br>to the previous example. Instead, Ill focus on alignment, or steering in the same direction as the neighboring boids. As with all other steering behaviors, I have to express this concept as a desire: the boids desired velocity is the average velocity of its neighbors. The algorithm is therefore to calculate the average velocity of all the other boids and set that to the desired velocity:</p>
<pre class="codesplit" data-code-language="javascript"> align(boids) {
// Add up all the velocities and divide by the total
// to calculate the average velocity.

View file

@ -743,11 +743,13 @@ board = next;</pre>
<h3 id="exercise-711">Exercise 7.11</h3>
<p>Create a CA in which each pixel is a cell and the pixels color is its state.</p>
</div>
<h3 id="historical">Historical</h3>
<p>In the object-oriented Game of Life example, I used two variables to keep track of a cells current and previous states. What if you use an array to keep track of a cells state history over a longer period? This relates to the idea of a <em>complex adaptive system</em>, one that has the ability to change its rules over time by learning from its history. (Stay tuned for more on this concept in <a href="/genetic-algorithms#section-genetic-algorithms">Chapters 9</a> and <a href="/neural-networks#section-neural-networks">10</a>.)</p>
<div data-type="exercise">
<h3 id="exercise-712">Exercise 7.12</h3>
<p>Visualize the Game of Life by coloring each cell according to the amount of time it has been alive or dead. Can you also use the cells history to inform the rules?</p>
<div class="avoid-break">
<h3 id="historical">Historical</h3>
<p>In the object-oriented Game of Life example, I used two variables to keep track of a cells current and previous states. What if you use an array to keep track of a cells state history over a longer period? This relates to the idea of a <em>complex adaptive system</em>, one that has the ability to change its rules over time by learning from its history. (Stay tuned for more on this concept in <a href="/genetic-algorithms#section-genetic-algorithms">Chapters 9</a> and <a href="/neural-networks#section-neural-networks">10</a>.)</p>
<div data-type="exercise">
<h3 id="exercise-712">Exercise 7.12</h3>
<p>Visualize the Game of Life by coloring each cell according to the amount of time it has been alive or dead. Can you also use the cells history to inform the rules?</p>
</div>
</div>
<h3 id="moving-cells">Moving Cells</h3>
<p>In these basic examples, cells have a fixed position on a grid, but you could build a CA with cells that have no fixed position and instead move about the canvas.</p>