7.4: Adding and Removing Objects - p5.js Tutorial

so if you watch the previous video about the constructor function thank you for still being here and watching the next one because that was a little bit rough maybe you actually watched the rerecorded one that I hope to make someday to kind of try to do a little bit of a better job here but I have a promise to you which is that I'm going to put my energy into this video and I think this particular video is going to let you do some really interesting things with an array that weren't possible before if you haven't looked at some of the other functionality that you can do with an array so what is that functionality that I'm talking about notice this example so what's wonderful about working with objects in an array is again I have a single number right there I change that number to five I run the code there are five bubbles I change that number to five hundred I run the code there are five hundred of them but what if I want to click click click click click and delete them or what if I want to click click click click click and add them how do I resize dynamically add or remove things from that array then one of the nice things is right here no matter what I do to the array this loop will only ever iterate over the current state of the array right because that length will dynamically always store the value of the array itself so that's a great thing that's the good news and then in order to add and subtract things from the array a nice technique for doing that is with two array functions so one array function is called push another array function is called splice now the truth of the matter is there are many array functions and I will try to remember to include in the description below a link to a JavaScript documentation page that one's through all these functions it might be little scary weird looking links maybe you should look at it but these are just two functions that I'm going to demonstrate to you now the other thing that's a little bit weird is what a function for a what write an array is this right nums equals 5 to negative 30 71 right what do you mean a function to the array I could say nums index so this is 0 1 2 3 if I said nums index 4 equals 21 it's like I'm taking the end of this array and adding element 4 to the array and making it one longer so this is a way to add an element to the array but it only works because I happen to know what that index value is I happen to know though that in that the length of that array so a more convenient way might be to no matter what you say append it to the end or add it to the end and the push function does that if I say nums dot push 63 it will say whatever the size of the array is extend it by one more and put the thing you just pushed on to it there and I might have run out of space up there but I think you can see it now this is what's weird yes you can initialize an array yes you can refer to individual elements but you can call functions on it what is the thing that what's what is the thing you normally have but you say something dot execute a function an object so this is one of the things about JavaScript I know how we made an array of objects well guess what an array is also an object so and by the way we've seen this already it has a property the dot length property so this is what we normally think of as the array itself and we're working with the values in the array but there are the an array happens to be an object and there are special functions you can call on it push being one of the most you know sort of convenient ones or useful ones for you right now and I'll show you splice in a moment which allow you to take stuff out of the array so let me come back over here and now that we know that I can do something to this code right if I can add the mousepressed function and here in the mousepressed function I can say bubbles dot push and what what do I want to push into that array right before if I just had an array of numbers I could just say push this number or push some random number or push some whatever this is just numbers here what I want to do is push a bubble object how do I make a new bubble object that was what I spent all this time we're really driving my hardest in the previous video the job of making objects is left to this constructor function which is being eaten by the blue blob this constructor function it's job is to make an object how do you trigger its action to make that object by saying new bubble parenthesis so right here all I need to do is say hey push a new bubble into that array so now you're not really going to notice though they popping up there but let's start with just two bubbles and I could click and you can see every time I click a new bubble is being added to that array but unless I want to do better than that like what I want to do is I want to click right here and I want to see the bubble being added right there how do I do that well let's look at how is its initial X&Y picked its initial x and y is picked randomly now the truth of the matter is I could just replace that with mouse X and replace this with mouse Y but I'm using this as an excuse to show you something a little bit tricky about constructor functions but ultimately rather useful functions can accept arguments you can pass things in to a function I want to draw a line from this point to this point I want to fill with these particular RGB values I can say I want to make a bubble with this argument I want to make a bubble that is big or a bubble that is small or a bubble that is red I want to be able to modify the bubble as I make it and in this case I want to say I want to make a bubble at mouse X at Mouse Y so let me come back over here hi erase my constructor function but let's take a look at let's take a look at this syntax a little bit because this is really hard so I want to say new bubble and right now I'm gonna say instead of now sex and mouse Y I'm going to say 50 comma 25 so this is the line of code I'm executing right and remember the constructor function looked like this now it didn't have anything between the parentheses I'm going to add something in a minute and then I said this dot x equals something and this dot y equals something what I want to do is I want to get this 50 into that X and I want to get this 25 into that X Y when I make the new bubble object I want to make it with these values 50 should be its X property 25 should be the value of the Y property how do I do that well when you pass arguments into a function those arguments get received by that functions parameters so I need to add how many parameters here two parameters and x and a y I can actually call those whatever I want but a nice way that I might call them is I might call them X and a wine you know why javascript won't get confused because these are called x and y because these are referring to this bubbles X and this bubbles Y and these are just a plain old X and a plain old Y so if 50 goes into X X now has the value of 50 X can go into this X if 25 goes into y Y naught has the value of 25 and Y can go into this comma Y so these particular x and y parameters to the bubble function they simply act as these like handoffs they're just here like waiting okay give me a value I got the value you take the value that's all they live for that's their entire purpose in life in terms of this codes just receive that value 50 and immediately handing it off because this is the X that really matters that's the bubbles X this is the Y that really matters that's the bubbles Y these are just temporary just here to receive the value it and pass it off so let's come back here I'm sure you have a question but you can't ask let's come back over here and let's look at that so I'm passing in the mouse X and the mouse Y and coming down here I need to add those parameters to receive that Mouse X and mouse Y and you need to assign those parameters to this X and this dot Y so this is exactly what I went through before you can see now Mouse X goes into X which then goes into this tun X now house Y goes into Y which then goes into this that Y okay here we go stop start and now when I click the mouse click the mouse click the mouse click mouse click left mouse look at that oh that is lovely it just works you know I could do something like I'm sorry but I just have to make this a little bit nicer like units give it like a little bit of a some sort of color you know some alpha and what what I just realized though is what's we look at this for a second shouldn't we have like two hundred bubbles to start with there's no bubbles to start with look at this even I wrote the bubble constructor to expect parameters but I didn't get any up here didn't get an error message or maybe I did but I can't see the RMS no there's no error message so the thing is it tried to do it but it didn't have the argument so we don't see those bubble objects so this is important if you provide argument parameters to your constructor function you've got to use this so you know I don't know what I want to do up here I could put all of these starting ones at 100 100 so they're all right there I could put all these starting ones at a random location right I could pass the random location in and I could do that and now I kind of had what I had before but ultimately I think what I want to do in this example is just take this out like now I have a program which just starts with no objects it's fine to have an empty array I can loop through that empty array you know how many times are going to loop through that empty array 0 times and the only time I'm ever going to add a new object is if I click the mouse because when I click the mouse I'll make a new bubble object at Mouse X out Mouse Y and push it into the array so that array grows so I can click click click click click click click and something I could do that's kind of fun is I could change I mean fun if you're me yes but I could change that from mouse press to Mouse drag which is sort of a nice little effect meaning I can kind of like draw with this and notice this is this kind of answers that question you might have had in your head a long time ago which is what if you know if I don't draw the background I get this nice trail right because I don't erase the previous shapes that I've been drawing here now I'm erasing the background but I'm using an array to keep track of the history of everything I ever did with the mouse and I'm making a new object for what every one of those points and you can see even though you could probably come up with more interesting motion than this even though I start with this pattern that pattern quickly goes away as these objects start to move randomly around the screen so I think okay but I was gonna say this is a great exercise for you I think using this model can you create an object can you create an array that stores the history of the mouse as you move it around and what types of kind of motion or changes of color or things can you do now if you have a drawing program that's actually retaining to all of those locations in an array rather than just leaving them as pixels on the screen but before I go any further let's add one more thing to this what if I only ever want to have 50 like I want to delete the I want to do it I want to delete the oldest thing from the array right what I mean by that is if this is the array right the push function always add things to the end so first it adds like a bubble to the beginning then it adds a new bubble to the next spot then it adds a new bubble to the next spot then a new bubble to the next spot and once I get to a certain number what if I want to delete the oldest one shift everything down delete the next oldest one shift everything down and keep adding so the way to delete something from an array is with a function called splice it's a little bit confusing though because this splice function expects two arguments the first argument is the index of what you want to delete so if I say index two and this was my array zero one two it would remove this element and all of these would kind of shift down into the appropriate spots this second argument is how many so actually if I said 2 comma 5 it would delete this and the next four elements but in this case I just want to remove one at a time so I want to remove the element but but I want to remove the oldest one so if I'm adding to the array the oldest one is always in the first spot so I want to delete the first element and just one of them okay so let's come back here and when do I want to do that like right now I could say like just just for the sake of argument keep rest bubbles dot splice the first element one just that one element so you can see now I'm going to add a whole bunch of them and now we'll start the key you can see it's removing them in order of what the how they were added but maybe what I really want to do is say something like okay if the bubble array ever gets greater than the value 50 then delete that first element so what's that going to do I'm going to keep making bubbles until suddenly I have 50 of them I can keep making more but keep deleting the older one so if I ever have 50 delete that a new one delete the previous ones so you can see it's I sort of get this trail that kind of winds following me so push adding things to the array splice deleting things from the array now let me give you a challenging problem and I really should make another video with the solution to this problem I actually have one somewhere but it's it uses processing so I need to make a JavaScript one with this but what if you don't want to remove these objects just based on their age like when I get to 50 but what if you want to remove them if they ever happen to wander off the screen okay so look at this here's a bunch of objects leave them there or remove them if they if they hit the edge of the screen or if you click on them so how do you pick specific objects to move based on some set of condition that's a pretty difficult problem this sum has to be inside of the loop but you got to watch out if you're looping through an array and modifying this the elements are there at the same time weird things can happen so that's something you could think about as a future problem but just to get started right now I'm like you know again work with this model see what you can do with the object that sort of keeps track of an array that stores a history of what you've done with the mouse or maybe you have something moving independently randomly and you're keeping track of its history of its location okay so hopefully this helped you with a little more about objects and arrays and I'm going to finish this video off now oh this was 15 minutes long that was long come on Mouse I got hit stop

Channel: The Coding Train

Views: 95,088

Keywords: splice, push, javascript, objects, array, p5.js, p5 js, javascript push object, p5.js shiffman, delete objects in javascript, p5js push, push object javascript, javascript add remove list, p5js, array data structure, p5.js arrays, p5.js array

Id: EyG_2AdHlzY

Length: 15min 18sec (918 seconds)

Published: Fri Oct 02 2015