Welcome back to the second video of chapter 4 particle systems.
Here, I'm going to take the example
that I created in the previous video and package
everything that has to do with that shower of particles
into a class itself.
So not only will there be particle objects,
but there will be system objects,
or maybe I'll call them emitters.
So we could also think of this as like a particle emitter.
It just is a shower of particles from one particular x-y
position in the canvas.
The first step, I'm going to create a class called emitter,
put it in a separate JavaScript file.
And the only properties that the emitter has
is the x-y location from which it will emit particles.
That should probably be a vector.
I need to make sure I add that JavaScript
file to my HTML file.
So position is clearly not the only property for the emitter.
What needs to be in there?
Think about this for a second.
Pause the video.
[CLOCK TICKING]
[DING]
All right, maybe you were thinking
what I'm thinking, which is the particles array.
The emitter the object that keeps
track of all of the particles.
A particle object is a single particle.
An emitter or a system class keeps track of all of them.
The reason why I'm saying system also
is if you look at the Nature of Code book,
I think I used the word system to describe what I'm
describing here as an emitter.
So instead of this global variable particles,
I have an array inside of the emitter class itself.
Then maybe in the emitter, I'll also have a separate update
and show function.
Could be one function, but let's make these into two functions
where I take this for loop and go
through all of the particles, but I
guess I'm saying I want to show the particles separately,
so I take show out of update and have only show in the show
function.
I don't know.
Two functions, one function, I let you decide.
There's no right answer to this, how
you want to organize the code.
I think there's also a question of whether this gravity
variable should be just here inside of the update
function or a global variable or passed in.
Maybe I'd want an apply force for the emitter itself
to apply forces to the emitter, but there
are lots of ways you could organize this code.
I'm going to leave it like this for right now.
Oh, and of course, I've forgotten
that I need to say this dot everywhere now that this
is a particles property of the emitter class.
[MUSIC - DANIEL SHIFFMAN, "THIS DOT SONG"] This dot, this dot,
this dot, this dot song.
Going back to the sketch, I can now
say I can have a variable called emitter.
And then, oh, I have to figure out how to add particles.
Let me comment that out for right now.
But I can just say emitter dot show, emitter dot update.
All of the stuff that used to be here in draw
is now in the emitter class itself.
Undefi-- oh, I made a classic error, which is I
redeclared the emitter with let here
in setup, which makes it a local variable to setup,
so the global variable emitter is undefined.
That is a very common mistake.
Let me take that out.
And still, have an error.
Oh, and I made another mistake.
I spelled it wrong.
OK, no errors, but I don't see any particles.
This is because I need to figure out how to add particles
to the emitter.
Again, there's so many different ways
I could choose to implement this.
I think what I'll do right now is take this for loop,
go into the emitter class, add a function called emit,
add particle, let's call it add particle, let's call it emit.
Oh, I could do something fun here
where the number of particles I want to emit
is an argument to that function.
And then, the new particle shouldn't
be hardcoded at this initial position 200 comma 20,
it should be launched at the position of the emitter.
Now that I have that emit function,
go back to the sketch, emitter, emit five particles,
and I think this should be, when I hit run,
this should be exactly what I had
at the end of the previous video,
just with all of the particle system stuff
wrapped into an emitter object.
Particles is not defined.
I have a feeling I forgot the "this dot" again.
Absolutely.
And there we go.
Now I'm ready to, instead of just having one emitter,
have many emitters.
So a particle system, an emitter,
is a system of particles.
And now I have a system of emitters,
and that could be a particle.
This could go on forever, nested systems.
But I'm just going to do it one level more,
an array of emitters.
First emitter, emitters index 0 to be that emitter, and then
loop through them all.
Same sketch, but now that single emitter is in the array.
Now watch this.
I'm going to add the mouse press function, which
is very exciting.
Instead of emitters index 0, I'll
say emitters dot push, so add a new object to the array.
What do I want to add?
A new emitter.
And guess where I want to add it?
Not at the hardcoded values 200 comma 20,
but how about I add at mouse x, mouse y.
No particle systems, no emitters, click the mouse,
there's one.
Click the mouse, there's another.
Click one, there's mouse.
Click the mouse, there's another.
Look at this, particle emitters right here in P5.JS.
Just one additional step from a single array of particles
to make it a class to wrap that array,
and we've got multiple ones that launch
every time I click the mouse.
Let's think about some things you could try.
Here's a great exercise, not the easiest one,
but I think it would be fun to try.
Go back to the gravitational attraction example
from Chapter 3, the one where I use triangles and pointed
all of the mover objects in the direction
that they were moving.
Those could be still mover objects,
but inside each one of them, they
could have an emitter object, and they
emit particles streaming out from behind them
as they move throughout the canvas.
A simpler exercise might just be to have a particle emitter
that's following the mouse.
You could give that a try, as well as just play around
with how could I have these be different colors, each one
being a different color.
How could I launch them in an automatic way like fireworks?
So many possibilities.
What's coming next?
So at least right now, at the moment
that I'm recording this video, who knows what the future will
bring, the next video in the Nature of Code playlist
will be one that I recorded a couple of years
ago about the concept of inheritance.
What if I wanted to have different kinds of particles?
Maybe they all have the same core
idea of position, velocity, acceleration, and lifespan,
but they look different, they behave differently.
I don't want to continually make new classes with all
the same properties, copying and pasting my code over and over
again.
Inheritance is a mechanism by which an object in JavaScript
can inherit its properties from another object.
Or, in this case, to be more specific about it,
I can write a class that extends another class.
So I go through all of that in a lot of detail
in the next video, along with this concept of polymorphism,
which really deals with how then, I
have these objects of different types in one array.
So take a look at those videos if you so choose.
And that will allow you to do more
with this idea of different kinds of particles within one
particle system itself.
I look forward to seeing what you
make from this system of systems,
whether the concepts of inheritance and polymorphism
add to your creativity in some interesting and exciting way.
And I will come back and do a couple more
extra little tidbits about particle systems
after those two videos in the playlist.
See you there.
[MUSIC PLAYING]