So far, we've seen how to create an array and access it.
Just like other variables, however, one of the really cool things about arrays
is the way we can change them dynamically while a program is running.
OK, let me just show you what I mean by this.
So here we have this program
that displays Hopper holding some balloons; super cute.
And so how it works is that we have this xPositions array
that has two numbers in it that say where we want the balloons at.
And then down here we have this loop,
and this loop goes through every element in that array.
And for each of them, it draws a line from the "x" down to Hopper's hand,
and then draws an ellipse at the "x" that's 30x40 pixels,
and that's our balloon.
Okay, cool. So now that we see how it works,
we know that if we want to have another balloon show up,
we can just add a number to this array, right? Like 300.
Beautiful. Now we've got three balloons for a happy Hopper.
But let's say we wanted to give a user that doesn't know how to code
the ability to add new balloons.
So we wanted to give the program to a user
and say, "Hey, you can click wherever you want the balloon,
and it will show up." Wouldn't that be cool? I think so.
So, how should we do this?
So we want our program to be changing over time, right?
Every time the user clicks, a balloon is going to show up there.
So let's start off by moving everything into a draw function
so that it's easy to change over time.
So we'll just move this down here and indent this here. OK, great.
So now we want to check and see is the user pressing the mouse right now?
Well we can do that with our "if". So if mouse if pressed,
and then we're going to do something. So what are we going to do?
If the mouse is pressed, then we want to somehow add a number to this array.
And let's make this just two elements again. Ok.
So we want to add a number to this array somehow.
Well I'll show you one way we could do this.
So we can say xPositions[2] = mouseX;
Alright, and let me just show you that this works.
I clicked, and ta-da! I got a balloon! So what did this do?
This said, xPositions[2] said find this array,
and find the element in the 2 spot,
and remember that's the third element because our arrays are zero-based.
And if you look, there's no third element, right?
There's nothing in that spot.
So it says find that, and then put mouseX in it.
Well since there was nothing there, then it goes from being nothing
to being mouseX.
And so now our array is three items long,
and this for loop down here that goes through it,
it will end up drawing that third balloon.
So that's pretty cool, and let me just click some more
to show you how this works. So you see every time I click,
it keeps on drawing the third balloon wherever I clicked my mouse.
And that's because we're constantly overriding the 2 spot,
the thing with the 2 index.
We're constantly overriding that with the current mouseX.
So we're only ever going to have three balloons
because we've got this one in the 0 spot, this one in the 1 spot,
and we're constantly changing the 2 spot. Ok?
So that's cool, but what we really want
is we want to let the user make tons of balloons, right?
So every time the user clicks, there's a new balloon.
So that means that we need to be constantly incrementing
the index of the array element that we're storing it in.
So we don't want it to be 2 every time, we want it to be 2, and then 3,
and then 4, and then 5, and then 6, etc.
So we could do this by having a little counter variable.
So we say newInd = 2;
That's what it will start out with,
and then here we'll say newInd instead of 2.
And then what we really want to do is say newInd ++
so every time we add 1 to this.
So it'll start off as 2, then become 3, and then become 4.
So every time they press, it will become more. So let's try this.
Ta-da! Tons of balloons. Balloon party. Woo!
So that's cool, right?
But that's not the best way of doing this
because it turns out adding items to an array
is something we want to do a lot.
So we have a much easier way of doing it than this.
So let me just delete the stuff we did. Alright, so we don't need that,
and we don't need that anymore. We'll just comment that out.
Ok, so how we do it is we say xPositions.push
and then mouseX.
So what we're doing here is we're calling this method
on the xPositions array.
So we're calling a command on the array.
We're telling the array, "Hey, push this new value,
which is mouseX, push it on the the end of your array."
So every time this gets called, so every time they press the mouse,
it's going to look at the mouseX and push it onto the end of the array.
So that the array should get bigger and bigger and bigger.
So let's restart and try this.
Ta-da, it worked!
And it's way less code than what we had before. Alright?
So most of the time, you're going to want to use push
if you're going to add stuff to your array like this.
And it's pretty neat because then you can just have these arrays
that get bigger and bigger and bigger during the program.
Like when you have an animation or when you have users doing stuff,
and then you can do a lot more.
So now you seen 90% of what you'll probably use arrays for
and the ways you'll use them.
But there's also a lot more that you can do with arrays.
So if you have questions, just ask them in the discussion.
But make sure that you master these basics first.