If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

## Computer programming - JavaScript and the web

### Course: Computer programming - JavaScript and the web>Unit 5

Lesson 8: Particle Systems

# Systems of particle systems

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 system of `Particle` objects, and this we call a “particle system.” And we’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 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 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 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 program that keeps track of many particle systems, each of which keep track of many particles. Let’s take the following scenario:
• You click the mouse and generate a particle system at the mouse’s location.
• Each time you click the mouse, a new particle system is created at the mouse’s location.
Try it out yourself:
How would we accomplish this in code? In the previous article, we stored a single reference to a `ParticleSystem` object in the variable `ps`.
``````var ps = new ParticleSystem(new PVector(width/2, 50));

draw = function() {
background(50, 50, 50);
ps.run();
};``````
Now that we have multiple systems, a potentially ever increasing number, we don't want to store them in individually named variables. Instead, we'll use an array to keep track of all the systems. We'll start it as empty when the program begins:
``var systems = [];``
Whenever the mouse is pressed, a new `ParticleSystem` object is created and pushed onto the array:
``````mousePressed = function() {
systems.push(new ParticleSystem(new PVector(mouseX, mouseY)));
};``````
And in `draw()`, instead of referencing a single `ParticleSystem` object, we now look through all the systems in the array and call `run()` on each of them.
``````draw = function() {
background(50, 50, 50);
for(var i = 0; i < systems.length; i++){
systems[i].run();
}
};``````
Now, try it yourself again, with the code we've written:

## Want to join the conversation?

• Can someone help me out on step 1 of the next challenge? • ``// We start off with an empty systems arrayvar systems = [];// We fill up the leaves array with positionsvar leaves = [];for (var i = 0; i < 100; i++) {    leaves.push(new PVector(random(0, width), random(0, height)));}mouseClicked = function() {    systems.push(new ParticleSystem(new PVector(mouseX, mouseY)));};draw = function() {    colorMode(RGB);    background(66, 57, 11);        for (var i = 0; i < leaves.length; i++) {        image(getImage("avatars/leaf-orange"), leaves[i].x, leaves[i].y, 30, 30);    }    for (var i = 0; i < systems.length; i++){        systems[i].addParticle();        systems[i].run();    }};``

``mouseClicked = function() {    systems.push(new ParticleSystem(new PVector(mouseX, mouseY)));``

is this a technical issue or am i missing something, • My fire turns kinda yellow, but i have no idea what the grader wants :/ • On the Fire Starter Challenge, Step Two, it asks for color in HSB. What's that? • What range of colors do I need to map to? I'm using this, which seems like it should be okay.
var hue = abs(1-this.timeToLive/100)*50;

UPDATE: The grader wants a simpler formula. The max time to live is 100 and the time to live counts down by two at each time step. Subtract these two values and scale the result. • (to the khan team) can i post a series of videos on how to use the khan academy javascript? • I've seen a lot of questions asking about solving step 2. Has anyone managed to solve it according to the grader? If so, could you please post the code? Thanks in advance.   ``angleMode = "radians";var Particle = function(position) {    this.acceleration = new PVector(0, 0.05);    this.velocity = new PVector(random(-1, 1), random(-1, 0));    this.position = position.get();    this.timeToLive = 100;};Particle.prototype.run = function() {    this.update();    this.display();};Particle.prototype.update = function(){    this.velocity.add(this.acceleration);    this.position.add(this.velocity);    this.timeToLive -= 2;};Particle.prototype.display = function() {    noStroke();    fill(255, 255, 255, this.timeToLive);    ellipse(this.position.x, this.position.y, 12, 12);};Particle.prototype.isDead = function() {    if (this.timeToLive < 0) {        return true;    } else {        return false;    }};var ParticleSystem = function(position) {    this.origin = position.get();    this.particles = [];};ParticleSystem.prototype.addParticle = function() {    this.particles.push(new Particle(this.origin));};ParticleSystem.prototype.run = function() {    for (var i = this.particles.length-1; i >= 0; i--) {        var p = this.particles[i];        p.run();        if (p.isDead()) {            this.particles.splice(i, 1);        }    }};// We start off with an empty systems arrayvar systems = [];systems.push(new ParticleSystem(new PVector(width/2, height/2)));// We fill up the leaves array with positionsvar leaves = [];for (var i = 0; i < 100; i++) {    leaves.push(new ParticleSystem(random(0, width), random(0, height)));}draw = function() {    colorMode(RGB);    background(66, 57, 11);        for (var i = 0; i < leaves.length; i++) {        image(getImage("avatars/leaf-orange"), leaves[i].x, leaves[i].y, 30, 30);    }    for (var i = 0; i < systems.length; i++){        systems[i].addParticle();        systems[i].run();    }};`` 