7.3: Arrays of Objects - p5.js Tutorial

okay so now I've made two videos one just about what is an array in the syntax of an array and the other video looking at how to use a loop to iterate over every element in that array and in this video I want to unlock this great power to you which is how to take an object and duplicate that object many times into an array so first this is viscera again just to revisit this is what I'm talking about how would you make an example like this happen and you know each one of these objects it needs to have a position on the screen it needs an X Y it needs to have a speed like how fast is it moving along the y axis it needs to have some functionality like move along the y axis like check if it hit the bottom so each one of these needs its own set of properties and its own set of functionality and that's what I covered in a previous video how to put a function into an object and so we have an example of that here right this is a bubble object let me just actually take a moment to review over here just that syntax so if I have an object like var bubbled an object is a collection of name value pairs an object has properties each property has a name then there is a colon then there is the value and typically we think of these all right you think I think of these as what do I think of just as like numbers right it has an X and it's number is 100 and it has a Y and it's number is 50 but in addition to having these properties just be like simple variables with values an object can have a the name could be a function like the name can be something like display sorry and the value can be a function tripping over my words here right so in it this is what makes objects really powerful it's not just a collection of numbers or data or strings or colors it's also the ability to use those properties in execute some code with those properties so for example if I want to have a display property I might want that to be a function now it's important to us this function is not being executed this is just the definition of the bubble object and the display function is a function that could be executed later and if that function were to be executed it would draw an ellipse act and this is the tricky thing your instinct might be to write bubble dot x right because the way that you access properties of an object is by the name of the object dot the name of the property and then you get the value back but here because I'm inside the object there's a special JavaScript keyword that you can use to refer to the name of the object the specific object this object what I want to do is refer to right here this particular object guess what the keyword is this might think of it as me I am the bubble my ex that type of thing so this X and this Y and this is probably one of the things it might mean for me I just forget to type that all the time and sometimes things don't work so as like an error message so it's really important that you remember to type that so this is the syntax we're starting with and if you see over here it's basically exactly the same syntax I happen to have a bit more sophistication here I have both a display function and a move function and then if I come down here you can see aha in draw the bubble moves the bubble is displayed so I don't have any of this code anymore just in the wind like I don't have variable flying around and I don't have you know lots of code and draw I've had bay this mini program this bubble and now I've gotten a drop so that was a quick little couple minute review of objects in syntax but the point of this is not just to be happy about this object I want to make more than one so obvious certainly a strategy to make more than one would be copy-paste this whole thing but this is not good strategy and I could change the number and change something this is not going to sustain you very long it's not the worst thing to practice with when you're first getting started make a couple objects instead what I want to do is I want to say var bubbles equals bracket bracket I want to have an array of bubbles and I want to put objects in those bubbles so now one thing I didn't actually mention in my previous video is normally not normally but in the previous example I said make an array and put these numbers in it put this text in it this is actually an empty array so I'm starting the array is empty one of the interesting is about script is if the array is empty and you just assign something to the first spot and then assign swing to the second spot then just sciencing the third spot javascript will just like I'm going to figure out what you're doing I'll just make the array the right size for what you're putting in it so I could quickly do something like this bring this object definition into setup and say bubbles index 0 equals that object so now oh my god the blue the scary the blob is back I got to fix that my green screen set because blob takes over once a while and tries to eat me and I don't want it to because I don't want to make more videos I I guess I do I mean I don't know if I should but um so what was I saying yes index 0 so I've put an object into the first spot in the array the array now has a bubble object in it and actually I could say print line bubbles just to take a look at it and you can see UPS I forgot that I have this extra code in here a little comment out for a second print line bubbles and you can see there it is there's the array it's got one object in it now I can adjust note a weird little nuance to JavaScript you know what if I decided like I'm gonna put this in the fourth spot index three zero one two three you know I haven't put anything the first spot or the second spot or the third spot what like what's going to happen so if I do that you'll notice that JavaScript it just wants to do just wants to like figure out what you mean and what are you trying to do let me try to guess something and strangely enough it made an array with four elements in it but the first three are null so javascript is a lot of flexibility and how you assign things into an array I can't think of a good reason why you would do this you're sort of asking for trouble you're going to run into errors later when you try to access a value that has null high high blue blob but but it's important to realize that JavaScript into an array so let's go back to putting it in the zero spot and then what do I need to do well down here what I want to do is not I don't have an individual variable named bubble anymore get a little closer in here what I want to do is say ah move the zero element of the array move this display the zero element so now I just want to refer to the array and the specific object in the array but so let's run this and you can see we have exactly what we had before this single object moving around the screen so I haven't used the power of objects and arrays yet I'm just taking that single object and put it in the first spot in an array and I can make a little bit of an improvement down here to draw even though there's only one thing in the array you know maybe it would be good for future use later to have a little loop where I just check the and I look through the length of the array right and this picks up from the previous video the previous video I loop through every number to set I look through every number in an array to set the width of an ellipse here right and now I'm going to do is say no matter how many bubbles are in this array go from zero to the length of the array up by one each time use that value as the index move and display all the bubble objects so this it doesn't matter if there's five or ten or two this loop will always apply this logic move or display to every object in the array and there we go there's only one I only put one object in the array so how do I put the second object in the array okay well I could copy paste this and say bubbles index one but there's got to be a better way right what I can do instead is why not put a loop around this I don't know how many times should I loop four times and then write what I can do is what I can do is now as I'm looping 0 1 2 3 I'm going to put an object in the zero spot put an object in the one spot so this same code that made that individual object I can reuse that multiple times one time two times so now the array by the way if I say print line bubbles here you can see look at that there are four objects in the array and they're all all four hopefully I won't get eaten by the blue mass there are all four moving around the screen I don't know I can make 400 of them that's a lot of bubbles look at that there kind of starting in the center what could I do differently well one thing I can do is give them a random starting value between zero and the width I could give them a random starting value Y value between zero and height so one thing that you can also know is in addition to having functions as properties or values as properties you can execute code that evaluates to a value it's a little bit weird because like this has code in it and that has coded it the difference is random is being executed right now and evaluating to a number that's being assigned to X here this code is not being executed right now it's being defined as something in a function that could be executed later when is it executed its executed down here when I loop through all the elements of the array so if I run this you can see there's my four hundred bubbles and we can see this down here is like this is this is what actually is in that array so I'm going to take that printout it's not particularly useful to look at it in the console there anymore but you can see I can I could I could just go crazy now and I could make four thousand of them because now one thing is important to realize is there's a limit to how much you can draw in p5 and how like fast it's going to run so that sketch is now running very slowly because it's trying to draw 4,000 circles every frame but what's amazing about this is I haven't changed anything in the code but this number this is the only number that controls how many objects are on the screen so why changing this is the this is the amazing power of the reuse of modularity and reusability of objects so this program is modular in that there is this object that has these parts its properties its functions I know which part to edit when I wanted to change how it looks or change how it moves and it's reusable this single block of code is being used four times or 400 times to make many objects and all I need to do down here is loop through all the objects and say apply the same command to all them move all of them display all them now you'll notice that the editor here the p5 editor has this little like yellow highlighted line number so look what's I'm afraid to look at it I'm going to I'm going to look at it you let's do this together oh it says don't make functions within a loop so I've upset the editor I'm very sorry but it it's like complaining that might my JavaScript is in proper style the truth of the matter is that maybe this is a bad idea for an hour but at the same time it works this is a great way to practice but the thing is here this maybe could be improved in the sense that setup code like has all this code in it and this bubble is very simple what if this bubble got more and more complex so in the next video what I want to do is look at a technique for taking the way this object is made and taking it out of here and putting it in something called a constructor function here I'm just literally making the bubble object but what if I had this other function whose job it was to make bubble objects for me and I could just call that function anywhere from in the code and I would just I would be able to just say make a new bubble and setup and again life is just about making your code short it's really not about that life is about like people and relationships most I could code doesn't really matter but you know it's I you know I guess you can use it for something I'm using it for something talking to a camera about it okay so I just I just think the same lame joke in every video you're tolerating it this video is now over should be cut off okay so that's what I want to do in the next video I want to look at how can we work with this thing called a constructor function which is perhaps a bit more typical what you'll see in a lot of the examples on the p5 website if you look at other types of examples of making objects with JavaScript you might see this style in other places as well okay so if you watch the end of this video I thank you and I will see you in the next one or or I mean I'll see myself in the next one I guess okay

Channel: The Coding Train

Views: 72,585

Keywords: objects, arrays, javascript, p5.js, Object, Array Data Structure, Programming Language (Software Genre), array of objects javascript, javascript array of objects, javascript arrays and objects, p5js, array of objects, p5.js array, p5js array, array object in javascript, javascript array and objects, javascript arrays of objects, javascript (programming language), arrays of objects

Id: pGkSHeEZLMU

Length: 12min 41sec (761 seconds)

Published: Fri Oct 02 2015