diff --git a/content/04_particles.html b/content/04_particles.html index cc9c523..02448ee 100644 --- a/content/04_particles.html +++ b/content/04_particles.html @@ -44,72 +44,71 @@

Chapter 4. Particle Systems

- This chapter will be dedicated to looking at implementation strategies for - coding a particle system. How do we organize our code? Where do we store + This chapter is dedicated to looking at implementation strategies for + coding a particle system. How do you organize your code? Where do you store information related to individual particles versus information related to - the system as a whole? The examples we’ll look at will focus on managing the + the system as a whole? The examples I’ll cover will focus on managing the data associated with a particle system. They’ll use simple shapes for the particles and apply only the most basic behaviors (such as gravity). - However, by using this framework and building in more interesting ways to + However, by building on this framework and adding more interesting ways to render the particles and compute behaviors, you can achieve a variety of effects.

-

4.1 Why We Need Particle Systems

+

4.1 Why You Need Particle Systems

- We’ve defined a particle system to be a collection of independent objects, + I’ve defined a particle system to be a collection of independent objects, often represented by a simple shape or dot. Why does this matter? - Certainly, the prospect of modeling some of the phenomena we listed + Certainly, the prospect of modeling some of the phenomena listed (explosions!) is attractive and potentially useful. But really, there’s an - even better reason for us to concern ourselves with particle systems. If - we want to get anywhere in this nature of code life, we’re going to need - to work with systems of many things. We’re going to want to look - at balls bouncing, birds flocking, ecosystems evolving, all sorts of - things in plural. + even better reason to explore particle systems. If + you want to get anywhere in this nature of code life, you’re likely to find yourself + developing systems of many things–balls bouncing, birds flocking, ecosystems + evolving, all sorts of things in plural.

- Just about every chapter after this one is going to need to deal with a - list of objects. Yes, we’ve done this with an array in some of our first - vector and forces examples. But we need to go where no array has gone + Just about every chapter after this one is going to deal with a + list of objects. Yes, I’ve dipped my toe in the array waters in some of the first + vector and forces examples. But now it‘s time to go where no array has gone before.

- First, we’re going to want to deal with flexible quantities of elements. - Sometimes we’ll have zero things, sometimes one thing, sometimes ten - things, and sometimes ten thousand things. Second, we’re going to want to - take a more sophisticated object-oriented approach. Instead of simply - writing a class to describe a single particle, we’re also going to want to + First, I’m going to want to deal with flexible quantities of elements. + Some examples will have zero things, sometimes one thing, sometimes ten + things, and sometimes ten thousand things. Second, I’m going to want to + take a more sophisticated object-oriented approach. Instead of + writing a class to describe a single particle, I’m also going to want to write a class that describes the collection of particles—the particle - system itself. The goal here is to be able to write a main program that + system itself. The goal here is to be able to write a sketch that looks like the following: 

 // Ah, isn’t this main program so simple and lovely?
-let ps;
+let system;
 
 function setup() {
   createCanvas(640, 360);
-  ps = new ParticleSystem();
+  system = new ParticleSystem();
 }
 
 function draw() {
   background(255);
-  ps.run();
+  system.run();
 }

No single particle is ever referenced in the above code, yet the result will be full of particles flying all over the screen. Getting used to - writing p5 sketches with multiple classes, and classes that keep lists of - instances of other classes, will prove very useful as we get to more - advanced chapters in this book. + writing p5.js sketches with multiple classes, and classes that keep lists of + instances of other classes, will prove very useful as you get to + later chapters in this book.

@@ -120,19 +119,20 @@

4.1 Why We Need Particle Systems

- Finally, working with particle systems is also a good excuse for us to - tackle two other advanced object-oriented programming techniques: - inheritance and polymorphism. With the examples we’ve seen up until now, - we’ve always had an array of a single type of object, like "movers" or - “oscillators.” With inheritance (and polymorphism), we’ll learn a - convenient way to store a single list that contains objects of different + Finally, working with particle systems is also a good excuse to + tackle two other object-oriented programming techniques: + inheritance and polymorphism. With the examples you’ve seen up until now, + I’ve always used an array of a single type of object, like "movers" or + “oscillators.” With inheritance (and polymorphism), I’ll demonstrate a + convenient way to store a single list containing objects of different types. This way, a particle system need not only be a system of a single type of particle.

- Though it may seem obvious to you, I’d also like to point out that these - are typical implementations of particle systems, and that’s where we will + Though it may seem obvious to you, I’d also like to point out that my examples + are modeled after conventional implementations of particle systems, and that’s + where I will begin in this chapter. However, the fact that the particles in this chapter look or behave a certain way should not limit your imagination. Just because particle systems tend to look sparkly, fly forward, and fall @@ -141,8 +141,8 @@

4.1 Why We Need Particle Systems

- The focus here is really just how to keep track of a system of many - elements. What those elements do and how those elements look is up to you. + The focus here is on how to keep track of a system of many elements. + What those elements do and how those elements look is up to you.

@@ -153,21 +153,20 @@

4.2 A Single Particle

