[DING]
Hello, it's me, back again with some--
these bubbles again.
Oy, the bubbles.
Someday I'll think of something besides bubbles,
but the bubbles kind of works.
So the last video, I kind of looked
at how I could click on the bubbles and change their color.
And now I just adjusted the code a little bit so I
could mouse over the bubbles.
And I could show you what I did.
I did this in-between where I now
am using this function called Rollover.
I renamed the click function to Rollover.
I gave it these arguments.
And I'm doing the same sort of thing.
If the distance is-- if it's inside the circle,
I turn it white.
If it's not, I turn it black.
So what I want to do now is I want to click on the bubble
and [POP] have it pop.
I want it to disappear.
How do I do that?
Well, good news everybody.
[DING] I kind of did all of that in the last video except
for the whole--
what did I forget to do?
Oh, the deleting from an array.
So let's think about this.
OK.
How do I remove something?
I mean, one way I could remove something is just stop drawing
it, or move it way off screen.
And in the old days, when I had to code with six feet of snow
next to me, sometimes you had to do
that because you had this fixed array
and you couldn't take things out,
you couldn't add things to it.
So you would kind of reuse elements and move them
off screen.
But here in the land of JavaScript,
there's a really nice thing you can do.
And I'm going to come over here and erase this distance thing.
And now what do I want to talk about?
So I have this array.
One of the things that I showed in a previous video--
OK.
So let's say this array is called bubbles because that's
what it's called.
The whole array-- when I talk about the whole array,
I'm saying the word bubbles.
When I am referencing a specific element of the array,
I reference it by its index, often within square brackets.
And the index numbers are zero, one, two, three, four, five.
So this is bubbles index two.
Now, one of the things I showed in a previous video
is that there is a function called push.
That function allows me to add something
to the end of the array.
In fact, there is also a function called pop.
And that function allows--
what it does is it will take something
off the end of the array and pop it off.
So if what I wanted to do was always
delete the last element of the array,
I could use the pop function.
Now, there are lots of other functions.
There's shift.
I think there's even an unshift.
I could be crazy.
I could just be making that up.
Shift man?
No.
But here's the thing.
Where do these functions come from?
So there's this question that comes up over and over again
in these videos, and you're probably
sitting there asking yourself, wait a sec,
am I learning JavaScript?
I know I'm sort of maybe learning to code.
But am I learning JavaScript?
Am I learning p5?
Is it the same thing?
Is it different?
Well, this is a complicated question.
And I would like, in theory, in my mind's eye,
I would like to say that these videos are just
about learning to code and think about code
and think computationally.
I happen to be using the programming language
JavaScript.
I'm using this library p5.js to make the drawing stuff easier,
and it all kind of mixes together.
So that kind of larger question aside,
this stuff that has to do with an array
is not coming from p5.js.
If I say ellipse, this is a special function
that's in p5.js.
What it does is it calls some other functions that are just
part of JavaScript without p5.js, but it's--
I can only say ellipse because I'm using the p5.js library.
These functions don't come from p5.js.
They're just part of the JavaScript language.
So how do I find out a list of these and how I can use them?
Come back over here with me.
The place that I like to use is the Mozilla Foundation Docs.
I'm just going to say Mozilla Foundation array JavaScript.
That's going to be my Google search.
And I'm going to go here.
So here's the thing.
One of the reasons why I like using p5.js in tutorials
is look, here's the reference.
Here's all the stuff.
It's kind of like one page of functions.
It's actually a lot of stuff, but it's kind of self-contained
and it has a smaller world view, so to speak.
It's like it's a walled garden so to speak.
This is like the JavaScript documentation.
There is so much here you couldn't possibly--
I mean, you could, but it would take you a long time
to read through everything.
But here I am at least on a page that's giving me
some information about arrays.
And you can see--
look, oh there's this.
What is that?
Oh, my god.
[DUN DUN DUN]
So for each loop, someday we'll have
to come back and look at that and what does that do and why
would you use it?
Oh, my god.
My goodness.
OK.
But you can see here, look-- pop.
Oh, shift.
Oh, I'm not crazy-- shift, unshift.
You can see what these functions do.
Where are you?
You're over there.
And look, there's a whole list of them.
So let's look through them.
Maybe we can find one that removes something
from an array.
Concat, copywithin, entries, every, filter, find.
Oh, I got forEach.
[DUN DUN DUN]
OK.
What was I looking for?
So here's the thing-- ah, splice.
I happen to know--
wouldn't it be nice-- couldn't there just be one
that's called delete or remove?
But the one that I'm looking for is splice.
And this method changes the contents of an array
by removing existing elements and/or adding elements.
It can do a lot of different things.
I want to use it for the deletion.
So if I come back over here, I want
to use this slice function.
So can I write up here and you can see it?
Yes.
Slice.
Slice takes two arguments-- and there may be other ways
to use slice, but for the purpose of this video tutorial,
the two arguments are what matters.
The first one is an index, and the second one--
and I'm kind of moving-- sorry, I'm
doing that thing where I'm drawing off
the whiteboard again.
Let me go down here.
That's a little bit better.
The first one is an index.
The second one I'll just call how many.
So if I say slice index two, how many, one, what it does
is it just takes this element and slices it out--
removes it from the array.
Let me show you what I mean.
So one of the things that I could do to sort of investigate
this is I could just use the JavaScript console here
in the browser that I'm using right now.
And I could say let words equal rainbow, and unicorn,
and kitten.
I tried to think of something else-- turtle?
Paperclip.
Words.push paperclip.
OK.
So now we can see I have this array with five things in it.
And if I were to say words.splice index three, one,
what should happen here?
Zero, one, two, three.
I should-- ah, look at this.
Oops.
Turtle.
So one of the things that's interesting about slice
is as it deletes, it kind of hands it back to you.
I'm not going to use that in this video,
but it's kind of interesting that it does that.
It's probably too much information here.
But if I look at the array of words right now,
you'll notice turtle is gone.
It's just rainbow, uniform, kitten.
So the idea here is that even though I
can do a lot with this slice function,
if I just want to delete one element from the array,
I can say, hey, this particular number--
index-- just that one.
And so that's what I want to do.
What I want to do is how can I then, with this code example,
click on this and remove it-- actually
delete it from the array?
Well, I know-- there's so much here.
You know what I should do--
here's the thing.
Look at this function rollover.
Hmm.
There's something kind of interesting
about this function, which is that I'm
doing two things at once.
One thing is that I'm checking to see
if that point is inside that bubble,
and then I'm also changing its color.
And it probably makes more sense for me
to have this function be much more generic,
for it just to return true or false because I might want
to reuse this idea is a point over that object, that circle,
other times.
So I'm going to change this to return true--
oops.
If it's rolling over, return true, otherwise return false.
And then I'm going to write a new function called
change color, and I'm going to say this.brightness equals 255.
So I wanted to remove the idea of the changing color from here
because now I can say if that function--
you might not have--
I covered what return means in my functions video tutorial,
but when do I ever need that?
Well, now I need it.
And what I want to say--
well, not remove.
I'm not removing it, sorry.
Change color.
That's what I'm going to do eventually, right.
I want to say-- and maybe I shouldn't
call it rollover anymore.
I should just say contains.
Let's call it contains.
And I'm going to change it to contains.
What I want to do--
this function is going to return true or false.
And I know some of you are saying
I could just return this.
This statement itself evaluates true or false,
so it's redundant to say if it's true
return true, if it's false return false.
I could just say return its value-- true or false.
I'll let you do that to simplify your own code as an exercise.
But now what I can do here-- this
should be exactly the same program-- oh, I have an error.
Contains is not a function.
Bubble index I contains.
Mm you know what?
Is contains something-- oh, boy.
Am I not allowed to use the word contains?
Record scratch sound.
Do I-- hold on a second.
Apparently, I've done something horrible.
Oh, look at this.
This whole time.
This should say splice.
Apologies.
This should say splice.
Splice is the correct term.
So I'm going to change this to contains,
which I just did and it didn't work,
but now I'm back because I just didn't save the file.
Oh, yeah, no I do want that page.
And so now we're back to exactly what I had before.
But the point of what I was doing
was that now that I've separated out
the logic of just checking if a point is in something,
I can now in mousePressed--
I'm going to just grab this exact code
and I'm going to add mousePressed back in.
So in mousePressed, I can check, hey, is the mouse--
now, this is when the mouse is pressed.
Check again.
And then what do I want to do?
Bubbles.splice I, one.
Look at this thing of beauty here.
I'm able to reuse that idea by saying,
OK, just during draw, all the time,
check if the mouse is over it.
If the mouse is over it, change its color.
And I spelled splice wrong.
In mousePressed, when the mouse has been clicked anywhere,
check to see if it's in there if you click
on a particular bubble, and if so,
delete it from the array, which should cause
it to disappear from the page.
And there we go.
Now, I've kind of-- oh, right, it doesn't--
oh, I lost my change back.
How did I lose that?
Oh, look at that.
Interestingly enough, I had this feature that when it doesn't--
and so what I probably should do here is give this an argument.
So I had this feature where it changes
to white when it's over, back to black when it's not.
So I should probably give this change color function
an argument like bright, parameter, bright,
and pass that in.
I did that kind of quickly, but that fixes that.
And then I should be able to just delete all of them.
OK.
[DING] That's basically it.
Now, I feel like there's so many things
I wanted to do with this.
[DING] That's not it.
I'm missing kind of an important point.
And I did cover this.
There's a particle system coding challenge which does this,
but I think I should talk about it here
which is something strange just happened which is that I
was iterating over the array.
I was checking element zero.
Then I was checking element two--
one, sorry.
Then I'm checking element two.
And at that moment when I checked element two, if that's
the one that I clicked on--
and I should really call these--
I'm going to call these A, B, C, D, E, F, G.
Pretend the particles have a letter because these index
values are going to change in a weird sort of way.
Let me explain this again.
I'm checking A-- don't delete it.
I'm checking B-- don't delete it.
I'm checking C-- delete it.
So what happens next?
When I delete C, the array all of a sudden looks like this.
It's got one fewer element in it, so we don't need this.
I'll erase with my fingers.
And it's got A, B, no C, D, E, F, G. Zero, one, two, three,
four, five.
What was the last bubble I checked?
The last bubble I checked was bubble C in index spot two,
right here.
So if I was going up by one, the next thing it should check
is index three.
But this is what the array looks like now.
So if I check index three, now I'm going to check and see
should I delete E?
What happened?
I didn't bother to check D because as soon as I removed C,
D becomes two--
moves to index spot two--
and my counter moves up.
So I could do something like if--
I could add an I minus minus.
So I could say if I'm deleting something, set the index back
to go check the next one.
There's a bunch of different ways around this.
Probably if I used that forEach loop.
[DUN DUN DUN]
Maybe that would help me somehow.
But honestly, in this case, it doesn't matter.
If I look at this, there's nothing wrong.
Nothing bad happens.
Now, it only would be bad if it so
happens that I try to delete two of them
at once and the other one that I delete happens to be
the next one in the array.
So none of these are overlapping right now.
So let me try to delete both of these.
They both deleted.
But I could get bad luck where I'm hovering over both of these
and so only this one gets deleted
and this one doesn't get checked.
So again, I could decrement the index,
but another way I could do it is if I'm actually iterating
through the array backwards, it doesn't
matter if I remove something and the array slides,
ka-chunks back over, I'm still going towards the beginning.
I won't miss any.
So you'll see that in a lot of my code examples.
Some people like to say I minus minus.
I prefer, generally speaking, to--
if I'm deleting stuff from the array--
to start at the end which is bubbles.length minus one.
Then have my iterator go down--
minus minus.
And then where do I end?
I go all the way down to the first element,
which is at index zero.
The last element is the length minus one.
Like if there are five of them--
zero, one, two, three, four.
If there are five of them-- zero, one, two, three, four.
So start at five minus one-- four.
Go all the way down to zero.
So let's just make sure that this works.
And it does.
Still the same exact result.
I can hover over and delete all of them.
So there you go.
This is a little video about clicking and removing things
from the array.
There's some other things I could do--
here's the thing-- the point of me telling you about this going
backwards thing is more to say that hey,
if you are manipulating an array while you're iterating over it,
you should probably be careful.
What if, for example, I were adding elements to the array
while I'm iterating and I could maybe never get to the end?
Before I finish, I want to add one--
I'm just going to redo this example a little bit
just to demonstrate one thing.
I'm going to put it back to the version of it
where I added bubbles whenever I drag the mouse.
So I want to say mouseDragged.
And I'm going to add bubbles at the mouse.
And something like-- just give them all the same size,
just for simplicity right now.
So what this should do is give me back to this.
I'm kind of drawing with these bubble objects.
The reason why I'm showing you this is this, I think,
might allow you to be a bit more playful in how
you think about removing.
For example, one thing I could do
is I could say just if bubbles.length
is greater than 10, bubbles.splice zero, one.
So I'm saying like, hey, just only ever
have 10 elements in that array.
And maybe I could use shift there to remove
just the first one, but--
and you can see this gives me this kind of snake like thing.
But notice, as I let go, each one of these
is still an individual object.
Now, I've lost the clicking on it thing, but I can come back.
So I think there's some more possibilities.
There's almost like a little object that's--
like a little thing that's storing its history.
And the reason why I thought of this is I have another video--
this is kind of a hard exercise, but something you could think
about--
what if this were its own object you had
a bunch of these on the screen?
So I have another video that about objects
storing their own path that I'll link to from this video.
And so hopefully now you've got some ideas about how
to remove things from an array.
Thanks for watching.
[DING]
[MUSIC PLAYING]