Hello, welcome to chapter 4 of The Nature of Code.
So this chapter is all about particle systems.
And here's the good news for you.
I am not introducing any new concepts, really.
I mean, there is the new concept of the particle system.
But ultimately, we're just reusing all the code
from the previous chapters and looking at ways
to organize that code more efficiently and effectively.
So what is a particle system?
In 1982, William T. Reeves, a researcher at Lucasfilm,
was working on the movie Star Trek II--
The Wrath of Khan.
Much of the movie revolves around the genesis device,
a torpedo that one 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. .
The term particle system was coined in the creation
of this particular effect.
Fascinating.
Thanks, Spock.
If, like me, you find the history of computer graphics
fascinating, I would really encourage
you to go read the original 1983 paper, "Particle Systems--
A Technique for Modeling a Class of Fuzzy Objects."
Everything from the first two chapters of Nature of Code,
you'll find there in that paper.
Position, velocity, that's what makes a particle as
long as all the other sort of techniques and tricks
that they used in creating this effect in the film
Wrath of Khan.
Getting started with the code, I don't really have a lot of work
to do.
I have most everything that makes a particle from my mover
class in chapter 2.
But I do want to look at this list of attributes
and see what I need to add, sort of focusing in on this number
7, the lifetime property.
I should also mention that I have actually made
this video before in a way.
I have a coding challenge called simple particle system.
And I would encourage you to review that.
But that video didn't make use of the concepts
of vectors and forces.
So what I want to do here is take
the same idea of a simple particle system
but bring in the examples from chapters 1
and 2 of The Nature of Code.
I'm going to start with this example
from the first video of chapter 2.
So this is just a simple example with one mover
object responding to wind and gravity forces.
And the very first thing I'm going to do
is just change the name from mover to particle.
From this point on, my particle class
will always be in a file called particle.js.
Just to simplify for a moment, I'm
going to remove the wind force.
We might want to add that back in later,
but I'm just going to leave only this gravity force.
Going back to the paper, I would encourage
you to think about adding some of these other properties
related to size and color and the shape of your particles.
I'm going to leave that as an exercise for you, the viewer,
and focus in on the lifetime property.
Now, I'm making the decision to specifically start
the lifetime at 255.
This is because I want to tie the lifetime
to the transparency.
So the idea is that the particle will
start with a transparency of 255 fully opaque
and fade away over time, meaning in the update function,
I want it to decrease.
And then in the show function, instead of having the alpha
hardcoded as 100, I will set the alpha to the object's lifetime.
And let's watch it fade away.
Now, the stroke is not fading, so perhaps I'll
add that as well.
And the particle's gone.
The kinds of effects that are typically
made with a particle system generally
result from small dots in the canvas.
So I'm going to reduce also the size of the particle
and set that to 4.
The next step is just making many particles.
And the only thing I need to do that is an array.
Now, I've done this already in The Nature of Code,
but here I want to take a very specific look
at some of the functionality associated with arrays
in JavaScript and p5JS.
So here is the revised code still with one particle.
But instead, that one particle has been added to an array.
If working with arrays of objects is new to you,
I would refer you back to my Intro to Coding With p5JS video
series where I have a whole section about arrays
and objects.
And there's a lot of different things I could try here.
Maybe I want to create a burst of particles
and just add, say, 100 immediately in setup.
Incidentally, even though I added 100 particles,
I don't see 100.
It's because all of them are starting
at exactly the same spot with exactly
the same initial velocity.
So to really see the effect, it probably makes sense for me
to go to the particle class and have their velocities
be something random.
And look at this really sort of like strange effect that
happened that I didn't anticipate.
Because the magnitude of all those initial velocities
is one, they all burst out into this sort of perfect ring.
Now, I'll give them a random set of initial velocities,
and we could see they burst out in a more chaotic fashion.
So this is starting to resemble something
like a burst of a firework, and I might also refer you to--
I have a whole coding challenge about doing a fireworks
simulation.
That could be something that as an exercise for this chapter,
you choose to create from these particle systems examples.
But rather than a single burst, it's
more common for a particle system style effect
to constantly emit particles-- so one new particle per frame
or five new particles per frame.
So I can take this for loop and put it into draw.
And I probably don't want to make 100 new particles
every time through draw.
So let me actually just go back and make this one--
so one new particle each time through draw--
and we could see we have this constant stream of particles
that are being emitted.
I could make it's five particles per frame,
and it's just like a lot more particles coming out.
Now, even though they're fading away
and it sort of seems like it's the same amount of particles
in the canvas, it's starting to run really, really slow.
That's because when particles fade away,
I'm not actually removing them from the array.
So the length of that array right
now is really, really big, and it's just
going to run slower and slower and slower over time.
So I need to add something to remove particles from the array
when they're finished.
The first step I think would be to add
a function to the particle class itself,
and I will call this function finished.
And it's just going to return whether or not
the lifetime is less than zero.
So it returns true when the lifetime is less than zero.
That's when it's finished.
And it's false if the lifetime is greater than 0.
And just as a quick little test to make sure this is working,
I'm going to write if this.finished, fill it
with a green color just to see that as they fade away,
they turn green.
But that's not what I want to do.
Instead of turning them green, I want
to delete them from the array.
Now, what I've written here is another for loop.
There are so many different ways I could tackle this problem.
And in fact, I have some videos where
I look at using higher-order functions.
There's a function, an array function,
called filter and other ways to remove
any particles from the array that have finished.
But the approach that I'm choosing to use here
is just to loop through the array backwards
starting at the end of the array, check every particle.
If it's finished, use the array function splice
to remove that particle and only that particle from the array.
If this is totally new to you, I go
through this code in detail in one of my Intro
to p5JS videos, Removing Objects from an array.
But this is it.
I should have all of the pieces now
of making a particle system using a particle
class and an array of particles with lifespans, removing them
when they're done.
Let's see what this looks like.
And as you can see, the frame rate
is running fairly consistently.
Now, what the behavior of these particles
are, what they're doing, where they should start,
how they should fade away, that's really up to you.
So I would encourage you to take this code
and start playing around with all
the different parameters-- size, color.
What's the initial velocity?
What is the initial lifespan?
And even maybe more importantly, how is the lifespan changed?
Like, for example, if I reduce the lifespan instead of by one
every frame by 5, we're going to see they fade away much
more quickly, and we have what looks
like almost a shower going on here,
a shower of particles in the p5 sketch.
Two more changes before I wrap up--
I'm going to remove calling this edges function.
The bouncing off the edges is no longer relevant.
And I think it would make sense for me
to start the particles higher up in the canvas.
So let me put the value 20.
Oops, no, no, no, 20 for the vertical position-- the y,
not the x.
And there we go.
This is the complete particle system example.
I've got a particle class.
I've got an array of particles.
They fade out.
I remove them from the array when they faded out.
What is next?
So in the next video, I want to take this idea
and kind of turn it up to 11.
So instead of just having a particle class,
what if I think of this whole shower of particles
as a particle system object?
Could I have many particle systems within one sketch?
That will be the topic of the next video.
I hope you play around.
I really would love to see what kinds of effects
you can create just from this example
alone by playing with size, color,
the fading, all of that stuff.
Share it with me and I'll see you in the next video.
[MUSIC PLAYING]