- Before we can get rolling on the system itself, we have to write the class - that will describe a single particle. The good news: we’ve done this - already. Our Mover class from Chapter 2 serves as the perfect - template. For us, a particle is an independent body that moves about the - screen. It has position, velocity, and + Before I can get rolling on coding the system itself, I need to write the class + to describe a single particle. The good news: I’ve done this + already! The Mover class from Chapter 2 serves as the perfect + template. A particle is an independent body that moves about the + canvas. It has position, velocity, and acceleration, a constructor to initialize those variables, - and functions to display() itself and - update() its position. + and functions to display() itself and update() its position. 

 class Particle {
   //{!3} A “Particle” object is just another name for our “Mover.” It has position, velocity, and acceleration.
-  Particle(l) {
-    this.position = l.copy();
+  Particle(x, y) {
+    this.position = createVector(x, y);
     this.acceleration = createVector();
     this.velocity = createVector();
   }
@@ -180,17 +179,17 @@ 
4.2 A Single Particle

   display() {
     stroke(0);
     fill(175);
-    ellipse(this.position.x, this.position.y, 8, 8);
+    circle(this.position.x, this.position.y, 8);
   }
 }

- This is about as simple as a particle can get. From here, we could take - our particle in several directions. We could add an + This is about as simple as a particle can get. From here, I could take + the particle in several directions. I could add the applyForce() function to affect the particle’s behavior - (we’ll do precisely this in a future example). We could add variables to - describe color and shape, or reference a p5.Image to draw the - particle. For now, however, let’s focus on adding just one additional + (I’ll do precisely this in a future example). I could also add variables to + describe color and shape, or load a p5.Image to draw the + particle. For now, however, I’ll focus on adding just one additional detail: lifespan.

@@ -201,30 +200,30 @@

4.2 A Single Particle

- Typical particle systems involve something called an - emitter. The emitter is the source of the particles and controls the - initial - settings for the particles, position, velocity, etc. An emitter might emit + Some particle systems involve something called an emitter. + The emitter is the source of the particles and controls the initial + settings for the particles: position, velocity, and more. An emitter might emit a single burst of particles, or a continuous stream of particles, or both. - The point is that for a typical implementation such as this, a particle is - born at the emitter but does not live forever. If it were to live forever, - our p5 sketch would eventually grind to a halt as the number of particles - increases to an unwieldy number over time. As new particles are born, we - need old particles to die. This creates the illusion of an infinite stream - of particles, and the performance of our program does not suffer. There - are many different ways to decide when a particle dies. For example, it - could come into contact with another object, or it could simply leave the - screen. For our first Particle class, however, we’re simply - going to add a lifespan variable. The timer will start at 255 - and count down to 0, when the particle will be considered “dead.” And so - we expand the Particle class as follows: + The new feature here is that a particle + born at the emitter does not live forever. If it were to live forever, + the p5.js sketch would eventually grind to a halt as the amount of particles + increases to an unwieldy number over time. As new particles are born, + old particles need to be removed. This creates the illusion of an infinite stream + of particles, and the performance of the sketch does not suffer. There + are many different ways to decide when a particle is ready to be removed. For example, it + could come into contact with another object, or it could leave the + canvas. For this first Particle class, I’ll choose to add a + lifespan variable that acts like a countdown timer. + The timer will start at 255 + and count down to 0, when the particle will be considered “dead.” The code for this in the + Particle class as: 

 class Particle {
 
-  constructor(l) {
-    this.position = l.copy();
+  constructor(x, y) {
+    this.position = createVector(x, y);
     this.acceleration = createVector();
     this.velocity = createVector();
     //{!1 .bold} A new variable to keep track of how long the particle has been “alive”. We start at 255 and count down for convenience
@@ -239,18 +238,18 @@ 
4.2 A Single Particle

   }
 
   display() {
-    //{!2 .bold}  Since our life ranges from 255 to 0 we can use it for alpha
+    //{!2 .bold}  Since the life ranges from 255 to 0 it can be used also for alpha
     stroke(0, this.lifespan);
     fill(175, this.lifespan);
-    ellipse(this.position.x, this.position.y, 8, 8);
+    circle(this.position.x, this.position.y, 8);
   }
 }

- The reason we chose to start the lifespan at 255 and count down to 0 is - for convenience. With those values, we can assign lifespan to - act as the alpha transparency for the ellipse as well. When the particle - is “dead” it will also have faded away onscreen. + The reason I chose to start the lifespan at 255 and count down to 0 is + for convenience. With those values, I can assign lifespan to + act as the alpha transparency for the circle as well. When the particle + is “dead” it will also have faded away.

4.2 A Single Particle data-type="indexterm">

- With the addition of the lifespan variable, we’ll also need + With the addition of the lifespan property, I’ll also need one additional function—a function that can be queried (for a true or false answer) as to whether the particle is alive or dead. This will come - in handy when we are writing the ParticleSystem class, whose + in handy when writing the ParticleSystem class, whose task will be to manage the list of particles themselves. Writing this - function is pretty easy; we just need to check and see if the value of - lifespan is less than 0. If it is we - return true, if not we return false. + function is pretty easy; I just need to check and see if the value of + lifespan is less than 0. If it is + return true, if not return false. 

@@ -279,16 +278,24 @@ 
4.2 A Single Particle

     }
   }
+

Or more simply, I can return the result of the boolean expression itself!

+ + 
+    isDead() {
+      //{!4} Is the particle still alive?
+      return (this.lifespan < 0.0);
+    }
+ +

- Before we get to the next step of making many particles, it’s worth taking - a moment to make sure our particle works correctly and create a sketch + Before I get to the next step of making many particles, it’s worth taking + a moment to make sure the particle works correctly and create a sketch with one single Particle object. Here is the full code below, - with two small additions. We add a convenience function called - run() that simply calls both update() and - display() for us. In addition, we give the particle a random - initial velocity as well as a downward acceleration (to simulate gravity). + with one small addition–giving the particle a random + initial velocity as well as adding applyForce() (to + simulate gravity).

