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

mostly work on chapters 4 and 5, other small edits

content/01_vectors.html

@@ -726,7 +726,7 @@ <h3 id="example-17-motion-101-velocity">Example 1.7: Motion 101 (Velocity)</h3>
   }
 }</pre>
 <p>If object-oriented programming is at all new to you, one aspect here may seem a bit strange. I spent the beginning of this chapter discussing the <code>p5.Vector</code> class, and this class is the template for making the <code>position</code> object and the <code>velocity</code> object. So what are those objects doing inside of yet another object, the <code>Mover</code> object?</p>
-<p>In fact, this is just about the most normal thing ever. An object is something that holds data (and functionality). That data can be numbers, or it can be other objects (arrays too)! You’ll see this over and over again in this book. In <a href="/particles#41-why-you-need-particle-systems">Chapter 4</a> , for example, I’ll write a class to describe a system of particles. That <code>ParticleSystem</code> object will include a list of <code>Particle</code> objects . . . and each <code>Particle</code> object will have as its data several <code>p5.Vector</code> objects!</p>
+<p>In fact, this is just about the most normal thing ever. An object is something that holds data (and functionality). That data can be numbers, or it can be other objects (arrays too)! You’ll see this over and over again in this book. In <a href="/particles#why-you-need-particle-systems">Chapter 4</a> , for example, I’ll write a class to describe a system of particles. That <code>ParticleSystem</code> object will include a list of <code>Particle</code> objects . . . and each <code>Particle</code> object will have as its data several <code>p5.Vector</code> objects!</p>
 <p>At this point, you hopefully feel comfortable with two things: (1) what a vector is, and (2) how to use vectors inside of an object to keep track of its position and movement. This is an excellent first step and deserves a mild round of applause. Before standing ovations are in order, however, you need to make one more, somewhat bigger step forward. After all, watching the Motion 101 example is fairly boring. The circle never speeds up, never slows down, and never turns. For more sophisticated motion—the kind of motion that appears in the world around us—one more vector needs to be added to the class: <code>acceleration</code>.</p>
 <h2 id="acceleration">Acceleration</h2>
 <p><strong><em>Acceleration</em></strong> is <em>the </em>rate of change of velocity. Think about that definition for a moment. Is it a new concept? Not really. Earlier I defined velocity as<em> </em>the rate of change of position, so in essence I’m developing a “trickle-down” effect. Acceleration affects velocity, which in turn affects position. (To provide some brief foreshadowing, this point will become even more crucial in the next chapter, when I look at how forces like friction affect acceleration, which affects velocity, which affects position.) In code, this trickle-down effect reads:</p>

content/02_forces.html

@@ -1,12 +1,7 @@
 <section data-type="chapter">
 <h1 id="chapter-2-forces">Chapter 2. Forces</h1>
 <p>In the final example of Chapter 1, I demonstrated how to calculate a dynamic acceleration based on a vector pointing from a circle on the canvas to the mouse position. The resulting motion resembled a magnetic attraction between shape and mouse, as if some <em>force</em> was pulling the circle in toward the mouse. In this chapter, I’ll detail the concept of a force and its relationship to acceleration. The goal, by the end of this chapter, is to build a simple physics engine and understand how objects move around a canvas responding to a variety of environmental forces.</p>
-<div data-type="note">
-  <h3 id="----what-is-a-physics-engine----a-physics-engine-is-a-computer-program-or-code-library-that-simulates-the-behavior-of-objects-in-a-physical-environment-in-our-case-the-objects-are-two-dimensional-shapes-and-the-environment-is-a-rectangular-canvas-physics-engines-can-be-developed-to-be-highly-precise-requiring-high-performance-computing-or-real-time-using-simple-and-fast-algorithms--">
-    What is a physics engine?
-    A physics engine is a computer program (or code library) that simulates the behavior of objects in a physical environment. In our case, the objects are two-dimensional shapes, and the environment is a rectangular canvas. Physics engines can be developed to be highly precise (requiring high-performance computing) or real-time (using simple and fast algorithms).
-  </h3>
-</div>
+<p>A <strong><em>physics engine</em></strong><strong> </strong>is a computer program (or code library) that simulates the behavior of objects in a physical environment. With a p5.js sketch, the objects are two-dimensional shapes, and the environment is a rectangular canvas. Physics engines can be developed to be highly precise (requiring high-performance computing) or real-time (using simple and fast algorithms). This chapter will focus on building a rudimentary physics engine, with a focus on speed and ease of understanding.</p>
 <h2 id="forces-and-newtons-laws-of-motion">Forces and Newton’s Laws of Motion</h2>
 <p>Let’s begin by taking a conceptual look at what it means to be a force in the real world. Just like the word “vector,” the term “force” can have a variety of meanings. It can indicate a powerful physical intensity, as in “They pushed the boulder with great force,” or a powerful influence, as in “They’re a force to be reckoned with!” The definition of <strong><em>force</em></strong> that I’m interested in for this chapter is more formal and comes from Sir Isaac Newton’s three laws of motion:</p>
 <p><span class="highlight">A force is a vector that causes an object with mass to accelerate.</span></p>

content/03_oscillation.html

@@ -340,7 +340,6 @@ <h3 id="example-34-polar-to-cartesian">Example 3.4: Polar to Cartesian</h3>
   let x = r * cos(theta);
   let y = r * sin(theta);
 
-  ellipseMode(CENTER);
   fill(127);
   stroke(0);
   strokeWeight(2);
@@ -350,6 +349,13 @@ <h3 id="example-34-polar-to-cartesian">Example 3.4: Polar to Cartesian</h3>
   // Increase the angle over time
   theta += 0.02;
 }</pre>
+<p>Polar to Cartesian conversion is common enough that p5.js includes as handy function to take care of it for you. It’s included as a static method of the <code>p5.Vector</code> class called <code>fromAngle()</code>. It takes an angle in radians and creates a unit vector in Cartesian space that points in the direction specified by the angle. Here’s how that would look in Example 3.4.</p>
+<pre class="codesplit" data-code-language="javascript">  // Creating a unit vector pointing in the direction of an angle
+  let position = p5.Vector.fromAngle(theta);
+  // To complete Polar to Cartesian conversion the vector is scaled by r
+  position.mult(r);
+  // Drawing the circle using the x,y components of the vector
+  circle(position.x, position.y, 48);</pre>
 <p>Are you amazed yet? I’ve demonstrated some pretty great uses of tangent (for finding the angle of a vector) and sine and cosine (for converting from polar to Cartesian coordinates). I could stop right here and be satisfied. But I’m not going to. This is only the beginning. As I’ll show you next, what sine and cosine can do for you goes beyond mathematical formulas and right triangles.</p>
 <div data-type="exercise">
   <h3 id="exercise-34">Exercise 3.4</h3>