Hi, so I'm expecting--
I don't know if this is true--
for you to have watched my videos
about inheritance and polymorphism
before watching this one.
It's fine if you didn't.
Maybe this will be useful to you.
Maybe you already know about inheritance and polymorphism.
But I am basically going to take those concepts
from those videos and apply it to this example
that I did in the last particle system
example, which had just a single kind of class called particle.
And the first thing that I'm going to do,
which I think is an interesting thing
to think about, whether there's a lot of value to this in all
of my nature of code examples, is
add the idea of having particle itself extend p5.Vector.
What does that mean?
That means instead of having a separate position variable,
the position itself, the vector itself
is just the particle is embedded into the particle
object because it's inheriting everything from p5 Vector.
So I can say super x,y to create it as a p5 vector at that x,y.
Then anywhere that I'm using position-- and by the way,
I'm not using this Edges function,
so I'm just going to take it out completely-- anywhere that I'm
using the position is now just the object itself.
This dot add, this dot x, this dot y.
Right?
So that's it.
Now, this particle object inherits everything
from p5 vector.
Next, what would it mean for me to add
a class that extends particle.
So I'm adding a new JavaScript file called Confetti.js
and creating a new kind of particle
that inherits everything from particle, which
inherits everything from p5 vector in this class called
Confetti.
And I don't remember exactly what
I did as the demonstration of making a new kind of particle
in the previous videos, but what I'm going to add here
is just this idea of an angle.
And I'm going to make it a random angle between 0 and 2pi.
Then I'm going to override the Show function.
I've written a new Show function that just draws this Confetti
particle a different way.
So the way it updates itself, all the other things
that it does, the physics of it are entirely the same.
From the particle class, I'm inheriting
the Finished function, the Apply Force function, the Update
function.
I just don't want to draw it as a plain old ellipse.
I'm just rewriting the Show function.
And of course, once again, I've forgotten this dot.
Let me catch that error first.
This dot angle.
And you might say, like, well, where is this dot lifetime
and where is this dot r?
All of those properties are inherited, once again,
from the particle class itself.
Oh, I've just got some characters out of order here.
Particle is not defined.
Oh, interesting.
I didn't think of this.
The Confetti class is extending particle,
but doesn't seem to know what a particle is.
Why is that?
I think this is one of those rare occasions where
the order of these JavaScript files embedded
into the index.HTML really matters.
The Confetti.js file is included first,
but Confetti is based on particle.
So I think particle has to be here.
And I think just conceptually it might make sense for me
to say particle confetti emitter sketch.
All right, the sketch is still running,
but I don't see anything different.
I just see all of my plain particles.
If I look at the emitter class, I'll
see that the only thing I'm ever adding to the array
are particle objects.
Let's try changing those to confetti objects.
There we go it.
Might be hard to tell exactly here.
But those are little squares that are rotated.
Let's make them a little bit bigger,
and add just one per frame.
And now, I think that's more obvious visually
for you to see that those are squares and not circles.
What if I want to have both?
Well, now, I have to ask myself the question, what
is the logic behind why I might want to have one or the other.
Is it just randomly both of them?
Maybe I'll just start there.
Now, I've added some code.
Pick a random number between 0 and 1.
If it's less than 0.5, add a particle object.
If it's greater than 0.5, add a confetti object.
So I'm flipping a coin-- particle or confetti.
And hopefully, you can see now that both kinds of particles
are included.
So that begs the question, what's
a good exercise for you to try?
Well, first of all, maybe add a third class that
extends a particle to this.
Think about how that particle is different.
Maybe you might come up with a different more intentional
logic behind why you might pick one kind of particle
versus another.
But I do want to address something here,
which I think is really an important question.
When do you want to have another class that extends a class
versus just add something that's like a twist
on the original class?
For example, if what I wanted to have now
is particles of a different color,
I probably wouldn't write a whole class
called color particle.
I might just add to my Particle.js file
a variable like this color.
But again, there's no right or wrong answers
to these questions.
But to me, the fact that I wanted
to override an entire function the entire way that it's
drawn using a different shape entirely,
that made sense for me to create a new class that
extended particle, rather than have
some kind of IF statement of if it's this type, draw a circle,
or otherwise else draw a square.
So that's the way I'm thinking about it right now.
I wonder how you're thinking about it.
Definitely would love to hear your feedback in the comments.
But this really wraps up this exploration
of the concepts of inheritance and polymorphism
with particles systems in chapter four of Nature of Code.
I've got one more thing that I want
to look at with particle systems,
and that's a little bit more about how you might
choose to render a particle.
What does it mean to have the particle rendered as an image
texture, as well as explore different blend modes in P5 JS.
What kinds of visual effects can you create that way?
So that'll be in the next video.
[MUSIC PLAYING]