7.5: Removing Objects from Arrays – p5.js Tutorial


[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]

Leave a Reply

Your email address will not be published. Required fields are marked *