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

[Notion] Update particle screenshots for Chapter 4

content/04_particles.html

@@ -98,7 +98,7 @@ <h2 id="a-single-particle">A Single Particle</h2>
 <div data-type="example">
   <h3 id="example-41-a-single-particle">Example 4.1: A Single Particle</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/1gpoE1dtG" data-example-path="examples/04_particles/noc_4_01_single_particle"><img src="examples/04_particles/noc_4_01_single_particle/screenshot.png"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/1gpoE1dtG" data-example-path="examples/04_particles/4_1_single_particle"><img src="examples/04_particles/4_1_single_particle/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -295,7 +295,7 @@ <h2 id="an-array-of-particles">An Array of Particles</h2>
 <div data-type="example">
   <h3 id="example-42-an-array-of-particles">Example 4.2: An Array of Particles</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/-xTbGZMim" data-example-path="examples/04_particles/noc_4_02_array_particles"><img src="examples/04_particles/noc_4_02_array_particles/screenshot.png"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/-xTbGZMim" data-example-path="examples/04_particles/4_2_array_particles"><img src="examples/04_particles/4_2_array_particles/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>
@@ -887,7 +887,7 @@ <h2 id="particle-systems-with-forces">Particle Systems with Forces</h2>
 <div data-type="example">
   <h3 id="example-46-a-particle-system-with-forces">Example 4.6: A Particle System with Forces</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/uZ9CfjLHL" data-example-path="examples/04_particles/noc_4_06_particle_system_forces"><img src="examples/04_particles/noc_4_06_particle_system_forces/screenshot.png"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/uZ9CfjLHL" data-example-path="examples/04_particles/4_6_particle_system_forces"><img src="examples/04_particles/4_6_particle_system_forces/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>

content/10_nn.html

@@ -823,7 +823,7 @@ <h3 id="deployment">Deployment</h3>
 <div data-type="example">
   <h3 id="example-102-gesture-classifier">Example 10.2: Gesture Classifier</h3>
   <figure>
-    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/SbfSv_GhM" data-example-path="examples/10_nn/10_2_gesture_classifier"></div>
+    <div data-type="embed" data-p5-editor="https://editor.p5js.org/natureofcode/sketches/SbfSv_GhM" data-example-path="examples/10_nn/10_2_gesture_classifier"><img src="examples/10_nn/10_2_gesture_classifier/screenshot.png"></div>
     <figcaption></figcaption>
   </figure>
 </div>

content/11_nn_ga.html

@@ -1,7 +1,7 @@
 <section data-type="chapter">
 <h1 id="chapter-11-neuroevolution">Chapter 11. NeuroEvolution</h1>
-<h2 id="reinforcement-learning">Reinforcement Learning</h2>
 <p>There is so much more to working with data, machine learning, ml5.js, and beyond. I’ve only scratched the surface. As I close out this book, my goal is to tie the foundational machine learning concepts I’ve covered back into animated, interactive p5.js sketches that simulate physics and complex systems. Let’s see if I can bring as many concepts from the entire book back together for one last hurrah!</p>
+<h2 id="reinforcement-learning">Reinforcement Learning</h2>
 <p>Towards the start of this chapter, I referenced an approach to incorporating machine learning into a simulated environment called “reinforcement learning.” Imagine embedding a neural network into any of the example objects (walker, mover, particle, vehicle) and calculating a force or some other action. The neural network could receive inputs related to the environment (such as distance to an obstacle) and produce a decision that requires a choice from a set of discrete options (e.g., move “left” or “right”) or a set of continuous values (e.g., magnitude and direction of a steering force). This is starting to sound familiar: it’s a neural network that receives inputs and performs classification or regression!</p>
 <p>Here is where things take a turn, however. To better illustrate the concept, let’s start with a hopefully easy to understand and possibly familiar scenario, the game “Flappy Bird.” The game is deceptively simple. You control a small bird that continually moves horizontally across the screen. With each tap or click, the bird flaps its wings and rises upward. The challenge? A series of vertical pipes spaced apart at irregular intervals emerges from the right. The pipes have gaps, and your primary objective is to navigate the bird safely through these gaps. If you hit one, it’s game over. As you progress, the game’s speed increases, and the more pipes you navigate, the higher your score.</p>
 <figure>

content/examples/04_particles/4_1_single_particle/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
+    <meta charset="utf-8">
+    <title>NOC_4_01_SingleParticle</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <script src="particle.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>

content/examples/04_particles/4_1_single_particle/particle.js

@@ -0,0 +1,42 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+// Simple Particle System
+
+// A simple Particle class
+
+class Particle {
+
+  constructor(x,y) {
+    this.position =  createVector(x, y);
+    //{!1 .offset-top} For demonstration purposes the Particle has a random velocity.
+    this.velocity = createVector(random(-1, 1), random(-2, 0));
+    this.acceleration = createVector(0, 0);
+    this.lifespan = 255.0;
+  }
+
+  update() {
+    this.velocity.add(this.acceleration);
+    this.position.add(this.velocity);
+    this.lifespan -= 2.0;
+    this.acceleration.mult(0);
+  }
+
+
+  show() {
+    stroke(0, this.lifespan);
+    fill(0, this.lifespan);
+    circle(this.position.x, this.position.y, 8);
+  }
+
+  //{!3} Keeping the same physics model as with previous chapters
+  applyForce(force) {
+    this.acceleration.add(force);
+  }
+
+  //{!3} Is the Particle alive or dead?
+  isDead() {
+    return (this.lifespan < 0);
+  }
+}

content/examples/04_particles/4_1_single_particle/sketch.js