@@ -301,17 +308,24 @@
Example 4.1: A single particle
-let p;
+let particle;
 
 function setup() {
   createCanvas(640, 360);
-  p = new Particle(createVector(width / 2, 10));
+  particle = new Particle(width / 2, 10);
 }
 
 function draw() {
   background(255);
-  //{!4} Operating the single Particle
-  p.run();
+  //{!2} Operating the single Particle
+  particle.update();
+  particle.display();
+
+  //{!2} Applying a gravity force
+  let gravity = createVector(0, 0.1);
+  particle.applyForce(gravity);
+
+  //{!3} Checking the particle's state
   if (p.isDead()) {
     print("Particle dead!");
   }
@@ -319,20 +333,14 @@ 
Example 4.1: A single particle

 
 class Particle {
 
-  constructor(l) {
-    //{!2 .offset-top} For demonstration purposes we assign the Particle a random velocity and constant acceleration.
-    this.acceleration = createVector(0, 0.05);
+  constructor(x,y) {
+    this.position =  createVector(x, y);
+    //{.offset-top} For demonstration purposes the Particle a random velocity.
     this.velocity = createVector(random(-1, 1), random(-2, 0));
-    this.position = l.copy();
+    this.acceleration = createVector(0, 0);
     this.lifespan = 255.0;
   }
 
-  //{!4} Sometimes it’s convenient to have a “run” function that calls all the other functions we need.
-  run() {
-    this.update();
-    this.display();
-  }
-
   update() {
     this.velocity.add(this.acceleration);
     this.position.add(this.velocity);
@@ -342,16 +350,17 @@ 
Example 4.1: A single particle

   display() {
     stroke(0, this.lifespan);
     fill(0, this.lifespan);
-    ellipse(this.position.x, this.position.y, 8, 8);
+    circle(this.position.x, this.position.y, 8);
+  }
+
+  //{!3} Keeping the same physics model as with previous chapters
+  applyForce(force) {
+    this.acceleration.add(force);
   }
 
   //{!7} Is the Particle alive or dead?
   isDead() {
-    if (this.lifespan < 0.0) {
-      return true;
-    } else {
-      return false;
-    }
+    return (this.lifespan < 0.0);
   }
 }
@@ -359,8 +368,9 @@
Example 4.1: A single particle
Exercise 4.1

- Rewrite the example so that the particle can respond to force vectors - via an applyForce() function. + Create a run() function in the Particle class that handles + update(), display, and applyForce. What are the pros + and cons of this approach?

@@ -374,9 +384,9 @@
Exercise 4.2

- Now that we have a class to describe a single particle, we’re ready for - the next big step. How do we keep track of many particles, when we can’t - ensure exactly how many particles we might have at any given time? + Armed with a class to describe a single particle, I’m ready for + the next big step. How do you keep track of many particles, not knowing + exactly how many particles you might have at any given time?

@@ -392,36 +402,36 @@

4.3 The Array

- We will use the wonderful javascript array to hold our - Particle objects. Some particle systems might have a fixed - number of particles, and arrays are magnificently efficient in those - instances. p5 also offers append(), shorten(), - subset(), splice(), and other methods for - resizing arrays. However, for these examples, we’re going to take a more - plain javascript approach and use the methods directly available in the - javascipt class Array. + Thankfully, the wonderful JavaScript Array has all the functionality we need for + managing a + list of Particle objects. The the built-in JavaScript + functions available in the JavaScript class Array will allow me to add and + remove particles and manipulate the arrays in all sorts of powerful ways. + Although there are some cons to this approach, in order to keep the subsequent code examples + more concise, + I'm use a solution to Exercise 4.1 and assume a run() + method that handles all of the particle's functionality. JavaScript - Array - Documentation. + Array Documentation. 

-const total = 10;
-// we use let because later we will reassign the value of the particles array
+let total = 10;
+// Starting with an empty array
 let particles = [];
 
 function setup() {
-  //{!3} This is what we’re used to, accessing elements on the array via an index and brackets—[].
+  //{!3} This is what you’re probably used to, accessing elements on the array via an index and brackets—[].
   for (let i = 0; i < total; i++) {
-    parray[i] = new Particle();
+    particles[i] = new Particle(width/2, height/2);
   }
 }
 
 function draw() {
-  for (let i = 0; i < parray.length; i++) {
-    const p = parray[i];
-    p.run();
+  for (let i = 0; i < particles.length; i++) {
+    let particle = particles[i];
+    particle.run();
   }
 }
@@ -430,31 +440,29 @@

4.3 The Array

- This last for loop looks pretty similar to our code that - looped through a regular array by accessing each index. We initialize a - variable called i to 0 and count up by 1, accessing each - element of the Array until we get to the end. However, this - is a good time to mention the "for of loop” javascript, which - is a bit more concise. The "for of" loop works with arrays like this: + This last for loop demonstrates how to call functions on every element of an + array by accessing each index. I initialize a + variable i with value 0 and count up by 1, accessing each + element of the array until I reach the end. However, this + is a good time to mention the JavaScript "for of loop”, which + is a bit more concise. The "for of" loop works with arrays as follows: 

-let particles = [];
-
-for(let p of particles){
-  p.run();
+function draw() {
+  for (let particle of particles){
+    particle.run();
+  }
 }
-

- Let’s translate that. Say “for each” instead of “for” and say “in” instead - of “of”. Now you have: + Let’s translate that. Say “each” instead of “let” and “in” instead of “of”:

-

“For each Particle p in particles, run that Particle p!”

+

“For each particle in particles, update and display that particle!”

I know. You cannot contain your excitement. I can’t. I know it’s not @@ -462,29 +470,26 @@

4.3 The Array

-// This for of loop also works for regular arrays!
-for (let p of particles) {
-  p.run();
+for (let particle of particles){
+  particle.run();
 }

Simple, elegant, concise, lovely. Take a moment. Breathe. I have some bad - news. Yes, we love that "for of" loop and we will get to use it. But not - right now. Our particle system examples will require a feature that makes - using that loop impossible. Let’s continue. + news. Yes, I may love that "for of" loop and I will get to use it in examples. But not + just yet.

- The code we’ve written above doesn’t take advantage of the - ArrayList’s resizability, and it uses a fixed - size of 10. We need to design an example that fits with our particle - system scenario, where we emit a continuous stream of - Particle objects, adding one new particle with each cycle - through draw(). We’ll skip rehashing the - Particle class code here, as it doesn’t need to change. + The code I’ve written above doesn’t take advantage of the JavaScript's ability to remove + elements from an array. I need to design an example that fits with the particle + system scenario, where a continuous stream of particles are emitted, adding one new particle + with each cycle through draw(). I’ll skip + rehashing the Particle class code here, as it doesn’t need to change. + What we have so far is: 

@@ -492,17 +497,15 @@ 
4.3 The Array

 
 function setup() {
   createCanvas(640, 360);
-
 }
 
 function draw() {
   background(255);
   //{!1 .offset-top} A new Particle object is added to the array every cycle through draw().
-  particles.push(new Particle(createCanvas(width/2, 50)));
+  particles.push(new Particle(width/2, 50));
 
-  for (let i = 0; i < particles.length; i++) {
-    const p = particles[i];
-    p.run();
+  for (let particle of particles) {
+    particle.run();
   }
 }
@@ -510,75 +513,70 @@

4.3 The Array

Run the above code for a few minutes and you’ll start to see the frame rate slow down further and further until the program grinds to a halt (my tests yielded horrific performance after fifteen minutes). The issue of - course is that we are creating more and more particles without removing + course is that I am adding more and more particles without removing any.

- Fortunately, we can remove particles from our array using the index - position of the particle of interest. This is why we cannot use the new - enhanced for of loop we just learned; the enhanced loop - provides no means for deleting elements while iterating. Here, we can use - the Array class's .filter() function. The - .filter() function checks each item in the specified array - and removes the item(s) where the given condition is true. In this case, - the .filter() function will return the array whose particle’s - isDead() function returns false. + Fortunately, particles can be removed from the array referencing the index + position of the particle to be removed. This is why I cannot use the + enhanced for of loop; this loop + provides no means for deleting elements while iterating. Instead, I can use + the Array splice() method. (Yes, an array in JavaScript is actually + an object created from the class Array with many methods!). The + splice() method removes one or more elements from an array starting from a given + index. 

   for (let i = 0; i < particles.length; i++) {
-    const p = particles[i];
-    p.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
-  particles = particles.filter(particle => !particle.isDead());
-
+ let particle = particles[i]; + particle.run(); + if (particle.isDead()) { + // Remove one particle at index i + particles.splice(i, 1); + } + }

Although the above code will run just fine (and the program will never - grind to a halt), we have opened up a medium-sized can of worms. Whenever - we manipulate the contents of a list while iterating through that very - list, we can get ourselves into trouble. Take, for example, the following + grind to a halt), I have opened up a medium-sized can of worms. Whenever + you manipulate the contents of an array while iterating through that very + array, you can get into trouble. Take, for example, the following code. 

   for (let i = 0; i < particles.length; i++) {
-    const p = particles[i];
-    p.run();
+    let particle = particles[i];
+    particle.run();
     //{!1 .offset-top} Adding a new Particle to the list while iterating?
-    particles.push(new Particle(createVector(width/2, 50)));
+    particles.push(new Particle(width / 2, 50));
   }

This is a somewhat extreme example (with flawed logic), but it proves the - point. In the above case, for each particle in the list, we add a new - particle to the list (manipulating the length of the - Array). This will result in an infinite loop, as - i can never increment past the size of the - Array. + point. In the above case, for each particle in the array, I add a new + particle to that array (and so the length of the + array increases). This results in an infinite loop, as + i will never increment past the size of the array.

- While removing elements from the ArrayList during a loop + While removing elements from the array during a loop doesn’t cause the program to crash (as it does with adding), the problem is almost more insidious in that it leaves no evidence. To discover the - problem we must first establish an important fact. When an object is - removed from the Array, all elements are shifted one spot + flaw I must first establish an important fact. When an object is + removed from the array withsplice(), all elements are shifted one spot to the left. Note the diagram below where particle C (index 2) is removed. - Particles A and B keep the same index, while particles D and E shift from + particles A and B keep the same index, while particles D and E shift from 3 and 4 to 2 and 3, respectively.

@@ -588,43 +586,71 @@

4.3 The Array

- Let’s pretend we are i looping through the - Array. + Let’s pretend we are i looping through the array.

when i = 0 → Check particle A → Do not delete
when i = 1 → Check particle B → Do not delete
when i = 2 → Check particle C → Delete!
- Slide particles D and E back from slots 3 and 4 to 2 and 3
+ Slide particles D and E back from slots 3 and 4 to 2 and + 3
when i = 3 → Check particle E → Do not delete

- Notice the problem? We never checked particle D! When C was deleted from - slot #2, D moved into slot #2, but i has already moved on to slot # 3. - This is not a disaster, since particle D will get checked the next time - around. Still, the expectation is that we are writing code to iterate - through every single element of the Array. Skipping an - element is unacceptable. + Notice the problem? Particle D was never checked! When C was deleted from + slot #2, D moved into slot #2, but i has already moved on to slot #3. + This is not a total disaster, since particle D will get checked the next time + around. Still, the expectation is that the code should iterate + through every single element of the array. Skipping one is unacceptable!

- There are two solutions to this problem. The first solution is to simply - iterate through the Array backwards. If you are sliding + There are two solutions to this problem. The first solution is to + iterate through the array backwards. If you are sliding elements from right to left as elements are removed, it’s impossible to - skip an element by accident. Here’s how the code would look: + skip an element. Here’s how the code looks: 

   //{!1 .bold} Looping through the list backwards
-  for (let i = particles.length-1; i >= 0; i--) {
-    const p = particles[i];
-    p.run();
-  }
+  for (let i = particles.length - 1; i >= 0; i--) {
+    let particle = particles[i];
+    particle.run();
+    if (particle.isDead()) {
+      particles.splice(i, 1);
+    }
+  }
- particles = particles.filter(particle => !particle.isDead()); - + +

+ A second solution is to use something known as a “higher-order” function. A higher-order + function is one that receives another function as an argument (or returns a function). In the + case of JavaScript arrays there are many higher-order functions. A common one is + sort() which takes as its argument a function that defines how to compare two + elements of the array (therefore sorting the array according to that comparison.) Here, I can + make use of the higher order function filter(). filter() checks each + item in the specified array and keeps only the item(s) where the given condition is true + (removing those that return false). +

+ + 
+  particles = particles.filter(function(particle) {
+    // Keep particles that are not dead!
+    return !particle.isDead();
+  });
+ +

This is more commonly written using JavaScript's arrow notation. (To learn more, you can + watch this higher-order functions and arrow notation + video tutorial.)

+ + 
+  particles = particles.filter(particle => !particle.isDead());
+ +

For the purposes of this book, I am going to stick with the splice() method, but + I encourage you to explore writing your code with higher-order functions and arrow notation. +

ch04 ex02 @@ -645,15 +671,16 @@
Example 4.2: Array of particles
function draw() { background(255); - particles.push(new Particle(createVector(width / 2, 50))); + particles.push(new Particle(width / 2, 50); //{!1} Looping through the array backwards for deletion - for (let i = particles.length-1; i >= 0; i--) { - const p = particles[i]; - p.run(); + for (let i = particles.length - 1; i >= 0; i--) { + let particle = particles[i]; + particle.run(); + if (particle.isDead()) { + particles.splice(i, 1); + } } - - particles = particles.filter(particle => !particle.isDead()); } @@ -666,50 +693,48 @@

4.4 The Particle System Class

data-type="indexterm">

- OK. Now we’ve done two things. We’ve written a class to describe an - individual Particle object. We’ve conquered the - Array and used it to manage a list of many - Particle objects (with the ability to add and delete at - will). + OK. Now I’ve done two things. I’ve written a class to describe an + individual Particle object. I’ve conquered the + array and used it to manage a list of many particles + (with the ability to add and delete at will).

- We could stop here. However, one additional step we can and should take is + I could stop here. However, one additional step I can and should take is to write a class to describe the list of Particle objects - itself—the ParticleSystem class. This will allow us to remove - the bulky logic of looping through all particles from the main tab, as + itself—the ParticleSystem class. This allows me to remove + the bulky logic of looping through all particles from draw(), as well as open up the possibility of having more than one particle system.

- If you recall the goal we set at the beginning of this chapter, we wanted - our main javascript file to look like this: + If you recall the goal I set at the beginning of this chapter was to write code like: 

 //{!1} Just one wee ParticleSystem!
-let ps;
+let system;
 
 function setup() {
   createCanvas(640, 360);
-  ps = new ParticleSystem();
+  system = new ParticleSystem();
 }
 
 function draw() {
   background(255);
-  ps.run();
+  system.run();
 }

Let’s take the code from Example 4.2 and review a bit of object-oriented - programming, looking at how each piece from the main tab can fit into the - ParticleSystem class. + programming, looking at how each piece setup() and draw() can fit + into the ParticleSystem class.

- + @@ -728,13 +753,13 @@

4.4 The Particle System Class

- for (let i = particles.length-1; i >= 0; i--) { - const p = particles[i]; - p.run(); - } - - particles = particles.filter(particle => !particle.isDead()); - + for (let i = particles.length - 1; i >= 0; i--) { + let particles = particles[i]; + particle.run(); + if (particle.isDead()) { + particles.splice(i, 1); + } + } } @@ -751,13 +776,13 @@

4.4 The Particle System Class

} run() { - for (let i = this.particles.length-1; i >= 0; i--) { - const p = this.particles[i]; - p.run(); - } - - this.particles = this.particles.filter(particle => !particle.isDead()); - + 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); + } + } } } @@ -770,11 +795,11 @@

4.4 The Particle System Class

data-type="indexterm">

- We could also add some new features to the particle system itself. For + I could also add new features to the particle system itself. For example, it might be useful for the ParticleSystem class to - keep track of an origin point where particles are made. This fits in with + keep track of an origin point where particles are made. This fits with the idea of a particle system being an “emitter,” a place where particles - are born and sent out into the world. The origin point should be + are born and sent out into the world. The origin point could be initialized in the constructor.

@@ -785,22 +810,22 @@
Example 4.3: Simple Single Particle System
 class ParticleSystem {
 
-  ParticleSystem(position) {
+  ParticleSystem(x, y) {
     //{!1 .bold} This particular ParticleSystem implementation includes an origin point where each Particle begins.
-    this.origin = position.copy();
+    this.origin = createVector(x, y);
     this.particles = [];
   }
 
   addParticle() {
     //{!1 .bold}  The origin is passed to each Particle when it is added.
-    this.particles.add(new Particle(this.origin));
+    this.particles.add(new Particle(origin.x, origin.y));
   }
Exercise 4.3

- Make the origin point move dynamically. Have the particles emit from the + Make the origin point move dynamically. Emit particles from the mouse position or use the concepts of velocity and acceleration to make the system move autonomously.

@@ -825,26 +850,27 @@

4.5 A System of Systems

data-type="indexterm">

- Let’s review for a moment where we are. We know how to talk about an - individual Particle object. We also know how to talk about a + Let’s take a moment to recap what I’ve covered so far. I described an + individual Particle object. I also described a system of Particle objects, and this we call a “particle - system.” And we’ve defined a particle system as a collection of + system.” And I’ve defined a particle system as a collection of independent objects. But isn’t a particle system itself an object? If - that’s the case (which it is), there’s no reason why we couldn’t also have + that’s the case (which it is), there’s no reason why I couldn’t also build a collection of many particle systems, i.e. a system of systems.

- This line of thinking could of course take us even further, and you might + This line of thinking could of course take you even further, and you might lock yourself in a basement for days sketching out a diagram of a system of systems of systems of systems of systems of systems. Of systems. After - all, this is how the world works. An organ is a system of cells, a human + all, I could create a description of the world in this way. + An organ is a system of cells, a human body is a system of organs, a neighborhood is a system of human bodies, a city is a system of neighborhoods, and so on and so forth. While this is - an interesting road to travel down, it’s a bit beyond where we need to be - right now. It is, however, quite useful to know how to write a p5 sketch + an interesting road to travel down, it’s a bit beyond where I’d like to be + right now. It is, however, quite useful to know how to write a p5.js sketch that keeps track of many particle systems, each of which keep track of - many particles. Let’s take the following scenario. + many particles. Take the following scenario.

You start with a blank screen.

@@ -875,9 +901,9 @@

4.5 A System of Systems

- In Example 4.3, we stored a single + In Example 4.3, I stored a single reference to a ParticleSystem object in the variable - ps. + system. 

@@ -885,19 +911,19 @@ 
4.5 A System of Systems

 
 function setup() {
   createCanvas(640, 360);
-  ps = new ParticleSystem(1, createVector(width/2, 50));
+  system = new ParticleSystem(1, createVector(width/2, 50));
 }
 
 function draw() {
   background(255);
-  ps.run();
-  ps.addParticle();
+  system.run();
+  system.addParticle();
 }

- For this new example, what we want to do instead is create an + For this new example, what I want to do instead is create an Array to keep track of multiple instances of particle - systems. When the program starts, i.e. in setup(), the + systems themselves. When the sketch begins, i.e. in setup(), the Array is empty.

@@ -925,7 +951,7 @@
Example 4.4: System of systems

And in draw(), instead of referencing a single - ParticleSystem object, we now look through all the systems in + ParticleSystem object, I can now iterate over all the systems in the Array and call run() on each of them.

@@ -933,9 +959,9 @@
Example 4.4: System of systems
function draw() { background(255); //{!4} Since we aren’t deleting elements, we can use the for of loop! - for (let ps of systems) { - ps.run(); - ps.addParticle(); + for (let system of systems) { + system.run(); + system.addParticle(); } } @@ -944,9 +970,8 @@
Exercise 4.5

Rewrite Example 4.4 so that each particle system doesn’t live forever. - When a particle system is empty (i.e. has no particles left in its - ArrayList), remove it from the ArrayList - systems. + When a particle system is empty (i.e. has no particles left), remove it from + the array systems.

@@ -955,9 +980,8 @@
Exercise 4.6

Create a simulation of an object shattering into many pieces. How can - you turn one large shape into many small particles? What if there are - several large shapes on the screen and they shatter when you click on - them? + you turn one large shape into many small particles? Can you create + several large shapes on the screen that each shatter clicked on?

@@ -978,8 +1002,8 @@

4.6 Inheritance and Polymorphism: An Introduction

polymorphism in your programming life before this book. After all, they are two of the three fundamental principles behind the theory of object-oriented programming (the other being encapsulation). If - you’ve read other p5 or Java programming books, chances are it’s been - covered. My beginner text, Learning p5, has close to an entire + you’ve read other programming books, chances are it’s been + covered. My beginner text, Learning Processing, has close to an entire chapter (#22) dedicated to these two topics.

@@ -988,15 +1012,15 @@

4.6 Inheritance and Polymorphism: An Introduction

never had a reason to really use inheritance and polymorphism. If this is true, you’ve come to the right place. Without these two topics, your ability to program a variety of particles and particle systems is - extremely limited. (In the next chapter, we’ll also see how understanding - these topics will help us to use physics libraries.) + extremely limited. (In the next chapter, I’ll also demonstrate how understanding + these topics will help you use physics libraries.)

Imagine the following. It’s a Saturday morning, you’ve just gone out for a lovely jog, had a delicious bowl of cereal, and are sitting quietly at your computer with a cup of warm chamomile tea. It’s your old friend So - and So’s birthday and you’ve decided you’d like to make a greeting card in + and So’s birthday and you’ve decided you’d like to make a greeting card with p5. How about some confetti for a birthday? Purple confetti, pink confetti, star-shaped confetti, square confetti, fast confetti, fluttery confetti, etc. All of these pieces of confetti with different appearances @@ -1004,11 +1028,11 @@

4.6 Inheritance and Polymorphism: An Introduction

- What we’ve got here is clearly a particle system—a collection of - individual pieces of confetti (i.e. particles). We might be able to - cleverly design our Particle class to have variables that - store its color, shape, behavior, etc. And perhaps we initialize the - values of these variables randomly. But what if your particles are + What you’ve got here is clearly a particle system—a collection of + individual pieces of confetti (i.e. particles). You might be able to + cleverly design a Particle class to have variables that + store color, shape, behavior, etc. For a variety, you initalize those + variables with random values. But what if your particles are drastically different? This could become very messy, having all sorts of code for different ways of being a particle in the same class. Well, you might consider doing the following: @@ -1028,12 +1052,12 @@

4.6 Inheritance and Polymorphism: An Introduction

}

- This is a nice solution: we have three different classes to describe the - different kinds of pieces of confetti that could be part of our particle + This is a nice solution: create three different classes to describe the + different kinds of pieces of confetti that are part of your particle system. The ParticleSystem constructor could then have some code to pick randomly from the three classes when filling the - ArrayList. Note that this probabilistic method is the same - one we employed in our random walk examples in the + array. Note that this probabilistic method is the same + one I employed in the random walk examples in the Introduction.

@@ -1043,7 +1067,7 @@

4.6 Inheritance and Polymorphism: An Introduction

this.particles = []; for (let i = 0; i < num; i++) { - const r = random(1); + let r = random(1); //{!7} Randomly picking a "kind" of particle if (r < 0.33) { this.particles.add(new HappyConfetti()); @@ -1056,14 +1080,15 @@

4.6 Inheritance and Polymorphism: An Introduction

}

- OK, we now need to pause for a moment. We’ve done nothing wrong. All we - wanted to do was wish our friend a happy birthday and enjoy writing some + OK, I need to pause for a moment. You’ve done nothing wrong. All you + wanted to do was wish your friend a happy birthday and enjoy writing some code. But while the reasoning behind the above approach is quite sound, - we’ve opened up one major problem. + there’s a problem.

- Problem #1: Aren’t we going to be copying/pasting a lot of code + Aren’t you + going to be copying/pasting a lot of code between the different “confetti” classes?

@@ -1071,17 +1096,17 @@

4.6 Inheritance and Polymorphism: An Introduction

- Yes. Even though our kinds of particles are different enough to merit our + Yes. Even though the kinds of particles are different enough to merit our breaking them out into separate classes, there is still a ton of code that - they will likely share. They’ll all have p5.Vectors to keep track of + they will likely share. They’ll all have vectors to keep track of position, velocity, and acceleration; an - update() function that implements our motion algorithm; etc. + update() function that implements the motion algorithm; etc.

This is where inheritance comes in. Inheritance - allows us to write a class that inherits variables and functions + allows you to write a class that inherits variables and functions from another class, all the while implementing its own custom features.

@@ -1096,7 +1121,7 @@

4.7 Inheritance Basics

Let’s take a different example, the world of animals: dogs, cats, monkeys, - pandas, wombats, and sea nettles. We’ll start by programming a + pandas, wombats, and sea nettles. I’ll start by coding a Dog class. A Dog object will have an age variable (an integer), as well as eat(), sleep(), and bark() functions. @@ -1106,7 +1131,6 @@

4.7 Inheritance Basics

class Dog { constructor() { - // Dogs and cats have the same variables (age) and functions (eat, sleep). this.age = 0; } @@ -1118,7 +1142,6 @@

4.7 Inheritance Basics

print("Zzzzzz"); } - //{!3} A unique function for barking. bark() { print("WOOF"); } @@ -1129,6 +1152,7 @@

4.7 Inheritance Basics

 class Cat {
 
+  // Dogs and cats have the same variables (age) and functions (eat, sleep).
   constructor() {
     this.age = 0;
   }
@@ -1141,16 +1165,17 @@ 
4.7 Inheritance Basics

     print("Zzzzzz");
   }
 
+  //{!3} No bark(), instead a unique function for meowing.
   meow() {
     print("MEOW!");
   }
 }

- As we rewrite the same code for fish, horses, koalas, and lemurs, this - process will become rather tedious. Instead, let’s develop a generic + As I move on to rewriting the same code for fish, horses, koalas, and lemurs, this + process will become rather tedious. A better solution is to develop a generic Animal class that can describe any type of animal. All - animals eat and sleep, after all. We could then say: + animals eat and sleep, after all. I could then say:

Array in the main javascript fileArray in setup() and draw() Array in the ParticleSystem class
- - + +
applyForce()applyRepeller()applyForce(force)applyRepeller(repeller) 
-applyForce(f) {
+applyForce(force) {
   for (let p of this.particles) {
-    p.applyForce(f);
+    p.applyForce(force);
   }
 }
 
-applyRepeller(r) {
+applyRepeller(repeller) {
   for (let p of particles) {
-    const force = r.repel(p);
+    let force = repeller.repel(p);
     p.applyForce(force);
   }
 }
@@ -1954,35 +1978,34 @@ 
4.12 Particle Systems with Repellers

- The functions are almost identical. There are only two differences. One we + The functions are almost identical. There are only two differences. One I mentioned before—a Repeller object is the argument, not a - p5.Vector. The second difference is the important one. We must + p5.Vector. The second difference is the more important one. I must calculate a custom p5.Vector force for each and every particle and apply that force. How is that force calculated? In a function called - repel(), which is the inverse of the - attract() function we wrote for the + repel(), the inverse of the + attract() function from the Attractor class. 

   // All the same steps we had to calculate an attractive force, only pointing in the opposite direction.
-  repel(p) {
+  repel(particle) {
     // 1) Get force direction.
-    const dir = p5.Vector.sub(this.position,p.position);
+    let dir = p5.Vector.sub(this.position, particle.position);
     //{!2} 2) Get distance (constrain distance).
     let d = dir.mag();
     d = constrain(d, 5, 100);
-    dir.normalize();
     // 3) Calculate magnitude.
-    const force = -1 * this.G / (d * d);
+    let strength = -1 * this.G / (d * d);
     // 4) Make a vector out of direction and magnitude.
-    dir.mult(force);
+    dir.setMag(strength);
     return dir;
   }

Notice how throughout this entire process of adding a repeller to the - environment, we’ve never once considered editing the + environment, I never once considered editing the Particle class itself. A particle doesn’t actually have to know anything about the details of its environment; it simply needs to manage its position, velocity, and acceleration, as well as have the @@ -1990,7 +2013,7 @@

4.12 Particle Systems with Repellers

- So we can now look at this example in its entirety, again leaving out the + Now look at this example in its entirety, again leaving out the Particle class, which hasn’t changed.

@@ -2005,25 +2028,25 @@
Example 4.7: ParticleSystem with repeller
 // One ParticleSystem
-let ps;
+let system;
 //{!1} One repeller
 let repeller;
 
 function setup() {
   createCanvas(640, 360);
-  ps = new ParticleSystem(createVector(width/2, 50));
+  system = new ParticleSystem(createVector(width/2, 50));
   repeller = new Repeller(width/2 - 20, height/2);
 }
 
 function draw() {
   background(100);
-  ps.addParticle();
+  system.addParticle();
   // We’re applying a universal gravity.
-  const gravity = createVector(0,0.1);
-  ps.applyForce(gravity);
+  let gravity = createVector(0, 0.1);
+  system.applyForce(gravity);
   //{!1} Applying the repeller
-  ps.applyRepeller(repeller);
-  ps.run();
+  system.applyRepeller(repeller);
+  system.run();
   repeller.display();
 }
 
@@ -2041,27 +2064,28 @@ 
Example 4.7: ParticleSystem with repeller

   }
 
   //{!4} Applying a force as a p5.Vector
-  applyForce(f) {
+  applyForce(force) {
     for (let p of this.particles) {
-      p.applyForce(f);
+      p.applyForce(force);
     }
   }
 
-  applyRepeller(r) {
+  applyRepeller(repeller) {
     //{!4} Calculating a force for each Particle based on a Repeller
     for (let p of this.particles) {
-      const force = r.repel(p);
+      let force = repeller.repel(p);
       p.applyForce(force);
     }
   }
 
   run() {
-    for (let i = this.particles.length-1; i >= 0; i--) {
+    for (let i = this.particles.length - 1; i >= 0; i--) {
       const p = this.particles[i];
       p.run();
+      if (p.isDead()) {
+        this.particles.splice(i, 1);
+      }
     }
-
-    this.particles = this.particles.filter(particle => !particle.isDead());
   }
 }
 
@@ -2077,16 +2101,15 @@ 
Example 4.7: ParticleSystem with repeller

   display() {
     stroke(255);
     fill(255);
-    ellipse(this.position.x, this.position.y, this.r*2, this.r*2);
+    ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
   }
 
-  repel(p) {
+  repel(particle) {
     //{!7 .code-wide} This is the same repel algorithm we used in Chapter 2: forces based on gravitational attraction.
-    const dir = p5.Vector.sub(this.position,p.position);
-    let d = dir.mag();
-    dir.normalize();
-    d = constrain(d,5,100);
-    const force = -1 * this.strength / (d * d);
+    let dir = p5.Vector.sub(this.position, particle.position);
+    let distance = dir.mag();
+    distance = constrain(d, 5, 100);
+    let force = -1 * this.strength / (distance * distance);
     dir.mult(force);
     return dir;
   }
@@ -2105,7 +2128,7 @@ 
Exercise 4.10

 
       

         Create a particle system in which each particle responds to every other
-        particle. (Note that we’ll be going through this in detail in Chapter
+        particle. (Note that I’ll be going through this in detail in Chapter
         6.)
       

     
@@ -2119,17 +2142,16 @@ 
4.13 Image Textures and Additive Blending

       data-type="indexterm">
 
     

-      Even though this book is really about behaviors and algorithms rather than
-      computer graphics and design, I don’t think we would be able to live with
-      ourselves if we went through a discussion of particle systems and never
+      Even though this book is almost exclusively focused on behaviors and algorithms rather than
+      computer graphics and design, I don’t think I would be able to live with
+      myself if I finished a discussion of particle systems and never
       once looked at an example that involves texturing each particle with an
-      image. The way you choose to draw a particle is a big part of the puzzle
+      image. The way you choose to draw a particle is the “juice,” a key piece of the puzzle
       in terms of designing certain types of visual effects.
     

 
     

-      Let’s try to create a smoke simulation in p5. Take a look at the following
-      two images:
+      Consider a smoke simulation. Take a look at the following two images:
     

 
     

@@ -2179,16 +2201,16 @@ 
Example 4.8: Image texture particle system

     
 let img;

 
-    
Load the image in setup().

+    
Load the image in preload().

 
     
-function setup() {
+function preload() {
   //{!1} Loading the PNG
   img = loadImage("texture.png");
 }

 
     

-      And when it comes time to draw the particle, we’ll use the image reference
+      And when it comes time to draw the particle, use the image variable
       instead of drawing an ellipse or rectangle.
     

 
@@ -2207,23 +2229,22 @@ 
Example 4.8: Image texture particle system

 
     

       Incidentally, this smoke example is a nice excuse to revisit the Gaussian
-      number distributions from the Introduction.
-      To make the smoke appear a bit more realistic, we don’t want to launch all
-      the particles in a purely random direction. Instead, by creating initial
+      distributions from the Introduction.
+      To make the smoke appear a bit more realistic, instead of launching allow
+      the particles in a purely random direction initial
       velocity vectors mostly around a mean value (with a lower probability of
-      outliers), we’ll get an effect that appears less fountain-like and more
+      outliers) can produce an effect that appears less fountain-like and more
       like smoke (or fire).
     

 
     

-      Assuming a Random object called “generator”, we could create
-      initial velocities as follows:
+      Using randomGaussian() velocities can be intialized as follows:
     

 
     
-    const vx = randomGaussian() * 0.3;
-    const vy = randomGaussian() * 0.3 - 1.0;
-    const vel = createVector(vx, vy);

+    let vx = randomGaussian() * 0.3;
+    let vy = randomGaussian() * 0.3 - 1.0;
+    let vel = createVector(vx, vy);

Finally, in this example, a wind force is applied to the smoke mapped from @@ -2235,10 +2256,10 @@

Example 4.8: Image texture particle system
background(0); //{!2} Wind force direction based on mouseX. - const dx = map(mouseX, 0, width, -0.2, 0.2); - const wind = createVector(dx, 0); - ps.applyForce(wind); - ps.run(); + let dx = map(mouseX, 0, width, -0.2, 0.2); + let wind = createVector(dx, 0); + system.applyForce(wind); + system.run(); //{!3} Two particles are added each cycle through draw(). for (let i = 0; i < 2; i++) { ps.addParticle(); @@ -2271,12 +2292,12 @@
Exercise 4.12

Finally, it’s worth noting that there are many different algorithms for blending colors in computer graphics. These are often referred to as - “blend modes.” By default, when we draw something on top of something else - in p5, we only see the top layer—this is commonly referred to as a - “normal” blend mode. When the pixels have alpha transparency (as they do + “blend modes.” By default, when you draw something on top of something else + in p5, you only see the top layer—this is the default + “blend” behavior. When pixels have alpha transparency (as they do in the smoke example), p5 uses an alpha compositing algorithm that combines a percentage of the background pixels with the new foreground - pixels based on the alpha values. + pixels based on those alpha values themselves.

@@ -2287,8 +2308,8 @@
Exercise 4.12

However, it’s possible to draw using other blend modes, and a much loved - blend mode for particle systems is “additive.” Additive blending in p5 was - pioneered by + blend mode for particle systems is “additive.” Additive blending in Processing with + particle systems was pioneered by Robert Hodgin in his famous particle system and forces exploration, Magnetosphere, which later became the iTunes visualizer. For more see: @@ -2296,8 +2317,8 @@

Exercise 4.12

- Additive blending is in fact one of the simplest blend algorithms and - involves adding the pixel values of one layer to another (capping all + Additive blending is one of the simpler blend algorithms and + involves simply adding the pixel values of one layer to another (capping all values at 255 of course). This results in a space-age glow effect due to the colors getting brighter and brighter with more layers.

@@ -2326,12 +2347,15 @@
Example 4.9: Additive blending
//{!1} Additive blending blendMode(ADD); - // Note that the “glowing” effect of additive + //{!1} Also need to clear() since the background is added and does not cover what was previously drawn. + clear(); + + // Also note that the “glowing” effect of additive // blending will not work with a white // (or very bright) background. background(0); - // All your other particle stuff would go here. + // All other particle stuff goes here. } @@ -2366,14 +2390,14 @@

The Ecosystem Project

they interact with each other? Can you use inheritance and polymorphism to create a variety of creatures, derived from the same code base? Develop a methodology for how they compete for resources (for example, - food). Can you track a creature’s “health” much like we tracked a + food). Can you track a creature’s “health” much like a particle’s lifespan, removing creatures when appropriate? What rules can - you incorporate to control how creatures are born? + you incorporate to control how creatures are born into the system?

(Also, you might consider using a particle system itself in the design - of a creature. What happens if your emitter is tied to the creature’s + of a creature. What happens if an emitter is tied to the creature’s position?)