Coding Challenge #27: Fireworks!

hello and welcome to another coding challenge in this coding challenge I'm going to program a firework simulation Oh puh ping and I'm going to program it from scratch in javascript in the browser the version that's running actually behind me is a version that I've made in processing a Java based platform the code for the one behind me and the one that I will make in this video we'll both be available in links in the description and at the end of this video I make I'm hoping to return back to this processing 1 and also turn it into 3d fireworks this might have a three dimensional like quality to it but it's really just two dimensions ok so here we go so let me minimize this code which was the processing version get rid of that and I have a blank JavaScript can html5 canvas and I have some JavaScript code so the first thing that I need to do is I need to have I want to have this idea of a particle I need to have a particle so I'm going to just write a particle a constructor function where oh you know what I'm going to do is I'm going to the particle should have a position which will be a vector the particle I need to use physics here is going to have a velocity which will right now be just zero and the particle is also going to have an acceleration so I'm going to kind of custom bake a physics engine that's the same sort of model that I use in all my nature of code tutorials and videos about physics but I'm just going to kind of bake this from scratch really quickly then I'm going to add a function called update and that function does what it takes the velocity and adds it to the position and it takes the acceleration and adds it to the velocity now where does it get acceleration well that I need to have a function I'm going to call it apply force and in that function I'm going to get some sort of force and I'm going to add that force to the acceleration this is the idea of force accumulation force equals mass times acceleration or acceleration equals acceleration equals force equals mass times acceleration or acceleration equals force divided by mass but I'm analytic mass in for simplicity so acceleration equals force are all the forces of a moment added together so once I do that I also need to make sure that after I update the particle each frame that I multiply its acceleration by zero to sort of clear it out because the acceleration at each moment in time is going to start with zero okay so now I'm kind of got this both last thing I need to do with this particle is I need to have a function of a college show which draws just for simplicity just draws the particle at where where a mix it as a point this opposition dot X and this dot position dot Y and what I'm going to do just for one thing I learned recently about p5 GS which by the time you watch this video in the future may not really be the case anymore but if I set this stroke and the stroke weight up just in setup and don't set it over and over again it sometimes can run a lot faster so just to test that things are working I'm going to make a variable called a firework and I'm going to say that firework is a new particle which lives in the center of the window and I'm going to say here in background firework in drawn a safe fire worked on update and fireworks show so I want to now go back to my sketch and see ah I have some error so particle J s let me make this a little bit bigger that's really big but particle J s line number 6 has an error let's see particles I just this dot apply force equals OP function is spelled with a C we refresh there we go so you can see there's the particle in the center things are working so far the next thing I want to do is let me give let me have this particle start at a random width and all the way at the bottom of the window and let me give that particle a velocity pointing up so let me say it's velocity is negative 4 pointing up let me run this there we go we can see it's going up each time i refresh it it starts in a new random location and starts going up so we're getting somewhere the next thing that I want to do is see if I can add some gravity so I'm gonna make a gravity a global variable and it's going to be a vector that does what it points down so negative they don't pointing down as positive so 0 comma I'm going to say 0.2 and then I'm also going to say firework dot apply force gravity so I'm now adding gravity to that particle so let's run this up acceleration is not defined let's go back to the particle where this dot acceleration I'll always forget to this let me refresh didn't make it very high but that's sort of reasonable so let's make the particles velocity a lot bigger like negative 10 okay so that's good so we could see so this is the start of our fireworks simulation something shooting up from the bottom and then at some point it's going to explode and make a lot of particles but before I could do that what I want to have is just have a lot of things shooting up from the bottom continuously so let's get that going so instead of having a one the single firework what I really want is to have an array of them and actually what I want is for the firework to be its own object so I'm going to create a firework up function sorry and a constructor function and the first thing I'm going to do is it's going to have a local variable which is I so I'm basically going to do what I did here right I want it to have in this firework object I want it to have a particle it's going to have that particle the firework itself can have an update function and whoops what happens in the update function it does all these things these things it adds gravity and updates that firework and then I'm going to also have a show function for the firework object and I have a I can see I have a syntax error and which I'm going to fix in a second so the idea here is the particle write a particle is an individual particle this firework object right now is one particle but the firework object is also going to in a moment not just be the particle moving up but suddenly all the particles that explode from it so I need this object to keep track of that individual particle and then also an array of particles but this should at least get me now if I say firework dot push new firework and then I should be able to say firework dot I should be able to say fireworks should be an array then I should be able say look at all of the fireworks dot a length I plus plus and you know I could use a for each loop but I'm choosing not to just for clarity update fireworks index I show okay here we go so now okay firework is not defined in line six yep I need that as always I always forget to this stop this dot this dot I'm going to do this this dot this dot this dot this dot song never forget the Vince dot but somebody could pose that song for me and ruin this again there can see okay so it happened and now what I'm going to do is I have this line of code that puts a new firework object in the array and I could put that line of code in draw and if I put it in draw over and over and over again it's just making these fireworks making these fireworks I don't want to make them that often so I am going to say if random one is less than point one so every frame there is a 10% chance of making a new firework let's try that that's a little bit better so it's making them kind of randomly every so often so that's a good start and now what I also want to do is you know I think this should be a random value so let's say random between negative 15 and negative 5 so that way they don't all go home and so that the range might be off there let me make the range a little bit calmer let's do this so anyway you get the idea that they're not they're also not all going to just go up to exactly the same height so now we're pretty good we've got our system of the fireworks going up over time but I need to figure out what's the point where I want them to go poof and explode into a bunch of particles okay so how do I do that here in the update function one thing I should edit point timeout back I what I need to do is I want to check something I could do is it how do I know when the firework gets to the top point well its velocity is negative its velocity is negative its velocity is negative in the y-direction now it's zero now it's positive now it's positive I want it to explode the moment it reaches that top point so I can say if this dot firework dot velocity is letting down is greater than zero is greater than or equal to zero this is the moment where I want it to explode so what I'm actually going to do is I'm going to say this dot firework equals no so I'm just going to like set the firework to null so that it's like that will make it disappear essentially so in and what I'm going to need some like I'm going to have to say if this dot firework so I only want to update apply force and update it if it exists and I also only want to show it if it exists so let's just see you know there's lots of other ways I could do this but this is just going to be a sort of way of me tracking it could have actually a boolean variable like exploded or something I might I might change it to that later but let's see how this works so hmm that's weird if this oh well that's if the Y component of the velocity right if the Y component of the velocity let's add that who cannot read velocity of no where did that happen ah okay well this is up issue so this little bit can go inside here like also as long as it exists there you can see now it's disappearing the moment it kind of gets to the top so that's good and what I want is when it gets to the top I want it to just go into a whole bunch of particles so I actually kind of feel like I'm going to just change this just for to be I'm going to say this dot exploded is false as long as not this dot exploded apply force if it's then say this dot exploded equals false because as long as this as long as not this dot exploded I think I would prefer to use a boolean variable if it equals true so this should be the same exact result but I'm not doing this sort of null thing okay so I used a boolean variable to track when it's exploded now what do I do when it explodes well what I need to do is I need to suddenly right here I'm going to just say this dot explode I want to put this in a separate function and I'm going to write a function now called this dot explode and what do I need to do in this function I need to make a whole lot of particles let's make a hundred of them so for VAR i equals 0 i is less than 100 i plus plus what i need to do is say VAR p equals a new particle and where should that particle start so it's about to explode where should that particle start it should start where this dot fireworks position dot x and this dot fireworks dot position dot y so i need to make a whole lot of these particles and now i need an array the firework object in addition to keeping track of this sort of like seed firework should keep track of this dot particles and array so it has an empty array and i am now going to say particles dot push P okay particles push P now what I also then need to do is and I'm going to just do this here right here what I need to do is display all those particles index I dot show so oh and this has to be this dot particles and this has to be this stop particles in xio so what I've added here is the moment that particle reaches the top it makes a hundred new particles and then draws all those so let's see what this looks like whoops cannot reach show of undefined firework J s index 30 Oh this should be this dot particles dot length because I don't want it to show non-existent particles that array is only going to 100 as soon as as soon as it is exploded let's run this again look at that oh it made a hundred particles none of which move or do anything pretty weird right well first of all why aren't they moving well I forgot something I forgot that I also should call here in update I should also call for all of those particles apply force gravity and for all those particles I have to update them so I need those particles to experience physics as well well look what's happening it's making those fireworks but they're all why what happens when you make a new particle it shoots straight up so I need to make those particles in a different way so let's look at how I'm doing that if I go back to the particle object the particle is always made with a velocity that randomly points up between negative 12 and negative 8 so I could use like inheritance and have like a different two different kinds of particles that inherit but I think what I'm going to do is just add just add a third argument here and I'll call it a exploder and I'll say if exploder I don't like exploder that sounds violin I'm already using explode I guess I'm going to call it firework if firework make the velocity that way otherwise make the velocity and I'm I'm just going to do something different just so what I'm going to do is I'm going to say I want to say p5 dot vector random 2d so I'm gonna have any random Direction okay so if that's boolean variable is true it's going to make it as like one of those original firework things so let me go back to this firework object and this particle it needs the last argument of true these particles it needs the last argument is false but in JavaScript if I don't I can also just pass nothing in and that variable will have the value of undefined which will evaluate to false this should now if i refresh this we could see now I'm getting something closer so now why are they why are they exploding in this perfect circle well the reason why they're exploding in a perfect circle oops I have some old notes from a computer vision tutorial is I'm giving them a random velocity which is a unit vector all of length one so they're all going to explode out in a perfect circle so one thing I might do is just have those the length of those vectors be a slightly random length but and I'm not going to do this in this tutorial but you should make heart fireworks for example so what if you could figure out if I draw a heart like this from the center vectors pointing out to the edges of a heart so you could actually or you could use we've got a fireworks that display letters or particular kinds of shapes so the way that you pick those initial velocities of that explosion can really make parts or rainbows or unicorns or whatever kind of shapes you can imagine that you might like to make so I encourage you to do that as a kind of riff off of this you can also notice that right now it's running really really slow so that's another thing we're gonna have to fix but let me just go back to here and I am going to where was I under particle now the other thing I want to do is I actually want to in the particle object I think I want to keep track of this this whether it's the original firework or the particle because I want to like do other things that are different so I'm going to say this because I also want oh you know what I'm but I'm gonna leave that for later okay so let me fix this and say random 2d and then this stop velocity multiplied by something like oh I know what I'm gonna do in a second x between you know two one and six so now it's a magnitude is going to be scaled by some random amount me run this again ooh okay that didn't work what did I not do right let me look at this this dot velocity multiplied Oh random a random value between 1 and 6 ok so you can see the hell they're really exploding kind of like wildly there's also too many of them so I can't really see what's going on that well so I'm gonna go back to the sketch and make them like quite a bit less often lost power but I'm back now and where I what just was is I was saying if this is not one of the seed fireworks particles if it's not one of the seed firework particles let's take its velocity and multiply it by something like eight point eight five so that it slows down slows down every frame and you can see that kind of gives it this sort of like burst out that sort of slows down and stops now there's sort of a funny thing happening where they're still there and when you see a firework it explodes it kind of like fades out and you know I'm not going to get too crazy with visual dressing here you can make stuff Sparkle and have trails and glow and all sorts of stuff like that but it'll eat sleazy add something where the fireworks fade out so what I want to add is a variable I already did because that's before the power ran out I'm going to add a variable called this lifespan equals to 55 and what I'm going to do is in the update function I'm going to say is law also if it's not one of the seed ones I want that lifespan to go down by one and this maybe I want it to go down let's actually have it go down by for each frame and what I want is for the particle to have a stroke which is its lifespan so so I want to give it some alpha so to say if it's not the sort of seed firework do that to the stroke otherwise just have a regular stroke and then also let's make them stroke weight too and we'll make the those a little bit thicker so let's see what this looks like now was it running really slow note Oh life span is not defined because I need to say nice man let's try that again so you can see here now this is a little bit better now you know I should fiddle with these values like maybe this should be a you know 0.9 and its initial values should actually be between like two and ten and whoops and over here we can see what that looks like now and whether this is better or worse I don't know but I'm going to let you sort of like consider that on your own but I now have the basic idea you can see very quickly now though it's starting to run rather slow so we're losing a lot of frame right here why are we losing a lot of frame rate well it doesn't matter whether the particles have faded out or left the screen I'm never I'm never getting rid of them so there's a bunch of things I need to do number one I need to say I need to figure out a way of getting rid of particles so here in this in the fireworks system what I need to do as I'm looping through all the particles first of all I actually want to loop through the list backwards because going to do something where I'm start plucking them out of the list and if the list is shrinking its contracting from the end it works better if I'm going through it backwards and taking things off the back end so what I'm going to do is I'm going to change this loop to say go for a particles length minus 1 and greater than or equal to zero and I - - let's make sure that still works so nothing's changed it's still working and what I need to do go away finder what I need to do now is say ok well if this particles index I is done then this dot particles duh splice I so splice is a JavaScript function that deletes something from an array and you can actually splice at I a bunch of things after it but I just want that one particle so if the particle is done splice well how do I know if it's done I need to write a function that says if it's done so in particle J F I've got another function I need to add I'll just add it over here this dot done and what I'll do is I'll say if if this dot lifespan is than 0 then return true so that lifespan which is counting down else return false so let's run this it's hard to the Oaks we have an error particle j/s line 30 line 30 here this not done equals function so now I have no way of knowing if it's actually removing the particles it does seem to be like performing a bit better like not slowing down so those particles are being deleted but they're actually still a firework object the system object in that list so what I want to do now is add over in the firework object also a function that says this dot done and how do I know if that thing is done well it is done if that particle is exploded and this dot firework dot sorry this dot particles dot length equals zero right the particle system itself is done as long as it's in a state of having exploded and there are no panelist particles that fade it out so if that's the case I should be able to say return true otherwise return false so now I can go back to the sketch here and what can I do here in this sketch I also want to loop through this thing backwards fireworks at length minus one I is greater than or equal to zero I - - and I want to say if fireworks dot length of so fireworks dot done fireworks index i dot done then fireworks in the splice I comma one so now and what I'm going to do is I'm also going to add just to make sure this is all working I'm going to add console.log fireworks dot length so now we should be able to see you know as you can see that that length is going down so it's never going to be too many things on the screen so performance wise it's going to work fine so this now is and you know Java Script canvas drawing can be a little bit slow but you can see I've got kind of you know with 100 particles per system it's kind of running reasonably well now we can make this look a little bit nicer for example I could add oops I could add a little bit of alpha to the background meaning have the background transition into and we'll have each firework draw a little bit of trail let's see how this looks right that has a little bit more firework like quality to it that's nice then of course I could say well let me give it a color mode of HSB and I could say for each firework let's for each firework system is going to get its own color so it should get a hue value is a random Q and then Oh every time I make a particle I'm going to also want so the system gets a hue and then I'm going to want to send that hue into let's do that before the last argument here into the particle objects so they can use it as well so anytime I make a new particle even in the explode function I also make new particles so I'm going to say this hue and false and then now in the particle object I can add a variable to get that hue value and then I can say a stroke is the hue 255 255 Q 255 255 with a with no alpha and now when you run this we can see we have now we have rainbow oh how come I lost the trail that's weird what did I do to lose the true oh you know why I lost the trail is because I changed it to use the color mode to HSB and the background is now doing something weird so this should fix that I think whoops ah look at that I wonder if this is a bug in p5.js that we've just found well I'm going to do something here which might make things run a bit slow but I'm going to just change the color mode to RGB here and in each particle right before the particle is drawn I'm going to change the color mode to HSB let's see if that works there we go so that should be I think that seems like a bug to me like there should be a way to have an alpha with the HSB color mode but now we've got it working and you can see there we go so there could be a lot of finesse here right I could have those velocities go at an angle I could think more thoughtfully about what the velocities are the bursting particles are I could have a variable amount of particles I could think more thoughtfully about the design I could actually store a list of history of the positions to draw a trail myself I could use like textures I could use something called additive blending maybe all to make things appear more glow like but um but you can see here here's the basic idea so I encourage you to take my JavaScript code and make some improvements on it and I want to make a 3d WebGL version of this but that's before I'm ready to do that I'm this is this kind of concludes this video but I'm just going to keep going I'm going to go back to my processing where I'm going to close this I'm going to go back to my processing sketch which is basically exactly the same code that I just wrote but it is oh it's doing it fullscreen I forgot that it's doing it so one of the things about using Java on a desktop environment is I can kind of get a bit more speed out of it so I have now this full screen application but this is still 2d so what I want to do with this one and let's let's take off the full screen for a second just so I can kind of see it a bit more clearly let's make it 800 by 600 what I'm going to do here is I'm going to change this to p3d each particle when it gets drawn is a point but I'm going to say push matrix I'm going to I need to do three actually I could just use I'm going to do through this anyway I'm going to do translate to add that z-axis and I'm going to say point at zero zero so let's just make sure still runs oops they're all shooting off above the screen because when I made it smaller the initial velocity should be less strong so let me just run this again I'll fix that again later okay so that's still working now what I want to do though however is these particles when it explodes somewhere somewhere I create that vector the random vector probably in particle system that firework object and yes and then it makes a new right here it makes a new random 2d vector I want this to be random 3d let's look at that let's see if this works now can you see anything different here I'm not so sure you can but technically speaking it should be a random 3d vector let's see if we can now actually start to rotate the scene to see if this really works so I'm going to add I'm going to import a library called PZ cam which I always I've been doing which I can style say I can add a PZ cam object and I can say a cam equals new PZ cam this and I'm going to say 500 like I want to look at it from 500 pixels away the other thing that I need to do is when I make the initial particles their location sorry when I make that initial particle its location should be random PZ can mix everything relative to the center zero zero so I want to look for random negative width divided by two to with divided by two and then I also want to change the bottom of the screen is now height divided by two so let's run this and see what happens ooh ooh peace okay oh okay hold on three PZ cam is very unhappy with my Oh clearing of the background technique so I'm going to lose the trails I can get those back in another way and just say background zero I forgot about that once I have PZ cam okay now let's start manipulating the scene can you see I'm looking at it from above now yeah so you can see I need to make a lot more of these to be able to see this more easily let's add let's have a lot more being added and let's also make the stroke weight of these particles much bigger and let's have their lifespan lasts a little bit longer and let's run this and okay so now and let's actually just make this fullscreen again because that might help so I want to make the initial random velocity much bigger and I'm going to go back and make this fullscreen in P 3d and let's see if we get some nice 3d fireworks here ooh that I can kind of like yeah you can see there they are oh no no no oh yeah they are 3d but they're all like in one plane so I should also probably mess with where they start okay so let's mess with where they start so this starting location is oh it happens here which is a particle and I don't give it a Z location it's Z ooh new particle a random okay hold on the new particle gets a random X Y and a Z and it should have that x y&z and so let's give it a 0 and 'm and then let's give it a random z which is going to be sometime somewhere between negative 300 and 300 and so i'm going to run this okay now let's sort of zoom out and look there we go so we can see that's not so there is some Z depth there it's not very much let's make that more extreme I pretty sure did I get it will should know now yeah okay now you can see I've got 3d fireworks so and then you can see that I could probably do something where I have them burst out quite a bit more and I now have upside down so anyway you get the idea you can play with this more so I encourage you I'm going to post in the description of this video the processing code I'm going to clean this up a little bit the processing code for the 3d fireworks as well as the browser JavaScript code I need to get rid of the fullscreen thing this has to stop stop as well as the I lost I lost everything ah come on no come back fireworks fireworks fireworks somebody see a fireworks p5 as well as the this code the JavaScript version of the 2d fireworks and I hope that you will make pretty shapes out of them I hope you think we will add angles and that you will think of different ways of doing this and come up with a creative take on this and post it share it with me in the comments or on Twitter or whatever wherever you find to the internet to share it and I hope you enjoyed this quick coding challenge wasn't very quick probably of how to program a firework simulation from scratch thanks for watching

Channel: The Coding Train

Views: 285,612

Keywords: coding challenge, p5js, processing, creative coding, 3d, daniel shiffman, fireworks, p5.js, javascript, tutorial, processing tutorial, programming challenge, nature of code, oop, p3d, coding, 4th of july, p5.js tutorial, object oriented programming, forces, gravity, nature coding, independance day, fireworks simulation, javascript fireworks, html5 fireworks, html5 canvas fireworks, processing fireworks, fireworks tutorial, particle systems, particle systems tutorial

Id: CKeyIbT3vXI

Length: 34min 34sec (2074 seconds)

Published: Sat Jul 02 2016

Reddit Comments

[u/nopedidnthappen]

clearly he wants us to make a r/send_nudes with fireworks