Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-09-29 05:36:56 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Notion - Update docs

Browse source
This commit is contained in:
shiffman 2024-02-26 23:49:32 +00:00 committed by GitHub
parent 72fcfdc9bf
commit daaa5b1709
6 changed files with 7 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/00_5_introduction.html
View file

@ -20,7 +20,7 @@
<p>I should also point out that experience with object-oriented programming is fairly critical. I’ll review some of the basics in Chapter 0, but if classes and objects are unfamiliar to you, I suggest watching <a href="https://thecodingtrain.com/oop">my p5.js and Processing object-oriented video tutorials, both also available at the Coding Train</a>.</p>
<h2 id="how-are-you-reading-this-book">How Are You Reading This Book?</h2>
<p>Are you reading this book on a Kindle? Printed paper? On your laptop in PDF form? On a tablet showing an animated HTML5 version? Are you strapped to a chair, absorbing the content directly into your brain via a series of electrodes, tubes, and cartridges?</p>
<p>My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (<code>npm run build</code>), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the <a href="https://github.com/magicbookproject">Magic Book project</a>, an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.</p>
<p>My dream has always been to write this book in one single format (in this case, a collection of Notion documents) and then, after pressing a magic button (<code>npm run build</code>), out comes the book in any and all formats you might want—PDF, HTML5, printed hard copy, Kindle, and so on. This was largely made possible by the <a href="https://github.com/magicbookproject">Magic Book project</a>, which is an open source framework for self-publishing originally developed at ITP by Rune Madsen and Steve Klise. Everything has been designed and styled using CSS—no manual typesetting or layout.</p>
<p>The reality of putting this book together isn’t quite so clean as that, and the story of how it happened is long. If you’re interested in learning more, make sure to read the book’s acknowledgments, and then go hire the people I’ve thanked to help you publish a book! <a href="https://github.com/nature-of-code">I’ll also include more details in the associated GitHub repository</a>.</p>
<p>The bottom line is that no matter what format you’re reading it in, the material is all the same. The only difference will be in how you experience the code examples—more on that in <a href="#how-to-read-the-code">“How to Read the Code”</a>.</p>
<h3 id="the-coding-train-connection">The Coding Train Connection</h3>

1
content/00_randomness.html
View file

