nature-of-code · shiffman · Jul 31, 2019
diff --git a/chp04_systems/NOC_4_01_SingleParticle/particle.js b/chp04_systems/NOC_4_01_SingleParticle/particle.js
@@ -8,39 +8,35 @@
 
 class Particle {
 
-  constructor(position) {
-    this.acceleration = createVector(0, 0.05);
+  constructor(x, y) {
+    this.position = createVector(x, y);
     this.velocity = createVector(random(-1, 1), random(-1, 0));
-    this.position = position.copy();
+    this.acceleration = createVector(0, 0);
     this.lifespan = 255.0;
   }
 
-  run() {
-    this.update();
-    this.display();
-  }
-
   // Method to update position
   update() {
     this.velocity.add(this.acceleration);
     this.position.add(this.velocity);
     this.lifespan -= 2;
+    this.acceleration.set(0, 0);
+  }
+
+  applyForce(force) {
+    this.acceleration.add(force);
   }
 
   // Method to display
   display() {
     stroke(255, this.lifespan);
     strokeWeight(2);
     fill(127, this.lifespan);
-    ellipse(this.position.x, this.position.y, 12, 12);
+    circle(this.position.x, this.position.y, 12);
   }
 
   // Is the particle still useful?
   isDead() {
-    if (this.lifespan < 0.0) {
-      return true;
-    } else {
-      return false;
-    }
+    return (this.lifespan < 0.0);
   }
 }
diff --git a/chp04_systems/NOC_4_01_SingleParticle/sketch.js b/chp04_systems/NOC_4_01_SingleParticle/sketch.js
@@ -2,19 +2,24 @@
 // Daniel Shiffman
 // http://natureofcode.com
 
-let p;
+let particle;
 
 function setup() {
   createCanvas(640, 360);
-  p = new Particle(createVector(width / 2, 20));
+  particle = new Particle(width / 2, 20);
 }
 
 function draw() {
-  background(51);
+  background(0);
 
-  p.run();
-  if (p.isDead()) {
-    p = new Particle(createVector(width / 2, 20));
-    //println("Particle dead!");
+  particle.update();
+  particle.display();
+
+  let gravity = createVector(0, 0.1);
+  particle.applyForce(gravity);
+
+  if (particle.isDead()) {
+    particle = new Particle(width / 2, 20);
+    //print("Particle dead!");
   }
 }
diff --git a/chp04_systems/NOC_4_02_ArrayParticles/particle.js b/chp04_systems/NOC_4_02_ArrayParticles/particle.js
@@ -8,39 +8,41 @@
 
 class Particle {
 
-  constructor(position) {
-    this.acceleration = createVector(0, 0.05);
+  constructor(x, y) {
+    this.position = createVector(x, y);
+    this.acceleration = createVector(0, 0);
     this.velocity = createVector(random(-1, 1), random(-1, 0));
-    this.position = position.copy();
     this.lifespan = 255.0;
   }
 
   run() {
+    let gravity = createVector(0, 0.1);
+    this.applyForce(gravity);
     this.update();
     this.display();
   }
 
+  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.set(0, 0);
+    this.lifespan -= 3;
   }
 
   // Method to display
   display() {
     stroke(255, this.lifespan);
-    strokeWeight(2);
     fill(127, this.lifespan);
-    ellipse(this.position.x, this.position.y, 12, 12);
+    circle(this.position.x, this.position.y, 12);
   }
 
   // Is the particle still useful?
   isDead() {
-    if (this.lifespan < 0.0) {
-      return true;
-    } else {
-      return false;
-    }
+    return (this.lifespan < 0.0);
   }
 }
diff --git a/chp04_systems/NOC_4_02_ArrayParticles/sketch.js b/chp04_systems/NOC_4_02_ArrayParticles/sketch.js
@@ -9,14 +9,14 @@ function setup() {
 }
 
 function draw() {
-  background(51);
-  particles.push(new Particle(createVector(width / 2, 50)));
+  background(255);
+  particles.push(new Particle(width / 2, 50));
 
   // Looping through backwards to delete
-  for (var i = particles.length - 1; i >= 0; i--) {
-    var p = particles[i];
-    p.run();
-    if (p.isDead()) {
+  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);
     }

diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/index.html b/chp04_systems/NOC_4_03_ParticleSystemClass/index.html
@@ -1,17 +1,17 @@
 <!DOCTYPE html>
 <html>
-  
-  <head>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
-    <meta charset="utf-8" />
-    <title>NOC_4_03_ParticleSystemClass</title>
+
+<head>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
+  <meta charset="utf-8" />
+  <title>NOC_4_03_ParticleSystemClass</title>
 </head>
 
 <body>
-    <script src="particle.js"></script>
-    <script src="particle_system.js"></script>
-    <script src="sketch.js"></script>
+  <script src="particle.js"></script>
+  <script src="system.js"></script>
+  <script src="sketch.js"></script>
 </body>
 
 </html>
diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/particle.js b/chp04_systems/NOC_4_03_ParticleSystemClass/particle.js
@@ -7,39 +7,43 @@
 // A simple Particle class
 
 class Particle {
-  constructor(position) {
-    this.acceleration = createVector(0, 0.05);
+
+  constructor(x, y) {
+    this.position = createVector(x, y);
+    this.acceleration = createVector(0, 0);
     this.velocity = createVector(random(-1, 1), random(-1, 0));
-    this.position = position.copy();
     this.lifespan = 255.0;
   }
 
   run() {
+    let gravity = createVector(0, 0.1);
+    this.applyForce(gravity);
     this.update();
     this.display();
   }
 
+  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.set(0, 0);
+    this.lifespan -= 3;
   }
 
   // Method to display
   display() {
-    stroke(200, this.lifespan);
-    strokeWeight(2);
+    stroke(255, this.lifespan);
     fill(127, this.lifespan);
-    ellipse(this.position.x, this.position.y, 12, 12);
+    circle(this.position.x, this.position.y, 12);
   }
 
   // Is the particle still useful?
   isDead() {
-    if (this.lifespan < 0.0) {
-      return true;
-    } else {
-      return false;
-    }
+    return (this.lifespan < 0.0);
   }
 }
diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/particle_system.js b/chp04_systems/NOC_4_03_ParticleSystemClass/particle_system.js
diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/sketch.js b/chp04_systems/NOC_4_03_ParticleSystemClass/sketch.js
@@ -2,15 +2,15 @@
 // Daniel Shiffman
 // http://natureofcode.com
 
-let ps;
+let system;
 
 function setup() {
   createCanvas(640, 360);
-  ps = new ParticleSystem(createVector(width / 2, 50));
+  system = new ParticleSystem(width / 2, 50);
 }
 
 function draw() {
-  background(51);
-  ps.addParticle();
-  ps.run();
+  background(0);
+  system.addParticle();
+  system.run();
 }
diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/system.js b/chp04_systems/NOC_4_03_ParticleSystemClass/system.js
@@ -0,0 +1,46 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+
+class ParticleSystem {
+  constructor(x, y) {
+    this.origin = createVector(x, y);
+    this.particles = [];
+  }
+
+  addParticle() {
+    this.particles.push(new Particle(this.origin.x, this.origin.y));
+  }
+
+  run() {
+    for (let i = this.particles.length - 1; i >= 0; i--) {
+      let particle = this.particles[i];
+      particle.run();
+      if (particle.isDead()) {
+        this.particles.splice(i, 1);
+      }
+    }
+  }
+
+  // Higher order version of run()
+  // run() {
+  //   // Run every particle
+  //   // ES6 for..of loop
+  //   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
+  //   // https://www.youtube.com/watch?v=Y8sMnRQYr3c
+  //   for (let particle of this.particles) {
+  //     particle.run();
+  //   }
+
+  //   // Filter removes any elements of the array that do not pass the test
+  //   // I am also using ES6 arrow snytax
+  //   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
+  //   // https://www.youtube.com/watch?v=mrYMzpbFz18
+  //   this.particles = this.particles.filter(particle => !particle.isDead());
+
+  //   // Without ES6 arrow code would look like:
+  //   // this.particles = this.particles.filter(function(particle) {
+  //   //   return !particle.isDead();
+  //   // });
+  // }
+}