diff --git a/chp04_systems/NOC_4_01_SingleParticle/particle.js b/chp04_systems/NOC_4_01_SingleParticle/particle.js index c6a44644..a08892a0 100644 --- a/chp04_systems/NOC_4_01_SingleParticle/particle.js +++ b/chp04_systems/NOC_4_01_SingleParticle/particle.js @@ -8,23 +8,23 @@ 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 @@ -32,15 +32,11 @@ class Particle { 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); } } \ No newline at end of file diff --git a/chp04_systems/NOC_4_01_SingleParticle/sketch.js b/chp04_systems/NOC_4_01_SingleParticle/sketch.js index a06ef569..e5e264da 100644 --- 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!"); } } \ No newline at end of file diff --git a/chp04_systems/NOC_4_02_ArrayParticles/particle.js b/chp04_systems/NOC_4_02_ArrayParticles/particle.js index c6a44644..03255f8b 100644 --- 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); } } \ No newline at end of file diff --git a/chp04_systems/NOC_4_02_ArrayParticles/sketch.js b/chp04_systems/NOC_4_02_ArrayParticles/sketch.js index 0cb2c12d..82f3c113 100644 --- 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 index dd834fda..369d0cff 100644 --- a/chp04_systems/NOC_4_03_ParticleSystemClass/index.html +++ b/chp04_systems/NOC_4_03_ParticleSystemClass/index.html @@ -1,17 +1,17 @@ - - - - - - NOC_4_03_ParticleSystemClass + + + + + + NOC_4_03_ParticleSystemClass - - - + + + \ No newline at end of file diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/particle.js b/chp04_systems/NOC_4_03_ParticleSystemClass/particle.js index 26cbdf6d..e10487ab 100644 --- 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); } } \ No newline at end of file diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/particle_system.js b/chp04_systems/NOC_4_03_ParticleSystemClass/particle_system.js deleted file mode 100644 index c18b86c1..00000000 --- a/chp04_systems/NOC_4_03_ParticleSystemClass/particle_system.js +++ /dev/null @@ -1,36 +0,0 @@ -// The Nature of Code -// Daniel Shiffman -// http://natureofcode.com - -class ParticleSystem { - constructor(position) { - this.origin = position.copy(); - this.particles = []; - } - - addParticle() { - this.particles.push(new Particle(this.origin)); - } - - 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(); - // }); - - } -} \ No newline at end of file diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/sketch.js b/chp04_systems/NOC_4_03_ParticleSystemClass/sketch.js index b10e1bb3..0b1de299 100644 --- 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(); } \ No newline at end of file diff --git a/chp04_systems/NOC_4_03_ParticleSystemClass/system.js b/chp04_systems/NOC_4_03_ParticleSystemClass/system.js new file mode 100644 index 00000000..ecc10afe --- /dev/null +++ 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(); + // // }); + // } +} \ No newline at end of file