diff --git a/content/04_particles.html b/content/04_particles.html
index a0e4f67..4c13473 100644
--- a/content/04_particles.html
+++ b/content/04_particles.html
@@ -263,14 +263,14 @@ function draw() {
Example 4.2: Array of particles
-
+
let particles = [];
function setup() {
- createCanvas(640, 360);
+ createCanvas(640, 240);
}
function draw() {
diff --git a/content/examples/04_particles/noc_4_01_single_particle/particle.js b/content/examples/04_particles/noc_4_01_single_particle/particle.js
index c6a4464..a77afa0 100644
--- a/content/examples/04_particles/noc_4_01_single_particle/particle.js
+++ b/content/examples/04_particles/noc_4_01_single_particle/particle.js
@@ -8,16 +8,16 @@
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.05);
this.lifespan = 255.0;
}
run() {
this.update();
- this.display();
+ this.show();
}
// Method to update position
@@ -28,11 +28,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?
diff --git a/content/examples/04_particles/noc_4_01_single_particle/sketch.js b/content/examples/04_particles/noc_4_01_single_particle/sketch.js
index a06ef56..b55a3d1 100644
--- a/content/examples/04_particles/noc_4_01_single_particle/sketch.js
+++ b/content/examples/04_particles/noc_4_01_single_particle/sketch.js
@@ -5,16 +5,16 @@
let p;
function setup() {
- createCanvas(640, 360);
- p = new Particle(createVector(width / 2, 20));
+ createCanvas(640, 240);
+ p = new Particle(width / 2, 20);
}
function draw() {
- background(51);
+ background(255);
p.run();
if (p.isDead()) {
- p = new Particle(createVector(width / 2, 20));
+ p = new Particle(width / 2, 20);
//println("Particle dead!");
}
}
\ No newline at end of file
diff --git a/content/examples/04_particles/noc_4_02_array_particles/index.html b/content/examples/04_particles/noc_4_02_array_particles/index.html
new file mode 100644
index 0000000..de91b54
--- /dev/null
+++ b/content/examples/04_particles/noc_4_02_array_particles/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ NOC_4_02_ArrayParticles
+
+
+
+
+
+
+
diff --git a/content/examples/04_particles/noc_4_02_array_particles/particle.js b/content/examples/04_particles/noc_4_02_array_particles/particle.js
new file mode 100644
index 0000000..2854901
--- /dev/null
+++ b/content/examples/04_particles/noc_4_02_array_particles/particle.js
@@ -0,0 +1,46 @@
+// 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.05);
+ this.velocity = createVector(random(-1, 1), random(-1, 0));
+ this.lifespan = 255.0;
+ }
+
+ run() {
+ this.update();
+ this.show();
+ }
+
+ // Method to update position
+ update() {
+ this.velocity.add(this.acceleration);
+ this.position.add(this.velocity);
+ this.lifespan -= 2;
+ }
+
+ // Method to display
+ show() {
+ stroke(0, this.lifespan);
+ strokeWeight(2);
+ fill(127, this.lifespan);
+ circle(this.position.x, this.position.y, 12);
+ }
+
+ // Is the particle still useful?
+ isDead() {
+ if (this.lifespan < 0.0) {
+ return true;
+ } else {
+ return false;
+ }
+ }
+}
\ No newline at end of file
diff --git a/content/examples/04_particles/noc_4_02_array_particles/sketch.js b/content/examples/04_particles/noc_4_02_array_particles/sketch.js
new file mode 100644
index 0000000..4c9169f
--- /dev/null
+++ b/content/examples/04_particles/noc_4_02_array_particles/sketch.js
@@ -0,0 +1,24 @@
+// 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, 50));
+
+ // Looping through backwards to delete
+ for (var i = particles.length - 1; i >= 0; i--) {
+ var p = particles[i];
+ p.run();
+ if (p.isDead()) {
+ //remove the particle
+ particles.splice(i, 1);
+ }
+ }
+}
diff --git a/content/examples/04_particles/noc_4_02_array_particles/style.css b/content/examples/04_particles/noc_4_02_array_particles/style.css
new file mode 100644
index 0000000..130b7d6
--- /dev/null
+++ b/content/examples/04_particles/noc_4_02_array_particles/style.css
@@ -0,0 +1,7 @@
+html, body {
+ margin: 0;
+ padding: 0;
+}
+canvas {
+ display: block;
+}
diff --git a/content/examples/04_particles/noc_4_03_particle_system_class/particle.js b/content/examples/04_particles/noc_4_03_particle_system_class/particle.js
index 26cbdf6..718215c 100644
--- a/content/examples/04_particles/noc_4_03_particle_system_class/particle.js
+++ b/content/examples/04_particles/noc_4_03_particle_system_class/particle.js
@@ -7,16 +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.0;
}
run() {
this.update();
- this.display();
+ this.show();
}
// Method to update position
@@ -27,8 +27,8 @@ 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);
diff --git a/content/examples/04_particles/noc_4_03_particle_system_class/particle_system.js b/content/examples/04_particles/noc_4_03_particle_system_class/particle_system.js
index c18b86c..3a436f9 100644
--- a/content/examples/04_particles/noc_4_03_particle_system_class/particle_system.js
+++ b/content/examples/04_particles/noc_4_03_particle_system_class/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() {
diff --git a/content/examples/04_particles/noc_4_03_particle_system_class/sketch.js b/content/examples/04_particles/noc_4_03_particle_system_class/sketch.js
index b10e1bb..848c904 100644
--- a/content/examples/04_particles/noc_4_03_particle_system_class/sketch.js
+++ b/content/examples/04_particles/noc_4_03_particle_system_class/sketch.js
@@ -5,12 +5,12 @@
let ps;
function setup() {
- createCanvas(640, 360);
- ps = new ParticleSystem(createVector(width / 2, 50));
+ createCanvas(640, 240);
+ ps = new ParticleSystem(width / 2, 50);
}
function draw() {
- background(51);
+ background(255);
ps.addParticle();
ps.run();
}
\ No newline at end of file