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

[Notion] Update docs

content/examples/04_particles/noc_4_04_systemof_systems/particle.js

@@ -16,7 +16,7 @@ class Particle {
 
   run() {
     this.update();
-    this.display();
+    this.show();
   }
 
   // Method to update position
@@ -27,11 +27,11 @@ class Particle {
   }
 
   // Method to display
-  display() {
-    stroke(255, this.lifespan);
+  show() {
+    stroke(0, 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?

content/examples/04_particles/noc_4_04_systemof_systems/particle_system.js

@@ -3,12 +3,9 @@
 // http://natureofcode.com
 
 class ParticleSystem {
-  constructor(num, position) {
-    this.origin = position.copy();
+  constructor(x, y) {
+    this.origin = createVector(x, y);
     this.particles = [];
-    for (let i = 0; i < num; i++) {
-      this.particles.push(new Particle(this.origin));
-    }
   }
 
   addParticle() {

content/examples/04_particles/noc_4_04_systemof_systems/sketch.js

@@ -11,14 +11,12 @@
 let systems = [];
 
 function setup() {
+  createCanvas(640, 240);
   let text = createP("click to add particle systems");
-  text.position(10, 365);
-
-  createCanvas(640, 360);
 }
 
 function draw() {
-  background(51);
+  background(255);
   for (let i = 0; i < systems.length; i++) {
     systems[i].addParticle();
     systems[i].run();
@@ -26,5 +24,5 @@ function draw() {
 }
 
 function mousePressed() {
-  systems.push(new ParticleSystem(1, createVector(mouseX, mouseY)));
+  systems.push(new ParticleSystem(mouseX, mouseY));
 }

content/examples/04_particles/noc_4_05_particle_system_inheritance_polymorphism/confetti.js

@@ -4,18 +4,17 @@
 
 // Child class constructor
 class Confetti extends Particle {
-
-  // Override the display method
-  display() {
+  // Override the show method
+  show() {
     rectMode(CENTER);
-    fill(255, this.lifespan);
-    stroke(255, this.lifespan);
+    fill(127, this.lifespan);
+    stroke(0, this.lifespan);
     strokeWeight(2);
     push();
     translate(this.position.x, this.position.y);
-    var theta = map(this.position.x, 0, width, 0, TWO_PI * 2);
+    let theta = map(this.position.x, 0, width, 0, TWO_PI * 2);
     rotate(theta);
-    rect(0, 0, 12, 12);
+    square(0, 0, 12);
     pop();
   }
-}
+}

content/examples/04_particles/noc_4_05_particle_system_inheritance_polymorphism/particle.js

@@ -7,17 +7,16 @@
 // A simple Particle class
 
 class Particle {
-
-  constructor(position) {
+  constructor(x, y) {
+    this.position = createVector(x, y);
     this.acceleration = createVector(0, 0.05);
     this.velocity = createVector(random(-1, 1), random(-1, 0));
-    this.position = position.copy();
     this.lifespan = 255;
   }
 
   run() {
     this.update();
-    this.display();
+    this.show();
   }
 
   // Method to update position
@@ -28,11 +27,11 @@ class Particle {
   }
 
   // Method to display
-  display() {
-    stroke(255, this.lifespan);
+  show() {
+    stroke(0, this.lifespan);
     strokeWeight(2);
-    fill(255, this.lifespan);
-    ellipse(this.position.x, this.position.y, 12, 12);
+    fill(127, this.lifespan);
+    circle(this.position.x, this.position.y, 12);
   }
 
   // Is the particle still useful?
@@ -43,4 +42,4 @@ class Particle {
       return false;
     }
   }
-}
+}

content/examples/04_particles/noc_4_05_particle_system_inheritance_polymorphism/particle_system.js

@@ -4,17 +4,17 @@
 
 class ParticleSystem {
 
-  constructor(position) {
-    this.origin = position.copy();
+  constructor(x,y) {
+    this.origin = createVector(x,y);
     this.particles = [];
   }
 
   addParticle() {
     let r = random(1);
     if (r < 0.5) {
-      this.particles.push(new Particle(this.origin));
+      this.particles.push(new Particle(this.origin.x, this.origin.y));
     } else {
-      this.particles.push(new Confetti(this.origin));
+      this.particles.push(new Confetti(this.origin.x, this.origin.y));
     }
   }
 

content/examples/04_particles/noc_4_05_particle_system_inheritance_polymorphism/sketch.js

@@ -11,12 +11,12 @@
 let particleSystem;
 
 function setup() {
-  createCanvas(640, 360);
-  particleSystem = new ParticleSystem(createVector(width / 2, 50));
+  createCanvas(640, 240);
+  particleSystem = new ParticleSystem(width / 2, 50);
 }
 
 function draw() {
-  background(51);
+  background(255);
   particleSystem.addParticle();
   particleSystem.run();
 }

content/examples/04_particles/noc_4_06_particle_system_forces/particle.js

@@ -7,17 +7,17 @@
 // A simple Particle class
 
 class Particle {
-  constructor(position) {
+  constructor(x, y) {
+    this.position = createVector(x, y);
     this.acceleration = createVector(0, 0.0);
     this.velocity = createVector(random(-1, 1), random(-2, 0));
-    this.position = position.copy();
     this.lifespan = 255.0;
     this.mass = 1; // Let's do something better here!
   }
 
   run() {
     this.update();
-    this.display();
+    this.show();
   }
 
   applyForce(force) {
@@ -35,11 +35,11 @@ class Particle {
   }
 
   // Method to display
-  display() {
-    stroke(200, this.lifespan);
+  show() {
+    stroke(0, 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?
@@ -50,4 +50,4 @@ class Particle {
       return false;
     }
   }
-}
+}

content/examples/04_particles/noc_4_06_particle_system_forces/particle_system.js

@@ -3,13 +3,13 @@
 // http://natureofcode.com
 
 class ParticleSystem {
-  constructor(position) {
-    this.origin = position.copy();
+  constructor(x, y) {
+    this.origin = createVector(x, y);
     this.particles = [];
   }
 
   addParticle() {
-    this.particles.push(new Particle(this.origin));
+    this.particles.push(new Particle(this.origin.x, this.origin.y));
   }
 
   run() {
@@ -20,7 +20,7 @@ class ParticleSystem {
     }
 
     // Filter removes any elements of the array that do not pass the test
-    this.particles = this.particles.filter(particle => !particle.isDead());
+    this.particles = this.particles.filter((particle) => !particle.isDead());
   }
 
   // A function to apply a force to all Particles
@@ -29,4 +29,4 @@ class ParticleSystem {
       this.particles[i].applyForce(f);
     }
   }
-}
+}

content/examples/04_particles/noc_4_06_particle_system_forces/sketch.js

@@ -5,13 +5,12 @@
 let ps;
 
 function setup() {
-  createCanvas(640, 360);
-  setFrameRate(60);
-  ps = new ParticleSystem(createVector(width / 2, 50));
+  createCanvas(640, 240);
+  ps = new ParticleSystem(width / 2, 50);
 }
 
 function draw() {
-  background(51);
+  background(255);
 
   // Apply gravity force to all Particles
   let gravity = createVector(0, 0.1);

content/examples/04_particles/noc_4_07_particle_system_forces_repeller/particle.js

@@ -34,10 +34,10 @@ class Particle {
 
   // Method to display
   display() {
-    stroke(255, this.lifespan);
+    stroke(0, this.lifespan);
     strokeWeight(2);
-    fill(255, this.lifespan);
-    ellipse(this.position.x, this.position.y, 12, 12);
+    fill(127, this.lifespan);
+    circle(this.position.x, this.position.y, 12);
   }
 
   // Is the particle still useful?

content/examples/04_particles/noc_4_07_particle_system_forces_repeller/particle_system.js

@@ -3,8 +3,8 @@
 // http://natureofcode.com
 
 class ParticleSystem {
-  constructor(position) {
-    this.origin = position.copy();
+  constructor(x, y) {
+    this.origin = createVector(x, y);
     this.particles = [];
   }
 
@@ -24,7 +24,7 @@ class ParticleSystem {
     }
 
     // Filter removes any elements of the array that do not pass the test
-    this.particles = this.particles.filter(particle => !particle.isDead());
+    this.particles = this.particles.filter((particle) => !particle.isDead());
   }
 
   // A function to apply a force to all Particles
@@ -40,5 +40,4 @@ class ParticleSystem {
       particle.applyForce(force);
     }
   }
-
-}
+}

content/examples/04_particles/noc_4_07_particle_system_forces_repeller/repeller.js

@@ -4,11 +4,11 @@ class Repeller {
     this.position = createVector(x, y);
   }
 
-  display() {
-    stroke(255);
+  show() {
+    stroke(0);
     strokeWeight(2);
     fill(127);
-    ellipse(this.position.x, this.position.y, 32, 32);
+    circle(this.position.x, this.position.y, 32);
   }
 
   repel(p) {

content/examples/04_particles/noc_4_07_particle_system_forces_repeller/sketch.js

@@ -6,22 +6,21 @@ let ps;
 let repeller;
 
 function setup() {
-  createCanvas(640, 360);
-  ps = new ParticleSystem(createVector(width / 2, 50));
+  createCanvas(640, 240);
+  ps = new ParticleSystem(width / 2, 50);
   repeller = new Repeller(width / 2, height / 2);
 }
 
 function draw() {
-  background(51);
+  background(255);
   ps.addParticle(mouseX, mouseY);
 
   // Apply gravity force to all Particles
   let gravity = createVector(0, 0.02);
   ps.applyForce(gravity);
-
   ps.applyRepeller(repeller);
 
-  repeller.display();
+  repeller.show();
   ps.run();
 
 }

content/examples/04_particles/noc_4_08_particle_system_smoke/particle.js

@@ -3,20 +3,20 @@
 // http://natureofcode.com
 
 class Particle {
-
-  constructor(pos, img) {
-    this.acc = createVector(0, 0);
+  constructor(x, y, img) {
+    this.pos = createVector(x, y);
     let vx = randomGaussian() * 0.3;
     let vy = randomGaussian() * 0.3 - 1.0;
     this.vel = createVector(vx, vy);
-    this.pos = pos.copy();
+
+    this.acc = createVector(0, 0);
     this.lifespan = 100.0;
     this.img = img;
   }
 
   run() {
     this.update();
-    this.render();
+    this.show();
   }
 
   // Method to apply a force vector to the Particle object
@@ -34,9 +34,9 @@ class Particle {
   }
 
   // Method to display
-  render() {
-    imageMode(CENTER);
+  show() {
     tint(255, this.lifespan);
+    imageMode(CENTER);
     image(img, this.pos.x, this.pos.y);
     // Drawing a circle instead
     // fill(255,lifespan);
@@ -52,4 +52,4 @@ class Particle {
       return false;
     }
   }
-}
+}

content/examples/04_particles/noc_4_08_particle_system_smoke/particle_system.js

@@ -9,13 +9,10 @@
 
 class ParticleSystem {
 
-  constructor(num, v, img) {
+  constructor(x, y, img) {
     this.particles = []; // Initialize the arraylist
-    this.origin = v.copy(); // Store the origin point
+    this.origin = createVector(x,y); // Store the origin point
     this.img = img;
-    for (let i = 0; i < num; i++) {
-      this.particles.push(new Particle(this.origin, this.img)); // Add "num" amount of particles to the arraylist
-    }
   }
 
   run() {
@@ -34,7 +31,7 @@ class ParticleSystem {
   }
 
   addParticle() {
-    this.particles.push(new Particle(this.origin, this.img));
+    this.particles.push(new Particle(this.origin.x, this.origin.y, this.img));
   }
 
 }

content/examples/04_particles/noc_4_08_particle_system_smoke/sketch.js

@@ -16,8 +16,8 @@ function preload() {
 }
 
 function setup() {
-  createCanvas(640, 360);
-  ps = new ParticleSystem(0, createVector(width / 2, height - 75), img);
+  createCanvas(640, 240);
+  ps = new ParticleSystem(width / 2, height - 75, img);
 }
 
 function draw() {
@@ -29,13 +29,12 @@ function draw() {
 
   background(0);
 
-  // Additive blending!
   // Calculate a "wind" force based on mouse horizontal position
   let dx = map(mouseX, 0, width, -0.2, 0.2);
   let wind = createVector(dx, 0);
   ps.applyForce(wind);
   ps.run();
-  for (let i = 0; i < 2; i++) {
+  for (let i = 0; i < 1; i++) {
     ps.addParticle();
   }
 

content/examples/04_particles/noc_4_08_particle_system_smoke_webgl/particle.js

@@ -3,19 +3,19 @@
 // http://natureofcode.com
 
 class Particle {
-  constructor(pos, img) {
-    this.acc = createVector(0, 0);
+  constructor(x, y, img) {
+    this.pos = createVector(x, y);
     let vx = randomGaussian() * 0.3;
     let vy = randomGaussian() * 0.3 - 1.0;
     this.vel = createVector(vx, vy);
-    this.pos = pos.copy();
+    this.acc = createVector(0, 0);
     this.lifespan = 100.0;
     this.img = img;
   }
 
   run() {
     this.update();
-    this.render();
+    this.show();
   }
 
   // Method to apply a force vector to the Particle object
@@ -33,14 +33,14 @@ class Particle {
   }
 
   // Method to display
-  render() {
+  show() {
     push();
     translate(this.pos.x, this.pos.y);
 
     // This is needed for the texture to use transparency
     noStroke();
     texture(this.img);
-    tint(255, 100, 255);
+    tint(255, 100, 255, this.lifespan);
     square(0, 0, 32);
     pop();
   }

content/examples/04_particles/noc_4_08_particle_system_smoke_webgl/particlesystem.js

@@ -9,13 +9,10 @@
 
 class ParticleSystem {
 
-  constructor(num, v, img) {
+  constructor(x, y, img) {
     this.particles = []; // Initialize the arraylist
-    this.origin = v.copy(); // Store the origin point
+    this.origin = createVector(x,y); // Store the origin point
     this.img = img;
-    for (let i = 0; i < num; i++) {
-      this.particles.push(new Particle(this.origin, this.img)); // Add "num" amount of particles to the arraylist
-    }
   }
 
   run() {
@@ -34,7 +31,7 @@ class ParticleSystem {
   }
 
   addParticle() {
-    this.particles.push(new Particle(this.origin, this.img));
+    this.particles.push(new Particle(this.origin.x, this.origin.y, this.img));
   }
 
 }

content/examples/04_particles/noc_4_08_particle_system_smoke_webgl/sketch.js

@@ -17,8 +17,8 @@ function preload() {
 
 function setup() {
 
-  createCanvas(640, 360, WEBGL);
-  ps = new ParticleSystem(0, createVector(0, 75), img);
+  createCanvas(640, 240, WEBGL);
+  ps = new ParticleSystem(0, 75, img);
 
 }