[DING]
Hello, it's me again, your friendly neighborhood coding
person who made some bubbles.
So if you were watching some previous videos a while back,
I made these bubble objects.
And there they are.
They're moving around the screen.
And then there were some videos where
I looked kind of different which were about arrays,
just like arrays of numbers, and arrays of strings,
and it's a list of things and things have indices.
So why am I here?
Now, I'm here in this video because I have this goal.
I have this goal in life which is to say,
I have defined what it means to be a bubble.
I made a bubble class.
I made a bubble object.
And I made two bubble objects, bubble 1 and bubble 2.
And I would like to be able to make 5 bubble objects.
And I would like to not have to do this
because I would also like to make 500 or 1,000 or 10,000.
I want to be able to duplicate as many objects
as I want, create as many objects
as I want from that template, from that class without having
to have all these separate variables.
And isn't it just so convenient that I'm right here,
and we just talked about objects and arrays.
If I just put those two things together,
we'll be in good shape.
So let's do that.
OK, so let's just do that.
No, don't go over there, OK.
So I'm going to change this from one variable, two variables
to a single variable called bubbles.
Now, remember, when I want a variable to hold
an array, a list of information, instead
of making it equal to something like an object or a number,
I set it equal to open, close brackets.
There's other ways you can create an array also,
but this is a pretty conventional way.
Now what I might do is I might say, OK, I have this array.
In theory I have this array that I could fill.
Why don't I put a bubble in index 0
and a bubble in index 1?
So I'm going to put my bubble here and then
put my bubble here.
I'll make two bubble objects.
Instead of having separate variables, bubble 1, bubble 2,
I am going to have a variable bubbles index 0.
Because remember, the first spot in the array is 0, not 1.
So it was kind of bad that when I was doing this
I named them bubble 1 and bubble 2.
I should really name them bubble 0 and bubble 1.
So the first thing I could do is just
change this program to say, like hey, bubbles 0,
bubbles 1, bubbles 0, bubbles 0, you get the idea, right?
Bubbles 1, oh, this is awful.
Why am I even bothering with this?
Bubbles 1.
Oh no, look at this.
This is bubble 0 and 1.
And this is bubble 0 and 1.
Oh, oh, my goodness.
Oh, my goodness.
No, wait a second.
Stop the presses.
I'm so confused.
I think what I would prefer to do is move 0 and 1
and then show 0 and 1.
So of course, I could do this in any order.
But I want to move the first one.
And by the way, this is not going
to be the solution because even though this now works, and I
have the same exact results, the only thing that
have done differently is that instead
of having two separate variables, I have one array.
But I'm still referencing the two separate bubble objects
individually.
So if I want to have 10 of them, I still
have to keep adding more and more lines of code.
So what I want to do is I want to use that for loop.
If I say, for, let i equal 0, i is less than some number, i
plus plus, then inside here, I can refer
to that array called bubbles.
Instead of saying hard coding in 0, hard coding in 1,
if I just say bubbles index i, this
is going to repeat many times with a different value for i. i
is 0, then it's 1, then it's 2, then it's 3.
So this is a way of me iterating, accessing
every single element of that array.
So I can use that too.
And by the way, I know, I know, there's
like a for each sort of thing.
And maybe I'll make a video about that.
But I'm going to just use a nice for loop with a counter
variable.
So I'm going to say for let i equal 0. i is less than two,
i plus plus.
And now instead of referencing the bubbles individually,
I'm going to just say bubbles index high, which
means I can now do this.
Bubbles index i, that same loop later in draw,
this is to use a loop to create the bubble objects in setup.
I can say bubbles index i dot move.
Bubbles index i dot--
I don't even remember anymore-- show.
Is that what it was?
We can scroll down and look at the bubble
and see move and show, OK.
So those were the names of the functions
that I used in that bubble class.
So now, let's run this again.
And here we go.
So look at that, ah.
Now, I still have two bubbles, but one was big
and one was small before.
And then they were different spots.
I lost that.
So one of the things that I had in my previous example
if I just go back to here is I had specified exact locations
for each bubble object and exact sizes.
And now that I have a loop, I'm in a much happier place
in that I can easily make 20 of these,
but what do I do about initializing all that stuff.
So the thing is here-- hello, welcome to programming--
the reason why I'm coding here is not
because I want to specifically set some exact locations
for bubbles.
More likely, I want to come up with some kind of algorithm.
Like, I want all the bubbles to appear in a perfect grid.
Or, I want them all to appear randomly.
Or, I want them to be in a grid that's
slightly offset randomly.
Or, I want them to appear in a spiral pattern.
I want them all to start in the same place.
So what is that algorithm?
So let me just say, so one thing I could do
is I could use the fact that I have this counter i.
And I could say, let x equal--
well, what if I start the bubbles starting at pixel 10,
and then space them out by 30 pixels.
So this kind of came to me immediately
because I've done this so many times.
But this is now a formula that when i is 0, x will equal 10.
When i is 1, x will equal--
10 plus 30 times 1--
40.
And if I ever got to 2, which it won't in this case,
so it would be 10 plus 30--
70, right?
So this idea of spacing the bubbles out so I if
made three of them.
And then of course, instead of hardcoding this value here,
I could say x.
I could use this variable to pass
in which is calculated anyway.
And then by the way, this is really pretty bad.
So one thing that's bad about this
is, now if I'm creating three bubbles all of a sudden,
then I left this number two here.
So what I want to do is say, bubbles dot length.
However, now, I can't use bubbles dot length here
because the array when I first started was empty.
So I'm adding things to the array,
a certain number of them.
Then I can retrieve that length later.
And again, there are different ways
you can approach how many spots there are
and how you store the length.
But this is just a way that I would do it for this example.
So now let's look at this.
You can see, look at them.
They are started now.
Let's not move them just so we can see.
You can see, there they are spaced out.
And I could easily just say, well,
actually I want to space them out by 100 pixels.
And I want them just to be 20 pixels.
And there we go.
And I want them to actually start at least 20 pixels in.
And you can see, there they are.
And then I want to have 10 of them.
And there we go.
But I can't really have 10 of them.
You get the idea.
And now I could put back in move.
And there they go.
So this is a way.
Hello, do you see something kind of exciting
about this video, which is that I haven't once changed
any of the code down here.
The idea of a single bubble has remained exactly the same.
The thing that's different now is
that I can create them and put them in an array.
And however many there are, I could just move and show
all of them.
So I'm going to show you a few more things here.
Now, here's another thing I could do.
Let's just prove this point.
Let's give them all random spots.
And again, I could set them randomly in the constructor.
But I'm just going to do it here.
So I'm going to just create a whole bunch of bubbles
with random locations.
And we can say random sizes.
And you can see, there they are.
But this is what I'm talking about now.
I have this one program here.
It makes 10 bubbles.
I want this program to now make 100.
How many keys on the keyboard do I
need to hit in order to make this change?
One.
[DING]
If I've programmed everything correctly, all I need to do
is add a 0 here, and suddenly I have a hundred of them.
And if I add another 0, suddenly I have 1,000 of them.
Now, my program might be slowing down
because it's drawing a lot of bubbles.
And it's a lot to draw.
And you know, I could start to think about what I really
want to do here.
Maybe actually what I want is for these
bubbles not to have a stroke.
But I want them to have a fill with quite a bit of alpha.
And I could take this out of here.
And now I've got this sort of like cloudy thing going on.
So again, I can use this idea.
And what I'm really doing here is
I'm kind of on the way to building something
called a particle system.
I am building a system of many individual elements
that together make some sort of effect
like a smoky-cloudy thing.
But I could with one variable now,
with one value, change how many things are in there.
Now I'm going to do one more thing in this video.
And I'm going to actually put the bubble back.
So let's just go back to where I was, just start
with 10 bubbles, 10 bubbles.
Now what if I take this out of setup entirely?
It's gone.
What's going to happen?
What's my program going to do?
Nothing, emptiness, no bubbles.
What if what I want to do is add bubbles when I click the mouse?
OK, let's think about this.
The first thing that I might want to do
is figure out where code executes
when I click the mouse.
So that is that I want to add function mouse pressed.
Now, what do I want to do?
I want to make a bubble.
Let B equals new bubble.
I want that bubble to be where the mouse is.
And maybe it has a random size between 10 and 50 pixels.
Hey, I don't love these 1 character variables.
I should do better than that.
But I've picked a random number, and I've made a new bubble.
What if I want to put that bubble in the array?
Well, I could say something like bubbles index 0 equals
B, right?
I could say, ah, the first spot in the array put that bubble.
And when I click the mouse, look,
I only have one though because what I'm doing here
is every single time I'm making a new bubble
and putting it in the first spot.
But if this were a counter, and it went up every single time,
I could put the first bubble in the first spot, the next bubble
in the second spot, the next bubble in the third spot.
But I could do even better than that.
There's actually a function.
There are a lot of functions associated with arrays.
Arrays are actually objects too that
allow you to do certain things.
And I'm going to get to them.
I can delete stuff.
I can move stuff around.
I can shuffle, I can sort.
But what I'm going to do is I'm going to use
this function called Push.
Push is a function that means add something to the array,
push it to the array.
And actually by default, it's going to push it
to the end of the array.
So now that I have that, every time I
click I add a new bubble.
And what's interesting about this
is there's no limit to the number of bubbles
I can have other than the computer speed and memory.
And interestingly enough, I might just as a little effect
change this to mouse dragged.
And you can see now when I drag the mouse,
I'm kind of drawing this kind of array of bubble objects, OK.
So this is all about making an array of objects.
So if you're following along, maybe you
had an object you made, some variation of the bubble.
You made a bouncing ball.
You made some kind of flying pig.
I don't know what it is you made, a rainbow, a heart.
Take that.
Don't make any changes in your class at all.
Try to write a program where you duplicated an array
and you can just change one number
and you can have 500 versus 1,000 versus 10.
See if you can add them with clicking the mouse
or hitting the keyboard or some type.
Maybe, what if you try to add one every 10 seconds, how would
you do that?
What kind of event can trigger the adding of an object?
And then, what I want to do in a future video, which maybe will
be the next one is, how could I delete
these when I click on them?
Well, first of all, there's a couple of things.
How do I know if these bubbles are
intersecting with each other?
So I want objects to talk to other objects.
And I also want to be able to talk to the objects.
Bubbles, you bubble, hello bubble.
That's me talking to the objects I guess.
But I don't have anything to say.
Alexa, the bubble's name is not Alexa, anyway.
What was I talking about?
Oh, so I want to be able to figure out how do I
interact with the bubbles?
Can each bubble have its own mouse
pressed kind of like event?
How does that work?
So I gotta get to that sort of stuff.
And that'll come in a future video.
Thanks for watching.
[DING]
[MUSIC PLAYING]