Coding Challenge #88: Snowfall

hello welcome to a winter themed coating challenge you know something that I that I thought I should say is this coding challenge is probably very similar to my previous Purple Reign coding challenge but instead of Purple Rain we're going to have wintery white snow so I've got a blank p5.js sketch here I am going to try to make little snow particles that fall I'm getting some suggestions from the chat about like wind and that type of thing so let's just get started oh I've got a nice PNG snowflake there okay so I'm getting lots of so this I don't know how this is gonna go you might be watching this as a recorded video sometime in the future from your spaceship that's flying around but but I at the time of this recording there's a live chat going on and I'm gonna try to get some good suggestions so the very first thing that I need to do this is my codes all it is I'm gonna start with an object-oriented approach and I'm actually going to make a new JavaScript file and I'm gonna call that file snowflake dot Jas and I am going to make a class called snowflake and that class is going to have a constructor and it's going to have a position and all of these are going to be vector objects if you haven't seen a vector object yet a vector is an object that holds an X or Y and a Z because we could do this later maybe a part two in 3d and WebGL we could swirl around the snow and go through it in 3d or boy wouldn't that be exciting but we need a velocity and we need an acceleration all right now also we want a function just to render the snowflake and for now I'm just gonna say it's white and it's about four pixels wide and it is just a point and so the point will be at the position the X&Y position oh look at this I'm wonderful sprite sheet of snow textures we're gonna grab that so thank you I'm seeing that being submitted Alka if you could make me a nice like URL that I can download it here as we're going alright so what do I want to do now okay so I definitely want to have an array so I'm gonna make an array empty a ram to call it snow and what I'm gonna do is I'm gonna say snow dot push a new snowflake so I'm gonna have at least one new snowflake I'm gonna have one new snowflake and then I'm going to say for every flake in of snow right this is my new favorite kind of JavaScript loop where I have an array of many things and I could say for every element in that array but it's up in does something different oh I got to do a video about that cuz I really botched my previous one I'm gonna say snow Oh - flake dot render and let's probably pass in never mind let's let's let's set the location of the snow in the constructor itself let's just hard code it right now and let's see we get Oh snowflake is not define why is snowflake not defined because I forgot in my HTML file to reference that javascript file and I'm being told by Simon that maybe I have a syntax error somewhere I'm not sure where I'll let's just see what happens oh there it is there is a beautiful snowflake I have a keyboard now I don't know how to use it yet but very excited about this edition okay there is the beautiful snowflake now what I could do is I could actually say in draw let's keep adding snowflakes now I think I'm adding many many many snowflakes but they're all being added right in the same spot so let's add all of our snowflakes at a random location let's pick a random with a random exposition and a random Y position is associated with snow in my head it's a winter or something anyway now here's the thing I think I want to create all my snowflakes above off the screen and have them fall down so let's do that so let's actually in the snowflake object let's create the Y location something like between negative 100 and negative 10 so somewhere above the window so now if I were to rerun this sketch I won't see any of it but I can add a function I'm going to call it update and what I'm going to do an update is I'm going to add the velocity to the position and breaking news - drew - breaking news somebody will think that sound effect eventually I now have our sprite sheet there we go so let me download this desktop snow and call it flakes 16 okay so we've got some images we'll be able to use later great okay now oh I would say is the position of each snowflake needs to change over time how about based on the object's velocity so I can use vector math to say add the velocity to the position every frame and so I can now say flake update I want them all to update now I still see them moving down cuz they none of them have a velocity so I could do something just to test and I could say hey give all of them a velocity vector that's kind of fast pointing down like zero comma five and we would see there's all of us know but this this this is not really snow yet right what we want I mean it's never gonna be actual snow wouldn't it be wonderful like it's magic I need more props have snow falling in but what I want is I want to see it feel a little bit more like gravity so what I'm going to do is I'm actually gonna create a global variable called gravity because gravity isn't part of a snowflake it's part of the world so to speak and I'm gonna say gravity equals create vector and I'm gonna make up something a little small gravity pointing down and then actually what I want to do is again I want the velocity to start at zero but I want the acceleration equal to gravity and I want to add the object's acceleration to its velocity so I'm gonna do more with this in a little bit but the idea is gravity is a force a force is a vector that moves an object with mass that accelerates an object with mass F equals n times a right so so what I want to do is take the gravity force and put it in the objects acceleration which changes the velocity over time and what we would see now is snow starting to fall faster as it gets further down right so this is starting to look a little bit more like snow there's a lot more for us to do here we want to we want to add some wind you know we probably want the gravity in the case of snow gravity's probably the wrong word I should just to be very light so it feels like it's moving very very slowly however hmm I wanted to create this parallax effect so so how do I do that let's think about this well one thing I would like to do is give the the give this the snowflakes themselves some kind of size so let's try this let's give them a property called R that's a random number between four and eight and use that as the stroke weight and we can see now this is kind of nice right so this is nice now somebody in the chat I don't know want some help here so what do I want I want the bigger ones falling slower and the smaller ones falling faster no the other way around if something's further away it's smaller and it will look like it's falling slower if it's bigger it's closer to look like it's falling faster is that right and so should I actually just alter the gravity like let's make a copy of the gravity vector so one thing I should do okay so first of all I should write a function called apply force and that takes a force and what it does is it just adds that force to the object's acceleration big and then I clear out the acceleration every frame so this is known as force accumulation I have lots of videos that go through this in more detail but the idea is there's different techniques for doing this that what I want to do is say there's a bunch of forces in the world I want to accumulate all of those forces so so like I might have some wind I might have some gravity so and we may be at some like Perlin noise flow field kind of thing yes I need to have a mass and although people are giving me great suggested to the child I'm gonna get to those not ready yet so what I really want to do is I just want to say flake apply force gravity because gravity is a force that's coming from outside that I want to send into each snowflake so this should really be the same exact the same exact sketch now we've really got to fix something before we get too far so number one is IV either want to like recycle the snowflakes when they get to the bottom or remove them because as you know this is already running really slow after a little while let's deal with that so what I want to do is I want to loop and actually I'm going to do this thing that I do in lots of coding challenges where I'm gonna loop through an array backwards and I'm gonna say if flake off-screen snow dot splice I can't type today I comma one so what am i doing so what I'm doing here is I want to go through every miss flake if snow index I is off-screen so I need to use an iterator a counter to go through all the elements of the array because I want to eventually use the splice function which removes something from the array and the thing that it removes i specify the index i want to remove the snowflake at that index and just just the one i don't want to remove the one the one after and i'm going through the array backwards so as i remove them the array slides down and is shorter and I don't end up missing any elements definitely done this in other videos before okay so this isn't going to work because this idea solely off screen isn't magic so I need to go back to the snowflake object and I need to write a function called off-screen and yeah I'm being told breaking news to do that I'm being told that I have I plus plus somewhere where I need I - - I will fix that but definitely would result in a problematic infinite loop I now want to say return of the boolean value of if it's off-screen and I can determine that by saying this dot pause dot Y is greater than is it greater than height plus this dot R so in other words if it's off the screen based on its size then then return this will evaluate to true or false if it's true it's off the screen all right all right back to sketch now this definitely needs to be I - - thank you for that correction and now let's rerun this sketch all right now the question let's look at the length of the array 194 193 so that's definitely working it's kind of hovering around 200 particles which is reasonable to render that's good okay so now I think what I want is let's try to get that parallax effect let's see if we can make that happen so what what would happen if I before I send in the force oh so interestingly enough I'm ignoring an aspect of Newton's law so typically I might do something like this right what did I just do here what I said is before I take that incoming force and add it to the acceleration divided it by mass and that's because force equals mass times acceleration or acceleration equals force divided by mass so this is me dividing it by mass now of course with gravity ha the force of gravity is scaled by mass because force of gravity equals the mass of one object engine masters another object divided by just 2 squared so this is kind of actually irrelevant here this is problematic so I am going to not include this right now but what I'm actually going to do is I am going to I'm gonna like have a little like parallax that how you spell it parallax effect hack let's see if this works somebody will hopefully help me with this I really need help with this so what I want to do is I want to make a copy of that incoming force and I just want to I'm just going to multiply it by the object size because if it's bigger I want that force to appear let it and that it's stronger and then I'm gonna do that so let's this let's see if let's see what this does I think it's not strong enough and also there's kind of an issue where yeah let's let's make this size differential much more extreme that's sort of like kind of I forgot to set the terminal velocity that's a good point so I should have the snow have a terminal velocity and that terminal velocity so let's let's try that let's see if we can make this this terminal V equals this dot R we're gonna make it related to its size I don't need another variable let's try that okay so let's see I'm so I'm very thrown off by the so I want to say this dot velocity dot limit this dot R so the limit is a vector function that takes a given vector and limits the length of it so let's see how this what this does too much speed yes way too much speed right so let's say it's limited by its size times point like 20 percent of its size that's better right all right let's see if we can use a sprite sheet now really as an exercise to yourself if you're watching this and you're following along you should stop right now more small ones and fewer big ones okay great suggestion so how do we do that oh I love this suggestion how do we have pick a random number that's more likely to be small than big let's write a function called get random size and I'm going to just put that separately up here function get random size and what I'm going to do now is let's do the pick two random numbers approach this whole this will kind of be easy so I want to pick two random numbers and I'm going to say if random 2 is less than random 1 or its greater than wait-wait-wait is greater than random 1 so smaller numbers will be more often then return random 1 while true so this isn't very efficient I feel like there's so many other more efficient techniques but basically basically what I'm doing is I am trying to pick 2 random numbers 1 which qualifies the other one so so in other words let's say I pick a point 1 well now you pick a second random number point 1 is going to make it past this level 90% of the time point 2 is gonna make it past 80% of time 0.8 is only gonna make it past 20% of the time so this is linear but I think it'll do pretty well for now and then I want to map that value which has a value between 0 and 1 and so I don't really need to map it I'm just a random 1 times 36 so now we should have more smaller ones and you can kind of see this is true right there's there's a lot more smaller ones than big ones okay Lucas in the chat is giving me an excellent suggestion which is to use the absolute value of a Gaussian distribution let's try that so what I'm going to do is I'm gonna comment this solution out and I'm going to give myself a random Gaussian number so they're in P 5 there is a function that will give you a Gaussian distribution which is a normalized distribution or the bell curve and I can change I can alter the mean or the standard deviation so I could say the mean I want the mean to be 0 but but I want to the standard deviation to be let's call it 36 so I'm going to say R equals random Gaussian x 36 I'm gonna scale it up and then I'm going to return the absolute value because random Gaussian will give me negative numbers all centered around zero and will give me a lot more smaller ones than larger ones let's take a look at this whoa that's a lot more so I don't want that standard deviation that big I suppose I could also square it you know I don't want the and then yeah this is kind of now I'm kind of getting somewhere but I am kind of liking how this looks it is running very slow over time so why is it running so slow over time because I have many many snowflakes and in fact I'm adding so many but they these small ones never really get to the bottom so one thing I need to do is I need to in addition to having a a maximum velocity I also want to say if this dot velocity magnitude magnitude is greater than is less than 1 this dot velocity normalize ok so and is it I don't think it's possible because there's some and I also think that I want to say so actually do you know what I can do I don't actually need to do this limiting here I think I don't want to ever create a snowflake that's less than like 2 pixels so another thing that I could do is I can constrain that absolute value squared between two pixels and 36 pixels so now because you can see there were just so so many small ones and so this now if we look at the size you know I'm staying it's getting bigger over time but I'm hopefully staying a bit more within the realm of reason yeah look how many small so I think though that I do need the minimum velocity to be more than do you think that I want them to move at least let's try let's try something this velocity dot that dot normalize okay so this should be better but I can also really fix the number by as everybody is suggesting by just recycling them so let's try that let's try instead of deleting them let's just create a function in the snowflake called randomize and what that function is going to do is actually all of this stuff and so when when this dot pause dot y is greater than C merging if I had just had the whiteboard I was drawn that breath and it would have made more sense if this dot pause iy is greater than height plus this dot R then this dot randomized so I'm just going to recycle these once I get to the bottom I'm gonna recycle them back up to the top this way I can really control the number of snowflakes I kind of want to just start this whole challenge over so let's let's have 300 and let's see what happens so this is going to consistently only ever have 300 what's a little bit interesting about this is that the smaller ones takes so long to get to the bottom oh I'm still adding them so one thing that I need to do is stop adding them if I'm gonna do this approach and this we should see over time we're gonna have very few large ones so that distribution is actually going to be even smaller because this the small ones takes so long to go anyway so so they like stay on the screen so actually I'm going to alter the distribution a little bit let's do one more let's do one more way of changing the size I'm just going to pick a random number between 0 & 1 and I'm going to square that number and I'm going to return 1 minus R so this is now if I had a whiteboard I could diagram this okay hmm oh but I need to scale that up by 36 so you can see what this looks like it's hard to tell but there should be many fewer now let me put that to the tenth power not one - are why do I think was one - are oh yeah there we go this is what I mention - and what I actually want to do is have at least a minimum size of 0.1 there this is pretty good let's have a minimum size of point to and besides 0.5 I'm just curious here all right okay so I think this now is working pretty well and actually what I want to do is constrain that result to between two pixels and 36 and won't anything less than two pixels there we go okay this is starting to look pretty good boy if I spent power 10 is a bit large I didn't realize I did that had that in there okay but I kind of like it with that distribution so if I'm going to constrain it then I can do this okay let's see how this looks so anyway we've seen so many different ways of creating more values that are smaller than larger and I'm gonna leave this one in here as this kind of simplest solution which is just to take a random value between 0 and 1 and make that exponential so I've much more likely to pick a smaller one than a large one because it is squaring and value less than 1 is making that value smaller but I'm actually doing it to the 5th power that sort of thing okay so so now what I want to do is finally go and let's try to use this sprite sheet so Alka I think generously I think there's a thirty to one so this is going to be good it's going to be I'm going to do this flakes 32 dot PNG so if I understand what this image is correctly it is a whole bunch of snowflake designs that are 32 by 32 pixels now again I would like to suggest that you as a viewer generate these algorithmically but I'm just gonna copy them from this image so I've actually never done this before this is a way of you know it's I what I would always do is just load these those all separate images it was obviously much better to load just a single image file and see if I can copy the pieces of it so let's see if this works ooh boy this is exciting okay so so let's go to here let's add preload I'm gonna call this I'm gonna call this textures and I'm gonna say textures equals load image F 30 flakes 32 PNG okay so let's first just make sure that that image is there let's see that it's there oh oh 0 0 let's draw it at 0 0 okay so we can see that that image is there so I'm getting all of these snowflake images which is absolutely lovely and what I want to do now is copy them into separate images so I'm gonna call this files and I'm gonna call and make another array called textures of file it's a call this file and what I want to do is I want to say for every X all the way up to I guess we could call this sprite sheet is that the it's not an array why did I set it as an array I'm losing my mind it's an image it's an image the textures will be an array I want to load that one image and then chop it up and I'm sure there's a way to do this autumn matically with some library or something but I'm gonna do it manually here so I'm gonna load that image and then I'm gonna want to go through the width of that image X plus equal 32 so I'm going to assume that each one of those is 32 by 32 and then I want to go through the Y and then what I want to do is I want to get a new image I want to say an image is sprite sheet dot get now what's the chance that this works sprite sheet get X comma Y 32 32 this should pull out a slice the get function in p5 should pull out a slice of that image a little square just from that position and then I can say textures dot push that image alright now here's the thing I want to debug to see that this is really working so I'm gonna just get rid of I'm gonna get rid of the draw function completely and what I also want to do is I am going to draw these images at their X&Y location so let's see if this actually works if the get function does what I wanted to do hmm now I probably need a can't tell if it work because there's no background uh it worked so the get function you can notice it took a little while there because it had to like chop everything up that was kind of a slow process but this actually worked so now I have an array of all those images I can put the draw function back I now what I want to do actually I need to do this beforehand and then what I want to do is give each one a design which is a random texture and I'm going to pass that design in and each snowflake is going to get that design as an image and I that probably should put it in the randomized but let's just get this to work and I'm now going to say instead of drawing it let's say image mode center and then whoops image mode center then I want to draw that image it's current image at with its size okay dare this work oh boy what just happened oh I didn't draw it at the right position I also got to include its position and there we go look at all the snowflakes now I almost feel like I need because they're so lightweight I kind of feel like I need more big bigger ones so I could go back to one of my ridiculous other techniques or I could just lower this let's just square that random number so I have more big ones but that's too many big ones and I should probably constrain it to 32 cuz that's the maximum size look it's our snow [Music] there we've made a nice book what did it take me like an hour it's a 12:45 I was gonna wrap this up around one o'clock but I think that it would I was gonna try to add a little Perlin noise wind well let's try them spinning so I don't understand how this is gonna make it look more like snow but let's try it so let's let's go here and add a variable called angle which can be a random angle between zero and 2pi and I'm going to in when I draw the snowflake I want to say a push translate this dot pause dot X this dot pause dot Y and then draw the image instead at zero zero and then have pop and then after I translate I want to rotate by some angle okay so let's just take a look at this first whoops what did I miss angle is not defined doesn't happen yet okay so I don't know if you can tell are they rotated at random angles it looks like they are yeah I'm definitely gonna do the noise function don't worry everybody it's coming so let's now let's have them rotate based on their velocities magnitude I don't know and that's way too much because we're in if I went to angle mode degrees but I could just divide that by a hundred they're all rotating in the same direction that doesn't seem right let's have them some of them go a randomly to the other direction so let's also have a direction and then oh let me I should write one of those fancy things right were you how do you do that where I have the little boolean thing if random one is is greater than 0.5 I give it a value of 1 or like negative 1 what's this thing called did everybody always uses in complains that I don't ternary operator yeah so someone who someone I never use these because I am just an old-fashioned and fried probably so ternary operation encode turnery let's look at the ternary operation syntax JavaScript I mean it's the same and most I'll get a look at it like this ah this is the condition and if it's true it's this one if it's false it's this one so what I want to say is this right if random is greater than 0.5 give it a value of 1 otherwise negative 1 all right so I think this should work because now I want to change the angle and this should be an update by the way I want to change the angle by this times this direction times this so some of them will go randomly to the other side okay so this is nice with them spinning okay so now I want to do some side-to-side motion so some options are sine wave Perlin noise wind actual like a wind force what does everybody think Perlin noise wind they spin too fast it is kind of fast right so let's make them spin slower sine Alka is suggesting a sine wave so a sine wave just to have them sway left and right like not as a force but as just an oscillating motion interesting I have not tried this so I then would need to have some sort of offset which is the result of sign of maybe that angle I know I said random when I map oh I don't actually need to map because sign goes between negative 1 and 1 times maybe I could use their size and then I can just so I need they need to have an off South X offset which is 0 I'm gonna make this a property of the object and then I'm going to just use that and let's see what happens here whoops what did I miss what'd I get wrong here angle is not defined this dot angle okay let's try this ooh what do we think of this so I could also have them do this with a little wind this is pretty nice this is turning out quite lovely let me get rid of the console [Music] this is actually quite nice all right now we really I really want to put some wind in here now what can I add I want to create some Perlin noise wind so the first thing I just want to see is let me just create some global wind so in draw let me create a variable called wind create vector and I am going to have that be the wind x is going to be just going to control a punt from the mouse and I'm going to create a vector with that I'm going to create a vector and then I'm going to also apply that force so I create a vector so I just want to see how this looks so you can see this wind is much too strong and it's also very uniform so that's not good but it is kind of it's the right idea so let's just I just want to sort of see what the range of magnitude that makes sense is oh one issue is because I'm constraining them with like a top speed if the X force takes over they are not falling anymore hmm so I really should oh this is so problematic my all my weird constraints in here but let's make the wind much weaker so with a weaker wind so okay so this is kind of a there's a lot there's some issues here because as they start to accelerate more and more the but I think as long as I keep the wind fairly weak we're gonna be fine here but I could probably do a better job with the constraining now what if I now have the wind be purlins noisy so instead I'm gonna have and I'm gonna do this in a weird sort of way because what I want also is I want I kind of want to have more of a flow field kind of wind so it's different all over and I could also have the wind pushing it down a little bit with the wind I could have the wind be a vector Oh an angle whoo okay this is really good so actually hold on this so let me change this let me have a X offset equal to zero and now what I'm going to do is I am going to say let wind wind angle equal noise of X offset times two pi then I am going to make a vector from that angle and then I'm just gonna I'm gonna do that right now and then I'm gonna let X offset and I should control it by the mouse just to see if this is working but let's let that X offset go up in time so you can see this is kind of like nuts because it's changing so often and it's quite strong so if some things that I need to do are number one is shrink that shrink that wind down by quite a bit and also have it change less often so and now you can see it's totally uniform so I really don't want to have the same wind for each snowflake oh and of course now I have to have the snowflakes wrap so and and if I wrap I don't mean rap music wise I need them if go off the left to come back on the other side as well or to randomize and go back from the top so so first of all I want to make this wind much smaller and I'm going to need different wind for each flake so I am now going to have the noise x offset is going to be the Z I want to say this is going to be down called Z offset this is kind of like crazy what I'm doing without like diagramming this or really explaining it I'm what I'm going to attempt to do is I'm going to have an X offset which is going to equal the snow the flakes exposition divided by the width of the window and the y offset is going to be the snow's Y position divided by height and so I'm going to get the wind is going to be different depending on where you are with changing very very slowly over time and this should not be here any more this has to be here so now what we should get is there we go we have a nice flow field e distribution of wind so that was kinda like overly complicated well I think what I'm gonna do is when they leave the screen I've just set them back up to the top so I think in the snowflake if they where do I where do I set them so I can say if this pause X so I kind of want this off-screen function because what I want to do is return this or this stop pause dot X is less than negative this dot R or this dot pause dot X is greater than negative that it's greater than with Plus this dot R so if any of these are true if any of these are true its off-screen and then here it's much simpler for me to just say if this dot off-screen randomize okay ah and al-khaliq a good point or signs make a good point that I could start that I that I could keep I could constrain that angle so the wind really kind of so I think but let's let's take a look at this I think this is better not now can you really see that there's wind let's try to make that wind much bigger so what I want to do and I really should put this in the snowflake as a function I should really I should let them enter the opposite side okay that's a really good point because it's weird that they're not entering from the side so what I'll do that's actually a really good point let me change that oh that's so smart so I think I'm going to go back to what it was before whoops what am I doing here there okay so if so I could still use the randomize I you know what I should just have them wrap wrap around so this is their only randomize when they get to the bottom if this dot paws dot X is less than this dot R is less than just this dot R that negative this dot R the only thing is I can't really guarantee that they're gonna re-enter on the other side but let's try it let's say this dot pause x equals this dot with plus this dot R and let's just try if it is greater than width plus the star let's set that to negative let's just try this this is wrapping left and right let's see if this kind of has a nicer effect with not this dot with thank you that was a mistake so this should help so hopefully that helps a little bit I kind of want to have more snow it feels like it's too few particles so I'm gonna go back to the sketch and see if I can get away with 400 okay now I want to see the wind be a little bit stronger just to have a sense that that's actually doing something and so I'm going to do that here I'm gonna make the wind 10 times as strong just to sort of see yeah so if you can see that whoa there's a lot more swirling going on here so that's kind of interesting I mean finding the right balance there you can see how there's a flow field that they're following gravity probably needs to be a lot stronger if I'm gonna make that win that much stronger so let's go and make the gravity also stronger so I don't know what's gonna cancel what out but you can see balancing those two forces of the wind and gravity on the sine wave I kind of want to see the sine wave also maybe be a little bit more prominent so where do I calculate that that X offset um let's let's just expand that by five just out of curiosity yeah so that's too much but let's expand it by two and maybe that angle is kind of oh because it's tied to the spinning so I could actually also have it oscillate twice as fast so I don't know there's Pearlie noise Winn there's oscillating sine waves I think maybe wind should change over time it is changing over time if I programmed it correctly the wind is changing over time because the Z offset is changing over time I could make that happen much faster I don't know how noticeable this will be so now there are so many parameters here so this I don't know that this was a coding challenge this was more just like I think this live stream might just stand alone as a live stream and all of its mess maybe they'll edit this out maybe I'll come back and redo this coding challenge but what I would like is to see people do creative variations on this so what are some things you could do number one is you could be more thoughtful about the design you could add other elements to the scene you could have the snow pile up you could generate algorithmic snowflake designs you could be more you could create a lot of sliders to control all the different possibilities here am i but this I could do a background I should do a background I could add some text make some of them translucent oh my god so many different possibilities so I'm gonna leave that maybe I'll come back and add some of those features but we're gonna save this and I am now going to go back I mean how could it go back to my fundraiser is anybody still watching this [Music]

Channel: The Coding Train

Views: 135,851

Rating: 4.9320259 out of 5

Keywords: JavaScript (Programming Language), live, programming, daniel shiffman, creative coding, coding challenge, tutorial, coding, challenges, coding train, the coding train, live stream, itp nyu, class, 3d animation javascript, p5.js, p5.js tutorial, snow, snow simulation, snowflakes, nature of code, spritesheet, sprite sheet

Id: cl-mHFCGzYk

Length: 52min 33sec (3153 seconds)

Published: Mon Dec 25 2017