Coding Challenge #78: Simple Particle System

hello welcome to another coding challenge in this coding challenge I'm gonna try to very in a very simple way in a quick way program a simple particle system that resembles something like smoke so I'm gonna do this probably in a way that has very little visual interesting quality to it whatsoever and it's my hope much like with my recent entrant and recursion coding challenges that I see a wide variety of clever beautiful remixes of this simple idea and what kind of beautiful particle system ideas can you make out of what I make so let me just start by making it so what I'm gonna do the idea of the particle system by the way is creating something out of many particle things that's like the worst ever definition of a particle system but incidentally the term particle system was coined for originally for the movie the Wrath of Khan the effect the Genesis effect there's a effect where like this thing gets shot at a planet that doesn't have anything on it and kind of planet kind of catches fire and then all of a sudden it's all green and life is there and so anyway I think it's William T Reeves there's a paper I'll link to all that the history of particle systems in this video's description but let but the idea is I want to make and I'm gonna do this as a class so I just recently started using es6 and I made a bunch of tutorials about classes and objects and I'm going to use that technique in this video so I'm gonna make a class anytime I make a class I need to make a constructor and this particle now I could use if you look at my nature of code videos I use this thing called a P vector that's in processing in p5 there's something called a p5 vector but I'm gonna stay simple here and I'm just gonna make this X just an X a separate X which will be 300 and this dot Y which will be 3 380 so the reason why I'm doing this is I want my particles to in this idea like you know I could do anything but I want them all to start at the bottom and kind of come up word and fade out which will hopefully give me a somewhat smoke or fire like effect it probably will not look like that at all but that you're gonna you're gonna modify it and make something much better ok so I want a function called show for each object and in in show I'm just gonna you know like loading images and using textures to draw the particles would be a nice technique to create more interesting visual effects but I'm just going to draw them as circles this dot X this dot Y and I'm going to give this I'm gonna have it be a diameter of 16 and I don't if the width and height are eco I can just use one I'm gonna say fill and I'm gonna give it some alpha and I'm gonna I'm gonna say stroke 255 just so I can see it really well now and so the Alpha will be like 10 so now let's just try making a single particle I'll just call it P P equals new particle and P dot show so let's run this there we go there's that particle now I does it is a little bigger so there's this is it I have one particle there it is at the bottom good so now what I want to do is obviously I'm gonna need many of them so I'm gonna change this to be an array and what I'm actually going to do is I'm gonna say in draw let P is equal a new particle and then I'm gonna say particles dot push P so what I'm going to do is I'm gonna use the push function which adds an object to the array and let me put this in setup now just for the sake of argument so I'm going to put one particle in the array so that now if I write a for loop that's in you know Q they're complaining about not a for each loop where I iterate over the array using a counter variable like eye and say particles index where how do I get up there particles index I dot show now I kind of have the same program this should be the same I should see just that one particle I created it and set up I added to the array and I'm showing it same exact program but now let's make that particle move so let's write a function called update let's give this particle variables like VX and V Y and I'm gonna give it an initial random like I'm gonna give its random V X for velocity so I need a speed or way that it changes along the x-axis and a y-axis so using p5 vector could be help here and if anyone wants to do a port of this with p5 vector you're welcome to and then I'm going to give it a random velocity going upward so what would that be upward is negative so something like between like negative 5 and negative 1 so an update I'm now going to say this dot X plus equals this dot DX this dot y plus equals this dot dy so the idea here is that I'm going to change the location by some random amount and so I can now for all those particles I can say update you can think there goes it goes up so I actually now I'm realizing a couple things here but what I want to do right is instead of just having one particle I mean how Lin do I want to add particles do I want to start with a burst of them so I add a hundred and set up so I want to have them once every 5 seconds so I add some sort of timer there's so many different ways but let's try for the sake of argument just adding one new particle every time through draw so I'm getting somewhere this is kind of you know perhaps somewhat like the idea smoke doesn't really look like smoke but I've got a particle system here so things that I would want to do and then way I could stop here and I could say hey you make this more creative and interesting but I'm missing some key features that I really need to have here so first of all one thing that I want to try doing is I want to give these particles a transparency so let's actually give them a variable called alpha and we'll start it at 255 and I'm gonna use this variable here in its fill this dot alpha and in update I'm gonna say this dot alpha - equal 1 or - - or something so each one will fade out I don't know - equal 5 let's have them fade out pretty fast so it's gonna lose some alpha with each frame so you can see there this is going to hopefully help me have something a bit more like smoke and thus trochus is there so I'm still seeing them all so what I want to do is let's actually take out the outline color we can see okay how did I do oh let's roast a marshmallow by the white circular fire delicious okay so actually in a way I'm kind of done but there's there's some more things I should really think about here number one is hmm after I run this for a while it's gonna start really being really really slow for example particles I could look in the console here particles dot length there's eight hundred thirty particles right now but I don't need eight hundred thirty particles right and if I look at it now there's a thousand fifty particles I'm adding new particles every frame but I'm never getting rid of them so I want to make sure that I remove particles so there's a different ways I could do this I think one way that I'm gonna try to do this is I'm going to remove the particles when their alpha becomes less than zero so one way to do that is with the splice function and so if I come back to this main loop I could say if so one thing I might add I'm gonna say if particles index I is to delete another kind of function that's kind of a weird name I want this function to delete to tell me true or false whether I should delete it it's like a question to delete delete' finished maybe I'll just call it like finished then I want to remove this particle so let's write that function first so I'm gonna call this function finished and basically I'm just gonna return this dot alpha less than zero so it's a little bit weird like I'm just writing return the results of this dot alpha less than 0 so this not alpha is less than when it's less than zero this will evaluate to true or it will evaluate to false so this function is either gonna return true or false and it's true when alpha when it's faded out I don't want to display it anymore so let's actually put that stroke back just so we can see it and then let me how do I remove a particle why I could actually say particles dot splice I comma one so I happen to know this already but this splice function is a that removes an element from the array at position I and just that one element so now look at this you can see them getting removed now something weird is happening you see this like weird like flickery like thing so there's a little bit of an issue I've I've covered this in so many different videos I'm not sure if I should cover it here just point to it but I'm gonna I think I will covered here really briefly huh so there's other ways around this and in many ways if I took out the stroke I wouldn't have this problem visually but what's happening here is if I have an array that has a bunch of spots in it and I call these like peep a particle a particle B particle C particle D particle E and these are in spots 0 1 2 3 4 well what happens is if I'm iterating over this if I'm saying check spot zero should I delete it nope check spot 1 should I delete it nope check spot - should I delete it let's say yes I should delete it so I delete this one and now I have the array looks like this it has instead of having 1 2 3 4 5 it has 1 2 3 4 things in it PA PB PD and PE 0 1 2 3 so the next one I should check is number 3 right which is the last one notice what happened I was here so these shifted over and then I went to the next one which actually I ended up skipping PD so so this could be a problem and a way that I could do this is just go backwards because I'm going backwards I check this when I check this one then I check this one if I remove it these shift over it doesn't matter I'm not affecting the beginning of the array and in some ways this is less of an of an important issue right here but it is this is the thing you need to be thinking about if you're using a counter and iterating over the right like if ideally we're on adding stuff to the array that's also really gonna be a problem cuz I'll never get to the end and I'll be stuck in an infinite loop so here's a way around that I'm gonna start at the end of the array particles length minus 1 then I'm going to say greater than I'm gonna go down to 0 and say I - - just gonna go in the array backwards now you can see was the stuff fades out it disappears there's no more weird flickering there's a little weird that they just disappear suddenly but this is mostly just because of the fact that they have this stroke on them now I'm only removing them when I can't see them so now if I look at particles dot length is only 51 particles and I run this for another few seconds while I'm talking and there's still only 51 and there's still only 51 so the timing is working out such that there's only ever going to be 51 so how could I make this look more like smoke well one thing that might be important to play with is how many particles do I want to add each frame so this is now five particles per frame whoops and oh sorry this needs to be inside the loop so you can see here you know does this look more like smoke left like smoke but so that's one parameter here that's important to work on but here is really what I think is important number one is oh I didn't even add any acceleration so like adding some type of acceleration so I'm not gonna do this in this video but this is what you want to think about what's a different way that you could pick initial velocities should those velocities change over time what are you actually are using color what shape are you drawing do the size of those circles vary are you can you make it feel like something that's not smoke or fire but more like a confetti bursts or something fireworks I have another coding challenge where I do fireworks which is pretty similar to so there's a lot of possible things you could do and so I'm gonna end this here with this code and I won't look forward to a thousand particle flower systems blooming please share them with me hashtag on Twitter particle train particle trade particle train particle train no what's that song particle it's particle man it's the day might be done the particle train is good so hashtag particle train on Twitter I would love to see little gifts and animations of all your particle systems that you make share your code and I look forward to seeing you in my next coding challenge [Music] you

Channel: The Coding Train

Views: 64,719

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, itp nyu, class, es6 class, es6 arguments, es6 OOP, es6 object oriented programming, array objects, array objects es6, particle system, smoke effect js, smoke effect javascript, particle system javascript, particle system canvas, html5 canvas smoke effect

Id: UcdigVaIYAk

Length: 13min 31sec (811 seconds)

Published: Wed Oct 11 2017