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?
• sure, just put a new particlesystem in systems. Though you probably have stopped using khanacademy by now.
• ``// 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,
• It wants you to add the code to add a particle system initially, so you don't have to click on the screen each time you restart:

`var systems = []; systems.push(new ParticleSystem(new Vector(width/2, height/4)));`
• 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?
• *from the documentation:*
colorMode(MODE)

Changes the way that color values are interpreted when set by fill()/stroke()/background().
Parameters: MODE Either RGB or HSB. The default is RGB.

HSB stands for Hue, saturation, brightness while RGB stands for red, green, blue
• 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.
• Unfortunately, that didn't work for me...
``    colorMode(HSB);    var hue = (100-this.timeToLive) * 0.4;    fill(hue, 255, 255, this.timeToLive);``

I've now solved this step at least 4 different ways. Nothing is accepted though.
• (to the khan team) can i post a series of videos on how to use the khan academy javascript?
You're free to post videos of you programming with Khan Academy, as long as you let everyone know that you're not affiliated with the Khan Academy Team in any way, shape, or form. :)
``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();    }};``
• When I run this, Yoko Oh Noes says "Uncaught TypeError: position.get is not a function". Clicking on "Show me where" takes me the `ParticleSystem` constructor. It is easy to conclude that the argument passed to the function is not a `PVector`.