Modifying Arrays (Video Version)

This video shows how to dynamically change the contents of an array while the program is running.

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.