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.

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

Lesson 8: Particle Systems

# Intro to particle systems

In 1982, William T. Reeves, a researcher at Lucasfilm Ltd., was working on the film Star Trek II: The Wrath of Khan. Much of the movie revolves around the Genesis Device, a torpedo that when shot at a barren, lifeless planet has the ability to reorganize matter and create a habitable world for colonization. During the sequence, a wall of fire ripples over the planet while it is being “terraformed":
Genesis effectSee video transcript
The term particle system, an incredibly common and useful technique in computer graphics, was coined in the creation of this particular effect.
“A particle system is a collection of many many minute particles that together represent a fuzzy object. Over a period of time, particles are generated into a system, move and change from within the system, and die from the system.” —William Reeves, "Particle Systems—A Technique for Modeling a Class of Fuzzy Objects," ACM Transactions on Graphics 2:2 (April 1983), 92.
Since the early 1980s, particle systems have been used in countless video games, animations, digital art pieces, and installations to model various irregular types of natural phenomena, such as fire, smoke, waterfalls, fog, grass, bubbles, and so on.
This section will be dedicated to looking at implementation strategies for programming a particle system. How do we organize our code? Where do we 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 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 render the particles and compute behaviors, you can achieve a variety of effects.
As the quote described above, a particle system is a collection of simple objects. We've already dealt with programming collections of objects before - like arrays of Movers that simulate bouncing balls. But for particle systems, our collections are more complex. The collections will range in size: sometimes there will be zero particles, sometimes ten, sometimes ten thousand.  The collections themselves will have behavior and properties, not just the particles they're made up of. Our goal is to be able to write a program that looks like this:
``````var ps = new ParticleSystem();

draw = function() {
background(255, 255, 255);
ps.run();
};``````
No single particle is referenced in that code, yet the result will be full of particles flying all over the screen. We'll create programs with multiple object types, and objects that keep track of other collections of objects, which will help us create powerful particle systems but also prepare us to write more powerful programs generally.
In figuring out how to program particle systems, we'll use two 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 array that contains objects of different types. This way, a particle system need not only be a system of a single type of particle.
We'll look at the most typical uses of particle systems in this section, but the fact that the particles in this chapter look or behave a certain way should not limit your imagination. Just because these particle systems tend to look sparkly, fly forward, and fall with gravity doesn’t mean that those are the characteristics yours should have. 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.

## Want to join the conversation?

• don't the use particle systems in the movie 'Inside Out' to make the emotions look like their made of light?
• They do. The particles they used are for lighting though, so it requires extra math.
• None of this animation seems to work when I try to use it in a webpage. in fact none of this code seems to work anywhere but in this on this webpage, is there some kind of change that needs to be made to the code so it will work other places?
• What does `instanceOf ` mean?
• The `instanceof` keyword generates a boolean indicating whether or not a value was created by the specified Object constructor.
``var A = function() {};var B = function() {};var a = new A();var b = new B();println(a instanceof A);println(a instanceof B);``
• Has anyone made a program here on KA similar to the Genesis Effect in the video above?
• There's an example of a 3D ball object using some pretty clever stuff with lines. Maybe someone could slap a texture of some sort on it to make the planet? Also, I realize I'm like a year late; I couldn't help myself.
• so, if you use this, does your code automatically look fuzzy?
• It depends on what your definition of "fuzzy" is. The video is fuzzy because it's old. This tutorial teaches you to make something like this: https://www.khanacademy.org/computer-programming/program/6255462600146944. So, if you consider that fuzzy, then I guess your program looks fuzzy. The only time the code itself would appear to be fuzzy is if your screen has low resolution.
• So how does the particle sytem automatically run as it was put in your explanation:

var ps = new ParticleSystem();
draw = function() {
background(255, 255, 255);
ps.run();
};

Is particleSystem() an object?