@@ -0,0 +1,28 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+let particle;
+
+function setup() {
+  createCanvas(640, 240);
+  particle = new Particle(width / 2, 10);
+}
+
+function draw() {
+  background(255);
+  // Operating the single Particle
+  particle.update();
+  particle.show();
+
+  // Applying a gravity force
+  let gravity = createVector(0, 0.1);
+  particle.applyForce(gravity);
+
+  // Checking the particle's state and making a new particle
+  if (particle.isDead()) {
+    particle = new Particle(width / 2, 20);
+    console.log("Particle dead!");
+  }
+}
+

content/examples/04_particles/4_1_single_particle/style.css

@@ -0,0 +1,7 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+canvas {
+  display: block;
+}

content/examples/04_particles/4_2_array_particles/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
+    <meta charset="utf-8">
+    <title>NOC_4_02_ArrayParticles</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <script src="particle.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>

content/examples/04_particles/4_2_array_particles/particle.js

@@ -0,0 +1,48 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+// Simple Particle System
+
+// A simple Particle class
+
+class Particle {
+  constructor(x, y) {
+    this.position = createVector(x, y);
+    this.acceleration = createVector(0, 0);
+    this.velocity = createVector(random(-1, 1), random(-1, 0));
+    this.lifespan = 255.0;
+  }
+
+  run() {
+    let gravity = createVector(0, 0.05);
+    this.applyForce(gravity);
+    this.update();
+    this.show();
+  }
+
+  applyForce(force) {
+    this.acceleration.add(force);
+  }
+
+  // Method to update position
+  update() {
+    this.velocity.add(this.acceleration);
+    this.position.add(this.velocity);
+    this.lifespan -= 2;
+    this.acceleration.mult(0);
+  }
+
+  // Method to display
+  show() {
+    stroke(0, this.lifespan);
+    strokeWeight(2);
+    fill(127, this.lifespan);
+    circle(this.position.x, this.position.y, 8);
+  }
+
+  // Is the particle still useful?
+  isDead() {
+    return (this.lifespan < 0.0);
+  }
+}

content/examples/04_particles/4_2_array_particles/sketch.js

@@ -0,0 +1,25 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+let particles = [];
+
+function setup() {
+  createCanvas(640, 240);
+}
+
+function draw() {
+  background(255);
+  particles.push(new Particle(width / 2, 20));
+
+  // Looping through backwards to delete
+  for (let i = particles.length - 1; i >= 0; i--) {
+    let particle = particles[i];
+    particle.run();
+    if (particle.isDead()) {
+      //remove the particle
+      particles.splice(i, 1);
+    }
+  }
+}
+

content/examples/04_particles/4_2_array_particles/style.css

@@ -0,0 +1,7 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+canvas {
+  display: block;
+}

content/examples/04_particles/4_3_particle_emitter/sketch.js

@@ -13,4 +13,4 @@ function draw() {
   background(255);
   emitter.addParticle();
   emitter.run();
-}
+}

content/examples/04_particles/4_6_particle_system_forces/emitter.js

@@ -0,0 +1,33 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+class Emitter {
+
+  constructor(x, y) {
+    this.origin = createVector(x, y);
+    this.particles = [];
+  }
+
+  addParticle() {
+    this.particles.push(new Particle(this.origin.x, this.origin.y));
+  }
+
+  applyForce(force) {
+    //{!3} Using a for of loop to apply the force to all particles
+    for (let particle of this.particles) {
+      particle.applyForce(force);
+    }
+  }
+
+  run() {
+    //{!7} Can’t use the enhanced loop because checking for particles to delete.
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      const particle = this.particles[i];
+      particle.run();
+      if (particle.isDead()) {
+        this.particles.splice(i, 1);
+      }
+    }
+  }
+}

content/examples/04_particles/4_6_particle_system_forces/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.min.js"></script>
+    <meta charset="utf-8">
+    <title>NOC_4_06_ParticlesSystemForces</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <script src="particle.js"></script>
+    <script src="emitter.js"></script>
+    <script src="sketch.js"></script>
+  </body>
+</html>

content/examples/04_particles/4_6_particle_system_forces/particle.js

@@ -0,0 +1,49 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+// Simple Particle System
+
+// A simple Particle class
+
+class Particle {
+  constructor(x, y) {
+    this.position = createVector(x, y);
+    this.acceleration = createVector(0, 0.0);
+    this.velocity = createVector(random(-1, 1), random(-2, 0));
+    this.lifespan = 255.0;
+    this.mass = 1; // Let's do something better here!
+  }
+
+  run() {
+    this.update();
+    this.show();
+  }
+
+  applyForce(force) {
+    let f = force.copy();
+    f.div(this.mass);
+    this.acceleration.add(f);
+  }
+
+  // Method to update position
+  update() {
+    this.velocity.add(this.acceleration);
+    this.position.add(this.velocity);
+    this.acceleration.mult(0);
+    this.lifespan -= 2.0;
+  }
+
+  // Method to display
+  show() {
+    stroke(0, this.lifespan);
+    strokeWeight(2);
+    fill(127, this.lifespan);
+    circle(this.position.x, this.position.y, 8);
+  }
+
+  // Is the particle still useful?
+  isDead() {
+    return this.lifespan < 0.0;
+  }
+}

content/examples/04_particles/4_6_particle_system_forces/sketch.js

@@ -0,0 +1,21 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+let emitter;
+
+function setup() {
+  createCanvas(640, 240);
+  emitter = new Emitter(width / 2, 50);
+}
+
+function draw() {
+  background(255);
+
+  // Apply gravity force to all Particles
+  let gravity = createVector(0, 0.1);
+  emitter.applyForce(gravity);
+
+  emitter.addParticle();
+  emitter.run();
+}

content/examples/04_particles/4_6_particle_system_forces/style.css

@@ -0,0 +1,7 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+canvas {
+  display: block;
+}