@ -567,7 +567,6 @@ function draw() {
// x- and y-position mapped from noise
this.x = map(noise(this.tx), 0, 1, 0, width);
this.y = map(noise(this.ty), 0, 1, 0, height);
// Move forward through time.
this.tx += 0.01;
this.ty += 0.01;

7
content/01_vectors.html
View file

@ -658,13 +658,10 @@ function draw() {
translate(width / 2, height / 2);
stroke(200);
strokeWeight(2);
line(0, 0, mouse.x, mouse.y);
// In this example, after the vector is normalized, it’s multiplied by 50. Note that no matter where the mouse is, the vector always has the same length (50) because of the normalization process.
//{!2} In this example, after the vector is normalized, it’s multiplied by 50. Note that no matter where the mouse is, the vector always has the same length (50) because of the normalization process.
mouse.normalize();
mouse.mult(50);
stroke(0);
strokeWeight(8);
line(0, 0, mouse.x, mouse.y);
@ -713,7 +710,7 @@ function draw() {
<p>The <code>Mover</code> class also needs a function that determines what the object should do when it reaches the edge of the canvas. For now, I’ll do something simple and have it wrap around the edges:</p>
<div class="snip-above">
<pre class="codesplit" data-code-language="javascript"> checkEdges() {
//{!11} When it reaches one edge, set the position to the other edge.
//{!5} When it reaches one edge, set the position to the other edge.
if (this.position.x > width) {
this.position.x = 0;
} else if (this.position.x &#x3C; 0) {

11
content/02_forces.html
View file

@ -589,7 +589,6 @@ if (liquid.contains(mover)) {
</figure>
</div>
<pre class="codesplit" data-code-language="javascript">let movers = [];
let liquid;
function setup() {
@ -623,7 +622,6 @@ function draw() {
let gravity = createVector(0, 0.1 * movers[i].mass);
// Apply gravity.
movers[i].applyForce(gravity);
// Update and display the mover.
movers[i].update();
movers[i].show();
@ -740,10 +738,8 @@ function setup() {
function draw() {
background(255);
// Draw the <code>Attractor</code> object.
//{!1} Draw the <code>Attractor</code> object.
attractor.show();
mover.update();
mover.show();
}</pre>
@ -812,10 +808,9 @@ mover.applyForce(force);</pre>
<pre class="codesplit" data-code-language="javascript">function draw() {
background(255);
// Calculate the attraction force and apply it.
//{!2} Calculate the attraction force and apply it.
<strong>let force = attractor.attract(mover);
mover.applyForce(force);</strong>
mover.update();
attractor.show();
@ -915,7 +910,6 @@ class Attractor {
</div>
<pre class="codesplit" data-code-language="javascript">// Now you have 10 movers!
let movers = [];
let attractor;
function setup() {
@ -936,7 +930,6 @@ function draw() {
//{!1} Calculate an attraction force for each <code>Mover</code> object.
let force = attractor.attract(movers[i]);
movers[i].applyForce(force);
movers[i].update();
movers[i].show();
}

9
content/03_oscillation.html
View file

@ -269,9 +269,8 @@ function draw() {
</table>
<p>Now that I have the formula, let’s see where it should go in the <code>Mover</code> class’s <code>show()</code> method to make the mover (now drawn as a rectangle) point in its direction of motion. Note that in p5.js, the function for inverse tangent is <code>atan()</code>:</p>
<pre class="codesplit" data-code-language="javascript"> show() {
// Solve for the angle by using <code>atan()</code>.
//{!1} Solve for the angle by using <code>atan()</code>.
let angle = atan(this.velocity.y / this.velocity.x);
stroke(0);
fill(175);
push();
@ -483,9 +482,8 @@ function draw() {
let period = 120;
let amplitude = 200;
// Calculate the horizontal position according to the formula for simple harmonic motion.
//{!1} Calculate the horizontal position according to the formula for simple harmonic motion.
let x = amplitude * sin(TWO_PI * frameCount / period);
stroke(0);
fill(127);
translate(width / 2, height / 2);
@ -748,7 +746,6 @@ let k = 0.1;
let force = p5.Vector.sub(bob, anchor);
let currentLength = force.mag();
let x = currentLength - restLength;
// Put it together: direction and magnitude!
force.setMag(-1 * k * x);</pre>
<p>Now that I have the algorithm for computing the spring force, the question remains: What OOP structure should I use? This is one of those situations that has no one correct answer. Several possibilities exist, and the one I choose depends on my goals and personal coding style.</p>
@ -1025,11 +1022,9 @@ class Pendulum {
let gravity = 0.4;
// Formula for angular acceleration
this.angleAcceleration = (-1 * gravity / this.r) * sin(this.angle);
// Standard angular motion algorithm
this.angleVelocity += this.angleAcceleration;
this.angle += this.angleVelocity;
//{!1} Apply some damping.
this.angleVelocity *= this.damping;
}

4
content/04_particles.html
View file

@ -129,11 +129,9 @@ function draw() {
// Operate the single particle.
particle.update();
particle.show();
// Apply a gravity force.
let gravity = createVector(0, 0.1);
particle.applyForce(gravity);
// Check the particle’s state and make a new particle.
if (particle.isDead()) {
particle = new Particle(width / 2, 20);
@ -610,7 +608,6 @@ class WackyConfetti {
<p>Here’s how the syntax of inheritance works:</p>
<pre class="codesplit" data-code-language="javascript">//{!1} The <code>Animal</code> class is the parent (or superclass).
class Animal {
constructor() {
// <code>Dog</code> and <code>Cat</code> inherit the variable <code>age</code>.
this.age = 0;
@ -1101,7 +1098,6 @@ function draw() {
//{!1} The emitter manages all the particles.
class Emitter {
constructor(x, y) {
this.origin = createVector(x, y);
this.particles = [];