16.10: Particle System with JS Array Functions - Topics of JavaScript/ES6

hello welcome to a video about higher-order array functions so I just made all bunch of individual videos with kind of some non-realism like made-up scenarios to cover map sort reduce filter and fill and I thought there might be a way of making use of all those functions to improve I don't know if it'll really improve but to change to adapt my coding challenge number 7070 eight simple particle system so this is the coding challenge this is the code it's got an array in it I'm doing everything rather manually with a loop what can I do to use these functions so let's let's start with let's start with fill so the first thing I want to do is let's see if I could use fill to start the array with like a hundred particles alright so let's see let's start with by saying the oops what happened here let part let's start by saying particles is a new array with a hundred spots now in theory what I kind of want to do is this particles dot fill new particle right I want to just say hey fill all the spots with a new particle and I already told you there's a hundred spots there this is kind of gonna do something interesting I'm gonna actually just to demonstrate I mean I'm gonna take out adding particles and draw and I'm gonna run this real quick and see okay did you see something that real fast look at that real fast what was that well actually what it did is it made a new particle and it put that new particle in every spot in the array but it's all pointing to the same particle object I need a different particle object in every spot so in this case I've actually really got to use the map function so I can fill it I can fill the array with like emptiness and then use the map function to create a new particle for each and every spot so what I could do here is I can just say fill dot map and then each element I'll call it P should be a new particle so this now should give me whoops why didn't this work uh okay so here's the problem I forgot I know maybe this isn't the greatest thing to do because map requires a new array so this is all sort of silly that I'm doing here so it would make more sense for me to say this because why make a new array twice so what I want to do is make a new array fill with nothingness I could put null in here and then map oh I don't like where this and then map to new particles I hate this yeah that worked I got a little burst of 100 particles can I take out this null yes so I don't know do we like this this is almost ridiculous I don't know if I really need this but it works I have a particles which is a hundred or a hundred a of a hundred particles and each each element is a new particle object and you can kind of see that one line of code great okay so we used this video we now use to fill oh and we use map oh how lucky for me and again I've really got to pay attention to what just acts on the current array what makes a new array all right so what can I use next let's go ahead and use filter I'm going to show you something interesting about filters so if you've looked if you've gone through this count if you watch this challenge and looked at this code look what I'm doing here I have this very awkward loop that loops to the array backwards of using the index I access each element of the array update I show I check this finished function if that finished function returns true I use the splice function to remove it out of the array so I can really improve this let me add this back in where it adds five new elements to the array and maybe there's a way I could do that with one of these higher-order functions there we go now we can see here's the particle system one thing I could do to improve this is let's just use let's just use the for of loop so for every particle of particles this is a new this is a loop that's part of e a loop structure this part of the JavaScript es6 I have a whole video just about this loop it's saying every single element of the array reference that each element in the variable particle so I can just say here particle dot update particle doc show so that's nice I like that already better than this down here which I'll comment out so this is a nice simple way of iterating through every element and there we go I probably just use two for each loops and this is about higher-order functions so we can see this is the same it now let's look at particles dot length 1975 two thousand one ninety it's not deleting any of the particles as they fade out so how can I do that I can say in instead of having to check each one and remember the index and use splice I can now say particles dot filter and what do I want to filter now remember I'm gonna I can write the function to return true or false to tell it whether to keep it or not if you watch my video on filter all in line using the arrow syntax so really what I'm trying to write here is I want to write a function like keep and it receives a particle and I'm going to return P dot is finished right and in ultimately I want to keep it if it's not finished so this is the function that I want to write to filter everything out it returns true if it's not finished so keep it but I can just write this as and not so look at this now and I have to remember on my list filter is one of those ones that returns a new array so this actually isn't going to do anything unless I say particles equals particles dot filter filter them all out based on the is finished property and now okay it's finished is not a function just call it just called it finished okay and there we go now is this really working let's check particles dot length Jordan 55 Tora 55 it makes sense that it's always 255 because its lifespan starts at 255 it goes down by one and I'm adding like five per frame somehow the math works out that it's like nicely 255 that's very interesting all right so look at this now the reason why now these this particle system example is a bit of a simplified version of my nature of code ones I just want to really briefly go to github github.com slash Schiffman slash the nature - twice code - examples - p5.js so if you want to see more examples that do this and I go into chapter four systems I have a lot of particle system examples here's one systems of systems of the particle system class you can see I am now doing this in my examples with some extra comments so this is this is now if you want to see many more examples where I'm kind of using this type of es6 style to to operate on an array of particles you can check out these examples as well what else can we add to this let's ah let's use reduce so let's see if we can use reduce so one one thing that I might want to do with reduce is something that happens in my flocking examples for example is I want to calculate like what's the center what's the average location or the average velocity of everything so let's compute what's known as the centroid which is a term for the average location of a position of a collection of things the center of it so let's think about how I would do this I won't and I can get rid of all this now so I want to say particles dot reduce and remember reduce always gets an accumulator and a particle there's an accumulator and a particle and what I want to do is I want to add up each particles location so there's a bunch of different ways I could do this for example I think it might be simpler right now to just do it with the X&Y so first let's just calculate this X I'll call it CX for center X and this is going to be I'm going to call this X so the X is just enough like fewer shorter variable names X is the accumulator P is each particle so what I want to do is say X plus px right I want to add up all the X values of P this is not going to work right because if remember if you watch my reduced video the accumulator has to have an initial value if you don't specify it's the first element of the array well what's the first element of the array it's the particle object so in this case I can't like add the x value I don't think I want the first element of the array to be the first particles X value but what would be simpler here would just be to explicitly initialize it at 0 so I can then say just comma 0 and this should give me the center X location right I'm taking all I'm adding up all the X values now I didn't I need to divide by the length but let's so this should really be this is really some X I'll call it the sum of all the X values this is this would be some Y and I'm gonna do this and and just to rename the variables I'm gonna do this right and then I should be able to say Center center X equals some X divided by particles length and center Y is some Y divided by particles dot length and let's just draw a nice you know red circle right there and see what this looks like if I got this right there we go you can see that's always the average center of all the particles the centroid of all the particles so again does this what have I done here I could have written a loop I could have said some x equals 0 before the loop every element of the loop I say some X plus equal the particle that X so I don't know what if I really have I improved anything but this you make this is a way that you could write it using a higher-order function called reduce now could I do this in one line could I do this without separate x and y values and I can let's look at that so one way I could do that oh you know what though the particles don't have vector object so I might almost want to leave this as an exercise I'm gonna leave this up in some way so what I would say is like go to where was that where was that go to this particular example right where I'm actually here each particle if I go to this example in nature of code and I look at the particle object the elements are not are actually p5 vector objects so how would you write this function to add everything up with a p5 vector so let's actually I think we could actually do this here let's do this here okay so let's say I were to say I'm gonna comment this out comment this out I'm gonna say let some I'm gonna say some V which is the vector sum be create vector 0 0 that's the accumulator right that's going to be the end that's the accumulator I'm gonna make an empty vector at 0 0 then I'm gonna say I'm gonna call this accumulator V then I'm gonna say let some V equal and we do the same exact thing particles reduce this accumulator which is V which is going to be a vector P then say V dot add because I'm going to use the P v vector syntax wow this is really crazy px py so I believe the p5 vector object has an ad function and I can add to the vector x and y-components directly and then i'm going to give this as the initial value of the accumulator so really what I probably want to do is just put this right here be a little less caffeine line of code I can't even fit on the screen here there we go right I'm reducing let's see if we got this I'm reducing the array I'm gonna accumulate a bunch of vectors with the first vector being an empty vector with zero zero in it and then for each one of those I'm going to add to it each particles X&Y and then I'm gonna say I know I'm standing in front of the code right now I'm gonna say some V divided equal particles dot length well I can't do that I have to use it's a vector I have to use the divide function divided by the total number of particles and then I'm gonna say some V dot X and some V dot Y so let's see let's see how this goes are you actually still watching this video because I'm gone off the deep edge with all these things I'm okay let's go back to my sketch same result so that's working to calculate the centroid so you've seen now I can use filter I can use reduce you know here's let's let's look back at the list filter reduce fill map I still have swords well this video is just gonna be longer I'm gonna use sort in this video so here's the thing I don't think that the code is necessarily gonna run faster and more efficiently this way and this could be a problem if I have a particle system with thousands hundreds of thousands millions of particles I really want probably then a simple for loop is going to actually execute the fastest but there's something nice about learning how these functions work and sort of seeing how this can be done because you will especially see these in libraries that are manipulating large amounts of data in JavaScript libraries that are kind of using this sort of style of coding so hopefully this is helpful to you let's do sort why would I want to sort these particles well one reason might be what if your create first one if you're actually in 3d space it's sometimes advantageous to know the Z the Z of things because you might want to draw them in that order related to how the alpha or the blending and various things are working but I'm not in 3d but even in 2d what if I wanted to have some type of layering system where I always wanted certain things to be drawn over other things even if they're out of order in the array because right now I'm only gonna draw things in the order that they are in the array so let's create kind of a fake scenario that will do that so what I'm gonna do is I'm gonna go to the main sketch the particle and I'm gonna add oops no I'm sorry I'm gonna go to particle and I'm gonna add I already did this actually I'm gonna add a color variable which is just a random brightness value between zero and I guess technically this can be random 256 because I can get 0 through 255 and then I'm gonna fill by this color and I'm gonna get rid of the Alpha so they're gonna be no alpha now let's look at this whoops let's go back I'm gonna run this and I'm gonna get rid of the centroid just so we don't have that big red dot for no reason I will obviously leave this in the code go back to here now look at this so there's obviously a layering going on here the layering happens to be just the order that the particles were added but what if what I wanted to do for example was always have the brighter ones appear on top of the darker ones I don't know that will produce any visual value but you could imagine a scenario where you're actually thinking about layers and depth and maybe you create fake Z value of Z variable for each object or something like that so I could sort them by their brightness so let's look at that if I go now back to sketch before I draw them I could say particles dots sort and remember when I sort I need to create a function and again I'm using this arrow syntax just almost automatically now this is this working for you please let me know it's all these videos help you kind of just see it where I get where I start with two elements of the array a or B and now it's up to me to return a value that says which one should be before the other and so I can actually just say a dot color minus B dot color because if you return a positive number a negative number that means positive means one before the other negative number means the others before the other and then zero means they're equal that's how you're telling it to sort so this should be a way of sorting the array and sort actually manipulates the existing array not making a new one so this now if I run this we should see look at that the brighter ones are always on top of the dark ones which is kind of an interesting effect again you know I you could probably invent your own scenario of layering as to why you want to do this but now we have a particle system coding challenge 78 that has map and fill to create an initial set of particles it has sort to sort the way I'm drawing them based on brightness I'm using a four of loop to be able to iterate through all the particles and I'm using filter to filter out particles that I no longer need that have faded out as a bonus I think it would be interesting for me just to try to use for each right so I could also say if I really want everything to be a higher order function I could say particles for each right and then I could say this but I need multiple lines of code so I'm gonna say P dot update all the laws of physics are like exploding around in my head as I'm using for each loop I can't believe I'm doing it so is this right let's just run this hey and let's put the centroid back in there we go so I can't believe I just did this but a for each loop what a for each loop does it says apply this function to every element of the array and my function is to update and show if incidentally I because I have two lines of code I have to write out the full curly brackets but I could do this I don't know what the point of this would be but if I just wanted to write it like this just to be like kind of a crazy person for today I could say update all of them show all of them and sometimes you actually want to get through updating all of them before you draw all of them so this would do that let's see and there we go I have really I'm like a Maya function do I qualify as a functional programmer I seriously doubt it but I have gone through and hopefully shown you a bunch of techniques for applying the arrow syntax and functional higher-order functions of JavaScript arrays in this video hopefully you learned something it will improve or help something you're doing in the future please let me know in the comments and thank you for watching [Music]

Channel: The Coding Train

Views: 37,545

Rating: 4.9446807 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, nature of code, live stream, itp nyu, es6 arrow functions, es6 arrow, map es6, reduce es6, reduce javascript explained, array reduce javascript, javascript reduce method, higher order functions javascript, es6 tutorial, es6 tutorial for beginners, es6 javascript, particle system

Id: m9bRVQ_-DXY

Length: 20min 19sec (1219 seconds)

Published: Sat Feb 24 2018