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

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

Browse source 
Chapter 3 and Chapter 4
This commit is contained in:
Daniel Shiffman 2024-02-24 12:17:10 -05:00 committed by GitHub
commit bb8b95da94
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 8 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
content/03_oscillation.html
View file

@ -88,7 +88,8 @@ angle = angle + 0.1;</pre>
<figcaption></figcaption>
</figure>
</div>
<pre class="codesplit" data-code-language="javascript">// Position
<div class="avoid-break">
<pre class="codesplit" data-code-language="javascript">// Position
let angle = 0;
// Velocity
let angleVelocity = 0;
@ -117,6 +118,9 @@ function draw() {
// Angular equivalent of <code>position.add(velocity)</code>
angle += angleVelocity;
}</pre>
</div>
<p></p>
<p></p>
<p>Instead of incrementing <code>angle</code> by a fixed amount to steadily rotate the baton, for every frame I add <code>angleAcceleration</code> to <code>angleVelocity</code>, then add <code>angleVelocity</code> to <code>angle</code>. As a result, the baton starts with no rotation and then spins faster and faster as the angular velocity accelerates.</p>
<div data-type="exercise">
<h3 id="exercise-32">Exercise 3.2</h3>

14
content/04_particles.html
View file

@ -343,7 +343,8 @@ function draw() {
<p>I’ve conquered the array and used it to manage a list of <code>Particle</code> objects, with the ability to add and delete particles at will. I could stop here and rest on my laurels, but I can and should take an additional step: writing a class describing the list of <code>Particle</code> objects itself. At the start of this chapter, I used a speculative class name <code>ParticleSystem</code> to represent the overall collection of particles. However, a more fitting term for the functionality of emitting particles is <code>Emitter</code>, which I’ll use from now on.</p>
<p>The <code>Emitter</code> class will allow me to clean up the <code>draw()</code> function, removing the bulky logic of looping through all the particles. As an added bonus, it will also open up the possibility of having multiple particle emitters.</p>
<p>Recall that one of the goals I set at the beginning of this chapter was to write <code>setup()</code> and <code>draw()</code> without referencing any individual particles. In laying out that goal, I teased the possibility of a beautifully simple main sketch file. Here it is again, only now with the <code>Emitter</code> naming convention.</p>
<pre class="codesplit" data-code-language="javascript">// Just one particle emitter!
<div class="avoid-break">
<pre class="codesplit" data-code-language="javascript">// Just one particle emitter!
let emitter;
function setup() {
@ -355,6 +356,7 @@ function draw() {
background(255);
emitter.run();
}</pre>
</div>
<p>To get to this point, look at each piece of <code>setup()</code> and <code>draw()</code> from Example 4.2 and think about how it can fit into the <code>Emitter</code> class instead. Nothing about the behavior of the code should change—the only difference is how it’s organized:</p>
<table>
<tbody>
@ -561,7 +563,6 @@ class WackyConfetti {
<h3 id="inheritance-basics">Inheritance Basics</h3>
<p>To demonstrate how inheritance works, I’ll take an example from the world of animals: dogs, cats, monkeys, pandas, wombats, sea nettles, you name it. I’ll start by coding a <code>Dog</code> class. A <code>Dog</code> object will have an <code>age</code> variable (an integer), as well as <code>eat()</code>, <code>sleep()</code>, and <code>bark()</code> methods:</p>
<pre class="codesplit" data-code-language="javascript">class Dog {
constructor() {
this.age = 0;
}
@ -580,7 +581,6 @@ class WackyConfetti {
}</pre>
<p>Now I’ll make a cat:</p>
<pre class="codesplit" data-code-language="javascript">class Cat {
// Dogs and cats have many of the same variables (age) and methods (eat, sleep).
constructor() {
this.age = 0;
@ -1037,14 +1037,6 @@ function draw() {
<p>The more difficult task is writing the <code>applyRepeller()</code> method. Instead of passing a <code>p5.Vector</code> object as an argument, as with <code>applyForce()</code>, I need to pass a <code>Repeller</code> object into <code>applyRepeller()</code> and ask that method to do the work of calculating the force between the repeller and each particle. Take a look at both of these methods side by side:</p>
<table>
<tbody>
<tr>
<td>
<pre><code><strong>applyForce(force)</strong></code></pre>
</td>
<td>
<pre><code><strong>applyRepeller(repeller)</strong></code></pre>
</td>
</tr>
<tr>
<td>
<pre><code>applyForce(force) {