Revisemos por un momento en dónde estamos. Sabemos cómo hablar acerca de un objeto Particle individual. También sabemos cómo hablar de un sistema de objetos Particle y a esto lo llamamos un “sistema de partículas”. Y definimos un sistema de partículas como una colección de objetos independientes. ¿Pero un sistema de partículas no es en sí mismo un objeto? Si ese es el caso (que lo es), no hay ninguna razón por la cual no podríamos tener también una colección de sistemas de muchas partículas, es decir, un sistema de sistemas.
Esta línea de pensamiento claro que nos podría llevar aún más lejos, y tal vez te encierres en un sótano durante días haciendo un esbozo de un diagrama de un sistema de sistemas de sistemas de sistemas de sistemas de sistemas. De sistemas. Después de todo, así es como funciona el mundo. Un órgano es un sistema de células, un cuerpo humano es un sistema de órganos, un vecindario es un sistema de cuerpos humanos, una ciudad es un sistema de vecindarios, y así sucesivamente. Mientras que este es un camino interesante para recorrer, es un poco más lejos de donde tenemos que estar en este momento. No obstante, es muy útil saber cómo escribir un programa que lleve un registro de muchos sistemas de partículas, cada uno de los cuales lleva un registro de muchas partículas. Tomemos el siguiente escenario:
  • Empiezas con una pantalla en blanco.
  • Haces clic con el ratón y generas un sistema de partículas en la posición del ratón.
  • Cada vez que haces clic en el ratón, se crea un nuevo sistema de partículas en la posición del ratón.
Pruébalo tú mismo:
¿Cómo podríamos lograr esto en código? En el artículo anterior, almacenamos una sola referencia a un objeto ParticleSystem en la variable ps.

var ps = new ParticleSystem(new PVector(width/2, 50));

draw = function() {
  background(50, 50, 50);
  ps.addParticle();
  ps.run();
};
Ahora que tenemos múltiples sistemas, un número potencialmente siempre creciente, no queremos almacenarlos en variables individuales. En su lugar, vamos a utilizar un arreglo para llevar el registro de todos los sistemas. Vamos a iniciarlo vacío cuando se inicie el programa:
var systems = [];
Cada vez que se presione el ratón, se crea un nuevo objeto ParticleSystem y se agrega al arreglo:
mousePressed = function() {
  systems.push(new ParticleSystem(new PVector(mouseX, mouseY)));
};
Y en draw(), en lugar de hacer referencia a un solo objeto ParticleSystem, ahora vemos a todos los sistemas del arreglo y llamamos run() sobre cada uno de ellos.
draw = function() {
  background(50, 50, 50);
  for(var i = 0; i < systems.length; i++){
    systems[i].addParticle();
    systems[i].run();
  }
};
Ahora, pruébalo otra vez, con el código que escribimos: