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

[Notion] edits and rewritings for 6 and 9, also 4 and 7
nature-of-code · Jun 28, 2023 · ae8160e · ae8160e
2 parents d57b297 + de81bba
commit ae8160e
Show file tree

Hide file tree

Showing 38 changed files with 1,364 additions and 671 deletions.
diff --git a/content/04_particles.html b/content/04_particles.html
diff --git a/content/06_libraries.html b/content/06_libraries.html
diff --git a/content/07_ca.html b/content/07_ca.html
@@ -247,10 +247,11 @@ <h2 id="73-how-to-program-an-elementary-ca">7.3 How to Program an Elementary CA<
 <pre class="codesplit" data-code-language="javascript">// Rule 222
 let ruleset = [1, 1, 0, 1, 1, 1, 1, 0];</pre>
 <p>And the neighborhood being tested is “111”. The resulting state is equal to ruleset index 0, based on how I first wrote the <code>rules()</code> function .</p>
-<pre class="codesplit" data-code-language="javascript">    if (a === 1 &#x26;&#x26; b === 1 &#x26;&#x26; c === 1) return ruleset[0];</pre>
-<p>The binary number “111” converted to a decimal number is 7. But I don’t want <code>ruleset[7]</code>; I want <code>ruleset[0]</code>. For this to work, ruleset needs to be written with the bits in reverse order:</p>
-<pre class="codesplit" data-code-language="javascript">//{!1} Rule 222 in “reverse” order
-let ruleset = [0, 1, 1, 1, 1, 0, 1, 1];</pre>
+<pre class="codesplit" data-code-language="javascript">  if (a === 1 &#x26;&#x26; b === 1 &#x26;&#x26; c === 1) return ruleset[0];</pre>
+<p>The binary number “111” converted to a decimal number is 7. But I don’t want <code>ruleset[7]</code>; I want <code>ruleset[0]</code>. For this to work, I need to invert the index from which I am reading:</p>
+<pre class="codesplit" data-code-language="javascript">  // Invert the index so that 0 becomes 7, 1 becomes 6, and so on...
+  return ruleset[7 - index];
+</pre>
 <p>I now have everything needed to compute the generations for a Wolfram elementary CA. Let’s take a moment to organize the code all together.</p>
 <pre class="codesplit" data-code-language="javascript">//{!1} Array for the cells
 let cells = [];
@@ -282,7 +283,7 @@ <h2 id="73-how-to-program-an-elementary-ca">7.3 How to Program an Elementary CA<
 function rules(a, b, c) {
   let s = "" + a + b + c;
   let index = parseInt(s, 2);
-  return ruleset[index];
+  return ruleset[7 - index];
 }</pre>
 <h2 id="74-drawing-an-elementary-ca">7.4 Drawing an Elementary CA</h2>
 <p>What’s missing? Presumably, the point here is to draw the cells. As you saw earlier, the standard technique for doing this is to stack the generations one on top of each other and draw a rectangle that is black (for state 1) or white (for state 0).</p>
@@ -363,7 +364,7 @@ <h3 id="example-71-wolfram-elementary-cellular-automata">Example 7.1: Wolfram el
 function rules(a, b, c) {
   let s = "" + a + b + c;
   let index = parseInt(s, 2);
-  return ruleset[index];
+  return ruleset[7 - index];
 }</pre>
 <div data-type="exercise">
   <h3 id="exercise-71">Exercise 7.1</h3>

diff --git a/content/09_ga.html b/content/09_ga.html
diff --git a/content/examples/06_libraries/6_8_mouse_constraint/sketch.js b/content/examples/06_libraries/6_8_mouse_constraint/sketch.js
@@ -2,7 +2,15 @@
 // Daniel Shiffman
 // http://natureofcode.com
 
-const { Engine, Bodies, Composite, Constraint, Vector, Mouse, MouseConstraint } = Matter;
+const {
+  Engine,
+  Bodies,
+  Composite,
+  Constraint,
+  Vector,
+  Mouse,
+  MouseConstraint,
+} = Matter;
 
 // A reference to the matter physics engine
 let engine;

diff --git a/content/examples/06_libraries/soft_body_character_copy/index.html b/content/examples/06_libraries/soft_body_character_copy/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hapticdata/[email protected]/build/toxiclibs.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+    <script src="particle.js"></script>
+    <script src="spring.js"></script>
+  </body>
+</html>
diff --git a/content/examples/06_libraries/soft_body_character_copy/particle.js b/content/examples/06_libraries/soft_body_character_copy/particle.js
@@ -0,0 +1,13 @@
+class Particle extends VerletParticle2D {
+  constructor(x, y) {
+    super(x, y);
+    this.r = 4;
+    physics.addParticle(this);
+  }
+
+  show() {
+    fill(0);
+    stroke(0);
+    circle(this.x, this.y, this.r * 2);
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_copy/sketch.js b/content/examples/06_libraries/soft_body_character_copy/sketch.js
@@ -0,0 +1,61 @@
+// Coding Train / Daniel Shiffman
+
+const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;
+
+const { GravityBehavior } = toxi.physics2d.behaviors;
+
+const { Vec2D, Rect } = toxi.geom;
+
+let physics;
+
+let particles = [];
+let springs = [];
+
+function setup() {
+  createCanvas(640, 240);
+
+  physics = new VerletPhysics2D();
+
+  let bounds = new Rect(0, 0, width, height);
+  physics.setWorldBounds(bounds);
+  physics.addBehavior(new GravityBehavior(new Vec2D(0, 0.5)));
+
+  particles.push(new Particle(200, 25));
+  particles.push(new Particle(400, 25));
+  particles.push(new Particle(350, 125));
+  particles.push(new Particle(400, 225));
+  particles.push(new Particle(200, 225));
+  particles.push(new Particle(250, 125));
+
+  springs.push(new Spring(particles[0], particles[1]));
+  springs.push(new Spring(particles[1], particles[2]));
+  springs.push(new Spring(particles[2], particles[3]));
+  springs.push(new Spring(particles[3], particles[4]));
+  springs.push(new Spring(particles[4], particles[5]));
+  springs.push(new Spring(particles[5], particles[0]));
+  springs.push(new Spring(particles[5], particles[2]));
+  springs.push(new Spring(particles[0], particles[3]));
+  springs.push(new Spring(particles[1], particles[4]));
+}
+
+function draw() {
+  background(255);
+
+  physics.update();
+
+  fill(127);
+  stroke(0);
+  strokeWeight(2);
+  beginShape();
+  for (let particle of particles) {
+    vertex(particle.x, particle.y);
+  }
+  endShape(CLOSE);
+
+  if (mouseIsPressed) {
+    particles[0].lock();
+    particles[0].x = mouseX;
+    particles[0].y = mouseY;
+    particles[0].unlock();
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_copy/spring.js b/content/examples/06_libraries/soft_body_character_copy/spring.js
@@ -0,0 +1,12 @@
+class Spring extends VerletSpring2D {
+  constructor(a, b, strength) {
+    let length = dist(a.x, a.y, b.x, b.y);
+    super(a, b, length, 0.01);
+    physics.addSpring(this);
+  }
+
+  show() {
+    stroke(0);
+    line(this.a.x, this.a.y, this.b.x, this.b.y);
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_copy/style.css b/content/examples/06_libraries/soft_body_character_copy/style.css
@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/content/examples/06_libraries/soft_body_character_enhanced_copy/index.html b/content/examples/06_libraries/soft_body_character_enhanced_copy/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/hapticdata/[email protected]/build/toxiclibs.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <script src="sketch.js"></script>
+    <script src="particle.js"></script>
+    <script src="spring.js"></script>
+  </body>
+</html>
diff --git a/content/examples/06_libraries/soft_body_character_enhanced_copy/particle.js b/content/examples/06_libraries/soft_body_character_enhanced_copy/particle.js
@@ -0,0 +1,16 @@
+class Particle extends VerletParticle2D {
+  constructor(x, y) {
+    super(x, y);
+    this.r = 2;
+    physics.addParticle(this);
+  }
+
+  show() {
+    fill(252, 238, 33);
+    strokeWeight(1);
+    circle(this.x, this.y, this.r * 12);
+
+    strokeWeight(this.r * 4);
+    point(this.x, this.y);
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_enhanced_copy/sketch.js b/content/examples/06_libraries/soft_body_character_enhanced_copy/sketch.js
@@ -0,0 +1,141 @@
+// Coding Train / Daniel Shiffman
+
+const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;
+
+const { GravityBehavior } = toxi.physics2d.behaviors;
+
+const { Vec2D, Rect } = toxi.geom;
+
+let physics;
+
+let particles = [];
+let eyes = [];
+let springs = [];
+
+let showSprings = false;
+
+function keyPressed() {
+  if (key == ' ') {
+    showSprings = !showSprings;
+  }
+}
+
+function setup() {
+  createCanvas(640, 240);
+
+  physics = new VerletPhysics2D();
+
+  let bounds = new Rect(0, 0, width, height);
+  physics.setWorldBounds(bounds);
+
+  particles.push(new Particle(200, 25));
+  particles.push(new Particle(250, 25));
+  particles.push(new Particle(300, 25));
+  particles.push(new Particle(350, 25));
+  particles.push(new Particle(400, 25));
+  particles.push(new Particle(350, 125));
+  particles.push(new Particle(400, 225));
+  particles.push(new Particle(350, 225));
+  particles.push(new Particle(300, 225));
+  particles.push(new Particle(250, 225));
+  particles.push(new Particle(200, 225));
+  particles.push(new Particle(250, 125));
+
+  eyes.push(new Particle(275, 75));
+  eyes.push(new Particle(325, 75));
+  eyes.push(new Particle(250, -25));
+  eyes.push(new Particle(350, -25));
+
+  for (let i = 0; i < particles.length; i++) {
+    for (let j = i + 1; j < particles.length; j++) {
+      if (i !== j) {
+        let a = particles[i];
+        let b = particles[j];
+        // let b = particles[(i + 1) % particles.length];
+        springs.push(new Spring(a, b));
+      }
+    }
+  }
+
+  for (let particle of particles) {
+    springs.push(new Spring(particle, eyes[0]));
+    springs.push(new Spring(particle, eyes[1]));
+  }
+
+  springs.push(new Spring(eyes[2], particles[1]));
+  springs.push(new Spring(eyes[3], particles[3]));
+
+  springs.push(new Spring(eyes[2], particles[3]));
+  springs.push(new Spring(eyes[3], particles[1]));
+
+  springs.push(new Spring(eyes[2], particles[0]));
+  springs.push(new Spring(eyes[3], particles[4]));
+
+  springs.push(new Spring(eyes[3], particles[2]));
+  springs.push(new Spring(eyes[2], particles[2]));
+
+  springs.push(new Spring(eyes[2], eyes[3]));
+
+  springs.push(new Spring(eyes[0], eyes[3]));
+  springs.push(new Spring(eyes[0], eyes[2]));
+  springs.push(new Spring(eyes[1], eyes[2]));
+  springs.push(new Spring(eyes[1], eyes[3]));
+}
+
+function draw() {
+  background(255);
+
+  physics.update();
+
+  stroke(112, 50, 126);
+  if (showSprings) stroke(112, 50, 126, 100);
+
+  strokeWeight(4);
+  line(particles[1].x, particles[1].y, eyes[2].x, eyes[2].y);
+  line(particles[3].x, particles[3].y, eyes[3].x, eyes[3].y);
+  strokeWeight(16);
+  point(eyes[2].x, eyes[2].y);
+  point(eyes[3].x, eyes[3].y);
+
+  fill(45, 197, 244);
+  if (showSprings) fill(45, 197, 244, 100);
+  strokeWeight(2);
+  beginShape();
+  for (let particle of particles) {
+    vertex(particle.x, particle.y);
+  }
+  endShape(CLOSE);
+
+  //   fill(127, 127);
+  //   stroke(0);
+  //   strokeWeight(2);
+  //   beginShape();
+  //   for (let particle of particles) {
+  //     vertex(particle.x, particle.y);
+  //   }
+  //   endShape(CLOSE);
+
+  // for (let particle of particles) {
+  //   particle.show();
+  // }
+
+  eyes[0].show();
+  eyes[1].show();
+
+  // for (let eye of eyes) {
+  //   eye.show();
+  // }
+
+  if (showSprings) {
+    for (let spring of springs) {
+      spring.show();
+    }
+  }
+
+  if (mouseIsPressed) {
+    particles[0].lock();
+    particles[0].x = mouseX;
+    particles[0].y = mouseY;
+    particles[0].unlock();
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_enhanced_copy/spring.js b/content/examples/06_libraries/soft_body_character_enhanced_copy/spring.js
@@ -0,0 +1,13 @@
+class Spring extends VerletSpring2D {
+  constructor(a, b, strength) {
+    let length = dist(a.x, a.y, b.x, b.y);
+    super(a, b, length, 0.001);
+    physics.addSpring(this);
+  }
+
+  show() {
+    strokeWeight(1);
+    stroke(0, 127);
+    line(this.a.x, this.a.y, this.b.x, this.b.y);
+  }
+}
diff --git a/content/examples/06_libraries/soft_body_character_enhanced_copy/style.css b/content/examples/06_libraries/soft_body_character_enhanced_copy/style.css
@@ -0,0 +1,4 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/content/examples/09_ga/9_1_ga_shakespeare/DNA.js b/content/examples/09_ga/9_1_ga_shakespeare/DNA.js
@@ -20,22 +20,22 @@ function randomCharacter() {
 
 // Constructor (makes a random DNA)
 class DNA {
-  constructor(num) {
-    // The genetic sequence
+  //{.code-wide} Create DNA randomly.
+  constructor(length) {
     this.genes = [];
-    // Fitness
+    //{!1} Adding a variable to track fitness.
     this.fitness = 0;
-    for (let i = 0; i < num; i++) {
-      this.genes[i] = randomCharacter(); // Pick from range of chars
+    for (let i = 0; i < length; i++) {
+      this.genes[i] = randomCharacter();
     }
   }
 
-  // Converts character array to a String
+  //{!3 .code-wide} Converts array to String—PHENOTYPE.
   getPhrase() {
     return this.genes.join("");
   }
 
-  // Fitness function (returns floating point % of "correct" characters)
+  //{.code-wide} Calculate fitness.
   calculateFitness(target) {
     let score = 0;
     for (let i = 0; i < this.genes.length; i++) {
@@ -46,7 +46,7 @@ class DNA {
     this.fitness = score / target.length;
   }
 
-  // Crossover
+  //{.code-wide} Crossover
   crossover(partner) {
     // The child is a new instance of DNA.
     // (Note that the genes are generated randomly in DNA constructor,
@@ -68,6 +68,7 @@ class DNA {
     return child;
   }
 
+  //{.code-wide} Mutation
   mutate(mutationRate) {
     //{!1} Looking at each gene in the array
     for (let i = 0; i < this.genes.length; i++) {