Live Stream #112: Happy Holidays from the Coding Train!

some crazy idea [Music] [Music] [Music] [Music] [Music] hello and happy holidays from the Gooding train I actually forgot to check my audio I've been rushing to get here in time to start live streaming on this special end of year last coding train broadcast and but maybe somebody in the chat can tell me if everything seems to be going okay I am but hello first of all hello to my children who are watching from an off from school and watching from another city I will be seeing you tomorrow hello people are talking that the framerate is a little bit weird but I'm just gonna keep going I don't know what to do about that I'm streaming as I always do alright so first of all [Music] do you hear that I have a keyboard here it's gonna be music because it's the holiday special so what am I going to do today first of all I want to say that this special holiday coding train is not brought to you by but is a fundraiser for folks I'm in the wrong place in the wrong place don't look at that I don't know what that was processing Foundation org so one of the tools that I use in most of my coding challenges in coding tutorials two different tools that I use our processing a programming environment built on Java and p5.js they library for JavaScript and a bunch of related other sort of like things and so the processing foundation is a non-for-profit u.s. corporation very small we have a very small budget and a small group of volunteers who essentially manage the foundation one of the things we do right now which I have mentioned many times is we run a fellowship program you can see some of our lovely fellows here Cassie and Andrew DIY girls Gottfried Nicolas Saskia Susan Alison Claire we keep going digital systems lab Jessica Atul tiga and Luisa I don't want to leave anyone out film and Lauren originally the p5.js project was started as a fellowship from Lauren McCarthy with the processing foundation now Lauren is the lead developer of p5.js and a director of the foundation so that's the end of the year if you if you have the oops and I just want to go to the homepage no wrong page if you have the means and are interested in making a donation I will ring this bell for every donation that comes in this live updates I you know I'd love to say let's get it to twenty thousand dollars by the end of this livestream a couple hours from now I don't know if that's realistic but I'm gonna oh no my camera with the camera went off children you could probably text me if you have an important message to send to me and I will see it here but you can also type into the YouTube chat although you know I don't know privacy whatever but okay oh this computer went off so let's I will read your name live on air and thank you I would sing a song if you donate by the way I'm just mentioning if you're here to see coding I want to just wait for the next live stream which I'll be back in 2018 with my usual coding tutorials I will attempt to do some coding today but it's probably gonna go very poorly and won't really interest you so you might want to just go do something else alright oh wait wait wait I'm getting message no it's a Twitter notification fine okay I forgot to tweet that I started but I guess I started okay alright let's see did anyone donate yet not yet but I assume that some people at some point donate something we're asking people to become a member you also will have your name listed here on the membership page we use this of these funds to support the fellowship program I'm going to talk to you more about that and show you some videos from different fellows and from from the processing day no no okay so it's very nice of you to donate through the YouTube super chat oh so people are timing the audio and the frame rate okay okay time out everyone I'm being told that I'm having some technical problems so what I'm going to do in this case is I'm simply going to I wonder if this is causing some weird interference but I am going to restart the computer that tends to offer so I'm going to turn on the monitor so let me hear what's going on hello [Music] so I'm hearing myself normally I'm not hearing any audio glitching okay yes so people are telling people are donating through some people are donating through this super chat and I am happy to say for today's livestream any donations that come in through the super chat I will I will reap donate to the processing foundation if you're a US citizen you won't feel to get the tax deduction I look at the tax deduction but but I will do that I will look at what this but I I would prefer my preference is for you to donate to the look at this we've got some donations I figure what that number was that I think was at 72 nobody can hear me I think I better just restart the computer people are telling me there's problems I'm gonna come back okay I'm gonna just restart the computer and hope that does the trick so this live stream is going to temporarily shutdown and it will appear same link you youtube.com slash user slash shipment slash live okay let's see what I can do here alright I'm back I actually didn't check anything I'm just sort of hoping that that fixed it and so now what I'm going to do is I'm going to go and check the donations so oh I see two donations have come in 203 donations have come in I'm going to thank and now what I want to do is I'm gonna check if you put your name to have a public name I'm gonna read that name so hopefully that's okay thank you to Steve Clement thank you to a leaky Cal Harris who is thank you Oh a key my wacky sidekick Aliki and thank you too hard to read people are telling me that the frames per second is not better I don't know if that's just the internet today what's this message telling me no show sorry I'm gonna check a few things so people are telling me it works fine so I don't know why some people are having frames-per-second issues and some people are not so I'm hoping that's just maybe maybe net neutrality was cancelled I know click here it says net neutrality issue buffering I'm buffering I'm buffering I'm buffering I'm buffering [Music] is that so working okay and i am recording two discs so at the very least there will be a archived backup of this or if I have to like delete the archive live scream stream and upload a new version of it that's what I'm gonna have to do so and some people are saying it isn't bad so maybe it's a bottleneck somewhere okay so okay so our first three donations let's see if there's any more we wait I'm getting a message here in the chat still a popping sound now that could be something else I don't know why some people are saying it mmm still a popping sound well I don't hear the popping sound in my monitor so it could be I do have this new I could debug this but but I'm first can you play the keyboard and turn off your mic input okay alright hold on my mic input is muting [Music] did that do anything this is really sad it was all planning might what still there okay now what if I just completely unplug the keyboard is the popping sound gone is the popping sound gone with the keyboard is now in plug well oh I unplugged the wrong thing big now I'm unplugging the keyboard so it's unplugged but now it's off drink a little this ginger tea hmm so the keyboard is the source of the popping I have an idea okay that's good to know that's very sad but at least I could hold on I'm just gonna try I think though it could be some wires are crossed in a weird way just give me a second here okay keyboard is still unplugged now people are hearing the Buffs I it's popping right now interesting I think I I kind of have us I kind of have a suspicion and I'm gonna work on doing something so just everybody bear with me for a second it's a weird how I don't hear it okay hold on all right I have moved the mic thing far away still pops okay use the popping now as I'm clapping my hands still poppy alright somebody just gave a very large donation and which is going to go to the processing Foundation which was Dinesh thank you it's actually in a currency I don't know what it is or maybe it wasn't a very large donation this is a big number I don't recognize that currency symbol because I am a silly American alright so it's possible I'm going to it seems to be that it's this mic so I do have one other option which is to let me just swap out the batteries here okay I have swapped out a bunch of I have swapped out a bunch of whoa where am I whoa can you hear me I swapped out a bunch of cables I also unplugged something by accident that shouldn't have been unplugged I'm trying to plug this back in and plug something by accident okay whoa okay anything better now this hasn't happened for a long time it's very sad I want it like thank everybody for their donations oh look at all these donations that have come in this is amazing it pops only when I talk No yeah though if the thing is let me okay let me just listen to the monitor real quick test so there's absolutely no popping I think it's I think it's the low bit rate that's causing the popping and that's like something some people aren't having it and some people are having it my monitor is coming directly out of OBS I'm listening to the monitors coming directly out of OBS that's what I'm monitoring with no popping all right we're gonna go back kids are you still watching but this is what usually happens I swear I mean I would love to I could check the streaming settings settings stream you know there's nothing has changed yes I see some sunglasses there thank you all right let's thank some more donations so I'm just gonna have to you know one thing I can do actually if you guys don't mind humoring me for a second is Ike watch the video that I recorded from earlier and wait hold on desktop this is the worst this is the worst there is one a short from 11:23 a.m. this morning I'm going to open this video file up and I'm going to listen to it so this is the recorded to disk and I'm going to see if I can hear okay I can confirm that in the recorder to disk version there is no sound problems whatsoever so something is happening simply after wire cat up mount wire cast OBS takes the feed and sends it out to YouTube I could try stop and starting the stream again I could go one thing I could do is I could look I could look on my livestream dashboard so the stream health is good and under stream options so okay so I am going to stop I'm gonna hey we're back pretend none of that happened before happy holidays but the coding trade a youtube show thing tutorial coding thing which sometimes I code but today very little code is happening because I'm mostly talking about this is a live telethon for the processing foundation and now that we have up to 82 donors I wouldn't it start with someone tell me was it at 72 I can see the bad bit rate on my preview though and so I'm gonna thank some more donors I'm gonna thank public name this person does not have a public name so I'm not going to read their name but thank you for the donation from Denmark I'm going to this person also does not have a public name so thank you to another donor and then thank you to a Mart Marcin Shweta I don't know if I probably pronounced that incorrectly somebody can help me in the chat so maybe some of you can only donate through the through the this super chat I do I you know I don't usually have that enabled I will read Oh Nate any donations through the super chat but it's much more fun if I can watch this live thermometer go up and so now for our first holiday tune to thank all of the donors this is song is called mystic health I have a little issue by the way I can't sing I'm terrible singing and you should probably go watch something else today that's all I've got to say okay hold on let me go out of the support page back to the slack Channel does used to tube maybe YouTube still thinks I'm on a phone interesting okay [Music] whereas debug completely then full request I will and when it's debug completely request I will thank you happy holidays everyone thank you thank you oh whoops my sound effects are no longer playing wait hold on it just happened there ah nothing not everything can work all at once okay keyboard volume is a little bit too loud thank you for letting me know I have no idea how to fix that okay so first of all if you would like to write your own holiday spot coding train themed holiday song lyrics to a popular holiday tune that I can easily find the chords for or just play by ear like jingle bells probably very easy [Music] um I will think it live on air today okay yeah that's finished okay let's see how many donations came in based off of that performance eighty-two okay okay now why this uh this I'm not gonna worry about too much but all of a sudden here my method for playing my sound effects seems to have failed and oh it got unplugged so what I need to do is add this again and we're back in business okay now I'm gonna take a short asking why are you taking a break you haven't done anything yet my life is probably my lowest rated live stream ever first of all I'm not doing it I'm done in encoding I'm wearing a ridiculous hat I just sang some silly songs and I had all these technical difficulties and it's already 40 minutes in you know this is a freak I gotta get going this afternoon I've gotta do a lot of stuff today I didn't eat luck I ate a very like breakfast that was very there was a subway was terrible this morning but barely made it down here that's why I'm like a half an hour late and I'm gonna have to eat lunch at some point everybody knows I get woozy after a little while I do have to stay hydrated because as we all know coding train is brought to you by water if you boil it it gets hot and then you could put a teabag in it or actually you could even don't even need a teabag you could actually just use tea leaves and you can have some delicious soothing relaxing chefs drink whoa there's a whole class watching Cooper where is your class from and hello to Cooper to Cooper's class all right so let's check our donations I will do some coding next if it says 83 donors refresh fail Oh 84 all right good work everybody good work everybody all right everybody good work so let's thank those donors and then let's do a coding challenge because I I know that's what people are probably interested in hold on I've got to get to the donors page and thank you to Alejandro G Hevea thank you for donating to the processing foundation and thank you to mark Leonard thank you mark Leonard I will read some random numbers in honor of these last two deletions children I know you just woke up but this will be your new bedtime storybook when I see you next it is called a million random digits with 100,000 oral deviants and I will read a few like this 4282 twenty five thousand one hundred eighty nine thousand one hundred seventy six eighty eight thousand one hundred eighty-five fifty two thousand three hundred and sixty one 665 785 seven thousand six hundred and twenty six five thousand four hundred 990 1144 14,000 738 good night sleep tight don't let the random numbers be have a pattern never let those random numbers have it just a pattern that you can find all right so but what else do I want to do I do I'm I did want to take a break to show you I'm just checking it ah Garron in the in the slack channel it's telling me that their name did not show up but I don't know maybe that takes some time to update maybe it runs a process Oh actually goron when I saw your donation it didn't have a public you missed filling out public names send me an email or later a DM and the flack channel I'll get that fixed for you ok ok I know everybody's telling me this sound is crack delaying I can't seem to do anything about it I could try stopping starting the stream or restarting computer one more time but I can I can assure you that the crackling sound is something that's happening after the video and audio goes out so I don't know what to do about that I'm gonna keep going ok so here's the thing I'm gonna go to rainbow topics and I am going to so I I found some coding challenges that I thought would be reasonable to do today that I felt I could handle some of them much harder than others so here's my list I'm not actually not gonna do all of these and I probably lucky if I get to one I have some more songs to sing and also by the way I wonder I'm just curious I wonder if people in certain regions are having the framerate and sound crackling issues or with certain service providers and telling you something's going on here net neutrality there's lots of buffering going on it's buffering it's buffering okay so so um anyway you guys can discuss that amongst yourselves in the chat now there's a couple things I could do I could just pick something I don't I don't know if falling snow is really a Christmas challenge that could just be like a wintry season challenge right but so I sort of feel like I should probably just do that one I could also put it up for a straw poll let people vote on which challenge they want to see I could also pick one randomly with my spinning wheel of random picking let's vote people are people are interested in voting all right I'm looking at the reading the chat I'm looking here what should we do vote vote pick randomly let's make a straw don't you think we should do the snow what if we left today and we didn't have a nice snowy wintry scene let's do the snow in fact dare I Christmas tree that responds to physics all right let's do the snow let's do this no but I there's a thing I would like this to be unlike most of my usual coding challenges I would like this to be I would love to have lots of suggestions so I want you to help me figure this out okay and then I'm gonna do something basic and not so wonderful and it will be the starting point for everybody's beautiful snowy wintery holiday scenes okay so I am going to put on some music for you as always I always forget to dis stop it stop it stop this done [Music] [Music] [Music] [Music] this star this star this star this start song never forget to this star somebody composed that song for me okay so we are going to make a nice snowy scene oh yeah so Alka loyal or I often like to say royal royal coding training viewer Alka has made a snow coding challenge it's called let's see if I can find it on this computer here code member 26 let's take a look at it snow mountains Alka which is going it's way better let's just see the code pen Alka let's try to find it oh you know what we've really got to plug this computer in battery is getting low and we all know I really need a new computer look at all these search snow there we go look at this so this is Alcon snow look what does this do but I'm going to do so what I would like to do is I want to do something that maybe I'll use like a texture maybe somebody wants to make a nice little some nice little PNG textures that look like snow and I'm gonna I want to have some larger ones and some smaller ones and have some kind of like parallax effect we're depending on how big or far they move faster or slower and maybe have a snow pile up a little bit on the ground that kind of thing so that's going to be the rest that's gonna be look at this ooh that's so lovely so this is this is pretty cool so we're gonna make our own version of this and so let's get started I was supposed to click to paint sorry everybody yeah this is basically the purple rain challenge I should probably just start from that but let's start over okay let's see hello welcome to a winter themed coating challenge you know something that I that I thought I should say is this coating challenge is probably very similar to my previous Purple Reign coating challenge but instead of Purple Reign 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 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 code that's 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 it could swirl around the snow and go through it in 3d oh 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 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 getting a 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 array I'm 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 no 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 coat it right now and let's see we get Oh snowflake is not too fine 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 why is this associated with snow in my head or the winter or something anyway you don't need the paren if you are using es6 i still know you're referring to do simon give me a line number okay 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 event but I can add a function I'm gonna 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 okay is that the right term I've actually never used one of these things before I always make separate files alko TV slash static slash f16 dot PNG oops alka TV static what did I get wrong there somebody tell me what I got wrong there all right I'll come back to it oh I spelled al-quran a LCA 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 though 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 because 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 the snow but this this this is not really snow yet right what we want I mean it's never going to be actual snow wouldn't it be wonderful like it's magic indeed or 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 n right so so what I want to do is take the gravity force and put it in the object 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 a lot more for us to do here we wanted 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 how do I do that okay 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 oh 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 or 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 if 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 megawatts I'm like Perlin noise flow field kind of thing yes I need to have a mass and although people are giving me great suggestion to the job to 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 ok time out for a second I have to blow my nose we all know how I always get the sniffles ok so this isn't going to work because this idea of sewing 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 I'm being told that I have I plus plus somewhere where I need I - - I will fix that it 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 is 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 whoops timeout for a second everybody hold on why is this camera view not working hmm interesting so I seem to have lost the whiteboard camera I guess I don't need it right now hmm boy so many technical difficulties today 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 of your times it matters another object divided by just the squared so this is kind of actually irrelevant here this is problematic so I'm 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 is that how you spell it parallax effect hack let's see if this works somebody will hopefully help me with this I really need up with this so what I want to do is I want to make a copy of that incoming force then I just want to I'm just gonna 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 mm 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 dot 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 sorry 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 what do we think does this sort of seem like parallax II snow I'm pausing for no given reason oh I'm being told to maybe try lowering the mic maybe that will help people let me see if I can do that okay lowered the mic a little bit 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 that seems more like snow very nice 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 falling along you should stop right now and limit the velocity to the same value for every snowflake then multiply to do the parallel but is it limiting it to the to a different value for every snowflake the same as doing the parallax anyway I'm happy with this 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 [Music] okay oh so I have stopped it I Paul I'm pausing again how do we make pick a random number that's more likely to be small than big so there's a variety of ways of doing this I feel like I've made many videos on this in the past so so I'm sorry I'm looking at the chat logarithmic scale is good people getting good suggestions logarithmic scale random Gaussian I could do random Gaussian I could use the exponential function or I could kind of do the two random numbers of so many possibilities mm-hmm how about let's just say let's write a function called get random size and I'm gonna 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 weight weight weight 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 two random numbers 1 which qualifies the other one so so in other words let's say I pick a point one well now I need pick a second random number point one is going to make it past this level 90% of the time point two is going to make it past eighty percent of the time point eight is only gonna make it past twenty percent 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 zero and one and so I don't really need to map it I'm just a random one times 36 so now we should have more smaller ones and you can kind of see this is true right there's a lot more smaller ones than big ones now maybe that distribution still is too strong and I could say random one squared right wouldn't this make it even less likely to do big ones I can't tell visually if that's the case it's hard to see because the big ones move so fast so I'm like reading the chat so but what do you guys think of this all right I'm gonna leave this I'm just curious - let's do to the tenth power see I think this isn't doing what I wanted to do because I can't use the whiteboard it's my problem right now why is the whiteboard camera failing sorry my - I'm making an editing challenge for you they should flutter from side to side yeah I will do that why is this sorry I just want to like investigate the whiteboard we're not going to make it through today without the whiteboard camera what time is it oh my god thirty twelve twenty not so much for my telethon of coding challenges let's see here let me just if you don't mind bearing with me for a second that works what sorry ooh what happened to me whoa I'm missing something why am I having so many technical difficulties today whoa do you guys see me that's moving oh wait for it the smaller ones come into the screen a lot later because of the parallax effect ah interesting so you know what I should do yeah you don't see me right yeah weird right I'm gonna have to restart OBS again which I'm happy to do just because of all of this stuff yeah that's so weird I'm restarting OBS this stream is about to go down we'll come right back I'm not gonna restart the computer I think I'm back sorry everybody I don't have the live check I did actually have to restart the computer I'm hoping maybe all that popping stuff got fixed I can't get the whiteboard camera which is probably fine stream health it says it's good I do see a weird framerate yeah I see the frame rate issue in my preview and the topping is still happening so weird I've never had some few people watching oh and I think I just froze no I'm just behind this is like a this live stream that's good it's actually quite good that nobody's watching let me pop the chat out I mean I know there are there's a hundred of you watching but um and which is like used to be like breaking all my records but now I'm used to having a few hundred people watching all right I I don't know what to do buffering green whoops sorry okay all right I am 423 people are watching oh ok nevermind everybody turn this off this is really big this is my big like I was actually trying to do like a whole curated scripted holiday show ok I should power are to not r1 all right well I'm just gonna have to hope that this is somehow the recording is going to be fine all right no need for the one I just I want to use the whiteboard but it's fine this is probably be the only coded challenge today anyway holiday special coding snow ok so a nice suggestion from the chat is maybe is to try powering our - right because I want that oh that makes sense no I say if I could use a whiteboard this is how I think these think these things trip through but let's um let's square r2 and take a look at what we see now one thing that's interesting here is I think that actually just to see what's going on it would be much more helpful if I just started them all on the screen so we can see the distribution more clearly so I now I don't want them to start on the screen though but what I could do I have an idea is that I can give it some optional arguments and that so I could just start the first I could start with what I'm gonna do is start with a so this is one way to say like oh well if I give an X into the constructor then use that if I don't then pick something randomly it's a little bit of a problem because if I give a 0 it's still gonna pick something randomly but I'm not gonna worry about that right now what I'm going to do here is I'm gonna start with just a whole bunch of them let's start with 200 and I'm going to give them start with 200 on the screen just I want to see that distribution to really get a good sense for it oops okay where where did I get that error this X has already been declared in setup where once again sketch line number one well what what remove the let in the constructor oh of course this won't work snow X snow y okay that doesn't work because I can't have the same variable with the time off my game here okay all right how does this look as a distribution let's see if we can make this I actually kind of liked it but let's see if we can make this a bit more extreme let's go to this and say that's power our two to the tenth so this is fewer so I thought that doesn't seem like it works for me I really think it should be this oh no so that that actually was the opposite all right I'm reading the chat I kind of like this no actually I feel like this is good enough it's gonna be much better once I do that so okay not you you you can do some editing magic with this because I've I kind of I lost my with all the technical difficulties I've been kind of losing my steam in momentum which means it's time for I should take a break and sing another Christmas song holiday song as any yeah you know this is actually a really good point it's sort of a little silly that I'm deleting the elements from the array where I could just recycle them back to the top but I do feel like at least and I can also give them a new random size but I'm gonna I'm gonna keep it this way just in terms of being a little bit more flexible all right so yeah there should be less large snowflakes so what are some of my other technique for picking a non-uniform distribution of random numbers I need the whiteboard I said I could just draw this and I would know exactly what it is that I want to do I want them to actually I want that distribution to be yeah I'm thinking Payne Perlin noise absolute value of Gaussian oh that's excellent 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 p5 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 zero 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 times 36 I'm going to scale it up and then I'm going to return the absolute value because random Gaussian will give me negative numbers all centered around 0 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 in that those are really quite large okay so this is another technique I'm kind of I'm kind of liking this now so we can see that I have many smaller ones and fewer large ones so you can see there's a variety of ways to do emergent is also telling me oh my goodness why didn't I think of this I can just pick a random number and then square or power that number to make it exponential and then take one minus R of that number would actually probably work because it'll distribute more towards zero so I could try that 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 one this dot velocity normalize okay 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 two 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 okay yeah look how many small so I think though that I do need the minimum velocity to be more than so they get limited by their size times point two and so I do 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 I Y 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 well 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 and let's look at what we're doing here with random size and do this with so many so many no no that's no good so let's let's keep squaring it 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 and 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 I did something wrong not one minus R why did I think was one minus R 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 0.2 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 want anything less than two pixels there we go okay this is starting to look pretty good boy have I spent power ten is a bit large I didn't realize I did that I had that in there okay but I kind of liked 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 & 1 and make that exponential so I'm 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 this is by the way I think I'm gonna come back in the new year and just do this do this challenge over again and just this will just be for the live stream maybe because I've lost now ok 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 30 to 1 so this is going to be good it's going to be I'm gonna 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's obviously much better to low 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 30 2 p.m. gee okay so let's first just make sure that that image is there let's see that it's there oh oh zero zero let's draw it at zero zero 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 to 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 autumn attica lee with some library or something but i'm gonna do it manually here so i'm going to 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 spritesheet get now what's the chance that this works spritesheet get X comma Y 3232 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 all right 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 ah 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 randomize 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 there look it's our snow [Music] okay so there we've made a nice book what did it take me like an hour it's like 12:45 I was gonna wrap this up around one o'clock this has been kind of a disaster of a live stream but I do appreciate that so many people donate it and I'm gonna come back to the but I think that it would I was gonna try to add a little Perlin noise wind so I'm seeing in the chat that quality seems to be a little bit of an issue here so I don't know maybe there's a way that I can improve that I don't know if that has to do well we could wrote rotate the snowflakes rotate so when you say rotate do you mean do you mean have them spin as they're follow it falling or all have a random rotation also has rotation and floating but sine waves make them go side to side a little okay 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 I meant to take breaks and talk about the processing foundation I'm doing a terrible job at this fundraiser both rotation and spinning okay so let's do that 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 surprise this doesn't happen to me 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 so let's have them oops let's have them 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 then everybody always uses in complains that I don't that I don't use yeah I'm getting some mess so one thing that you guys could help me out when you're posting pigs in the patron group is unless the image is really important to like remove the remove the previews because I can't involve a chat with these big freebies in their ternary operator yeah so someone who some I never use these because I just an old-fashioned and pride probably so turnery operation encode turnery let's look at the ternary operation syntax JavaScript I mean it's the same and most okay to 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 alright 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 dot Direction times this so some of them will go randomly to the other side okay so this is nice with them spinning now you yeah okay so now I want to do some side-to-side motion so some options are sine wave pearl and 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 sine of maybe that angle I don't know I said random when I map oh I don't actually need to map because sine 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 do I get wrong here angle is not defined this dot angle okay let's try this whoo 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 alright now we really I really want to put some wind in here goodbye bitrate this is so sad this is like the worst idea for a coding challenge on YouTube because it's just going to make everything is by the way it's the popping and the framerate is all still bad I assume right alright so what I want to do now is add a little wind let's add a force if it falls slower it'll be less noticeable so let's have where am I where's them where is the speed at which it falls is here so I can actually make the fastest ones fall even slower but I kind of liked it now there's not enough differential I think between I'm gonna leave it as it was okay so here we go I want to have a little console 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 vector 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 font 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 it there's a little 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 whew 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 2pi then I'm 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'd wrap I don't mean rap music wise I need them if they 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 changings 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 a distribution of wind so that was kind of like overly complicated well I think what I'm going to 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 pause dot X is greater than negative that is 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 I was making 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 gonna 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 don't actually just have them wrap wrap around so this is their only randomize when they get to the bottom if this dot pause 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 this dot R 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 yeah I think this is better they're not gonna always enter they might get stuck kind of back and forth but if they enter okay 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 ten 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 the gravity probably needs to be a lot stronger if I'm going to make that win that much stronger so let's go and make the graph 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 cuz 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 wind 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 I'll edit this not 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 can 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 I go back to my fundraiser is anybody still watching this let's see so this started out I meant to take Brit this was practice next year I'm gonna do a much better telethon be much longer I'll have guests a plan for it but I do I do have some more songs to do I have to prepare I don't know if anyone sent me any songs let's go out a full screen let's close this alright let's take a look we were at 84 donors we're I think 72 could anybody confirm the number of donors there was trained image in the background yes I'm gonna let everybody create their creative versions of this with different backgrounds I believe we started around 72 donors and around 2000 or so dollars we're now up to 91 donors 3000 and $20 for to the December 20 the December 2017 fundraiser for the processing foundation let me thank some more donors ah shoot I have to login it logged me out then I'm going to play so hold on donors so where did we last left job I think I thanked mark Leonard and now I'm going gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone gone all right I think I am back okay 71 donors thank you okay sounds good okay is the hub popping and everything all gone now should I just start over popping is gone huh who knows what happened so who did I read all the donors or did I miss reading some of the donors well I'm glad that this problem seemed to have gone away I could just start the whole thing over now if I if I didn't I just I need an afternoon I've to I I got it I unfortunately I mean I haven't eaten any I'm gonna have to leave in the next like half an hour or so okay so I would like to thank the donors we started let me just mention again we started this fundraiser with 71 donors and we are now up to 93 we have hit the three thousand dollar mark is there any way we could hit the four thousand dollar mark by the end of this by the end by the end of this live stream I don't know let's see okay so but first let me thank all of the recent donors I want to thank mano el Thank You Manuel I want to thank greedy I want to thank donor from the Netherlands thank you a wonderful game in p5.js thank you for that I want to thank Simon Tiger Thank You Simon Simon amazing coding trained viewer writes I learned a program thanks to processing Thank You Simon and Sebastian Pacheco Thank You Sebastian for your donation okay and shoot this computer is dying I got these days I'll bring to power two powers to this room you should just bring the other one up for my cuz now this computer has stopped operating because it's like the battery's about to die I think and then here is another donor Thank You Sergey thank you for your donation you know what there's too much stuff open what it's this computer has frozen the computer that's showing me all of the donations has frozen what a mess there we go okay and thank you to Matt and thank you - thank you - anonymous donor thank you anonymous donor yeah thank you anonymous donor come back how do I get out of this oh let me refresh the page close some of this stuff it doesn't need to be open that would help alright I have killed the processing foundation admin panel now we're up to 96 thank you everybody for your donations to the processing foundation so I am going to thank everyone for their donations with a song I'm gonna get back to reading it this computer is being finicky with me I might just try to login in a different browser or something oh I see a whole bunch of new donations came in ah a whole bunch of new donations came in let's see thank you to Daniel O'Sullivan thank you to Greg King thank you to David Keck thank you to fret and thank you to anonymous donor and I think I got everybody now this is working for me again alright so what I'm going to do now I'm gonna take a short break to drink some water because as everybody knows the coding train is brought to you by delicious water I'm going to sing another holiday song for you the problem is I have there's gonna be a lot more difficult than my dreidel song so in the meantime I am going to play for you highlights from processing day so one thing I want to mention is that the processing foundation has a new YouTube channel right here I encourage you all to subscribe to the processing foundation's YouTube channel we recently had a processing day community event in came in Boston and all of the talks and presentations are here in this particular playlist so you can see Cassie Gottfried mature and Claire Jakub Sharon dela Cruz Andres roan and Guillermo Ava Diaz oh the coding train I did a live session there you can watch that Chris Coleman Rosa Weinberg Maxine Bama cor Brad Tober jose luis garcia del castillo Ahriman and chapman cha know Luisa Pereira and our Luke Dubois and Cristobal so I apologize to any of the processing fellows or lightning talks where I mispronounced your name I encourage you to watch all these talks I am going to I would like to show you some highlights from some of them and and so Matthew I put together some edited versions well that's why I meant to put my whole plan for today was to make the snow and that every so often take a break and show you one of these or just one or two minutes long but you can I definitely encourage you ever to watch all the videos let's watch Lauren's since I meant to also have Lauren skyping I just did a bad job of planning this and just too much to do but um let's try to watch Lauren's discussion of the origins of p5.js which I think would be useful and nice to see so I'm gonna play this for you while I take a short break to get my lyrics ready for the next song I guess they could download this file try one more time [Applause] and so the idea was that he and Dan and Ben invited me to do a processing fellowship and my charge was to imagine what processing might look like today or might look like for the web maybe and it was supposed to be just sort of like a three-month research project and so I thought okay cool this is my big chance like my big in I'm going I'm gonna do this I'm gonna be an open source like oh my gosh this is so awesome and so I said about and I did nothing nothing until I think one day Casey email means it's so about that fellowship but you gonna do anything and so I was like okay and he said well why don't you just you know it just try something just just try a little experiment you know that same idea to try something you don't need a whole plan and do my next week if you could so the deadline was also helpful at some point I felt really excited because I could also draw a circle and a rectangle just like you couldn't processing and figure it like I was like halfway there little did I know and so but while I was doing this this the question right was like what would process what might processing look like if it were kind of invented today and so the first ideas were well we would use html5 and JavaScript instead of Java but there was this other idea which was why not take you know diversity inclusivity as a core value what if we make this explicit rather than just something implicit maybe or hopeful and this idea that like no tools neutral tools are embedded with the beliefs the desires and the biases of its creators and we're talking about a tool for creative expression it becomes really critical that we have a lot of voices in the process of making that tool it can't just be a few developers that make all the decisions this is a little bit hard to read but this is Stephanie pie talking about we think maybe it's about hard work but what about mentorship and be Fiat before that even what about access Emily Chen went and talked with many of the women in the Python community and brought back some of her observations and this is one that we took really seriously just don't assume that anyone has to know anything Thank You Lauren I'm not finished rewriting the lyrics let's watch another one let's take a look at let's just go through these in order so let's those of you who might be Spanish language speakers this is a fellowship project this is what we use the funds that I'm asking people to donate forward to sponsor we have the fellowship call just ended we're gonna have new fellowships this you might be excited to learn about if for those of you who are Spanish speakers yeah cool so this talk is called beef IDs and espanol that stands for pitch ideas in Spanish my name is sarah moulton Moraga I'm Chilean we speech we speak Spanish there that's super south my work with proteins started when I applied for that pressing internship that they offered ITP and I said hey I love this but my friends in Chile they don't know about it and most people don't know about it I just know like the very tiny community of Minyard stir so I said is it cool if I can translate like the reference of the website so there is like seeing this was for me super gratifying like seeing like this welcoming thing that is in Spanish and as a part of that I we we we founded this with some friends this called coded and it's an Essene code and education which are also the same or since planet and it's a squirrel a dirty Cioffi electron egos coded started a year ago we co-founded this school in April so it's it's brand new but it started last year when I came to New York and I didn't know about processing or p5 he told me right there's that frameworks to to make art and I wanted to meet electronical engineers or coding with arts or music well so we flew out that in Chile and in South America coding is not taught us it's out adhering in United States or in Europe so we wanted to make something to to fix it and we started to we say well let's start to teach p5 so we started to make curses and resources for that and the first curse we made these must be five days in espanol so it was the first curse with with high school guys they were they started four guys and finally they were two graduated it was in a public library in Chile and thanks so much for everything that pressing that Sampey five and shout out to everyone this is amazing Thanks [Applause] [Music] Thank You Aaron and Guillermo okay now okay so you know people are I see I see okay so those are some highlights from processing day encourage you to check out again the new processing YouTube channel and all let's check our live donations we are let's see can we get up to a hundred note or donors can we get up to 100 donors 101 donors Wow alright you guys definitely deserve another special coding Christmas song holiday song this one's a Christmas one I did a Hanukkah one I'm sure there are lots of other things that a New Year's one so let me first thank the donors this song is dedicated to you I want to thank where did I get to I I want to thank I think I thanked that that one already and honor I want to thank anonymous donor thank you from the Netherlands I want to thank Jakob foster thank you for your donation anonymous donor thank you and Chris Snyder org thank you Chris Snyder org for your donation and he'll oh sorry so he'll Cana Thanks I love just making new things on p5.js okay I'm just reading the names that are that people put in this that want to have publicly listed on the membership page okay so now where do I go next back to the slack chat back to the live channel all right yes so I I'm getting some good suggestions now this is gonna be quite a shock to all of you so the problem was I I got this via pretty this music out this morning and then I read was rewriting the lyrics on it and I got them all off because I didn't realize I printed out on double-sided pages so I don't have my page turner here with me but I'm gonna attempt to play this song for you this song goes out by the way everybody I half of you or at least are like three-quarters or 90% of you are gonna hate this you just wanted to come watch do some coding tutorials you go do something else maybe a small percentage you are gonna enjoy this insanity of mine because I'm just trying to figure out what are ways that I could embarrass myself even more and so I did a song earlier and this is going to be my second song mm-hm this is my back away this is my keyboard so edit running if they're able to in live and I have like a church organ sound so I don't know even know I haven't practiced this at all by the way [Music] all right I just needs to be up in octave that's probably blowing out all your ears this dark for Christmas there is just one about the syntax or the light wasted memory too loud okay everybody hold on - loud - oh is this better better better better better I'll start over let me get a little softer okay much better okay we're gonna start this over because somebody might want to cut this out as its own thing how do I get reverb here anybody know Ableton Live I feel like this is a bad this is a bad instrument for this song oops um in the wrong mouse let's see I need a different instrument I think that could work [Music] synth keys and flea voices many violin like a string strings I should just do a regular piano accordion what could be what could what could be wrong with accordion I have no idea what I'm doing did I pronounce marriage in marriage in Marc Maron merit I totally pronounced it wrong em in the chat type grand piano how do I find grand piano piano and keys you would think that would be under here right search okay grand piano all right let's try that Marin Marin alright now we have an actual piano [Music] all right oh and of course what am I thinking we have to have now how do I get reverb or anything on this or who knows how's the volume okay here we go wait I have my music mooo mud mud Miren Miren Marin Marin I think I'm getting better sorry I'm gonna practice that later [Music] hey hit the wrong note that sounds a little quiet is it a little quiet now no I'm gonna put it down an octave as soon as I get past this but what's the equivalent of hitting the floor pedal with this keyboard I guess oh now we're gonna telling me they can't hear the piano here we go octave down I don't want I don't want this stop for Christmas there is just one thing I need I don't care about the syntax all the wasted memory I just want you for my own more than whoops don't do the reflex okay I just want my sketch to play more than you could ever say let's try Java mode oh all I want for Christmas Christmas is [Music] [Music] [Music] there is just one I'm just gonna keep on I won't make a linked list and send it without the use of when Zach gets [Music] maybe it'll work with oh I want for Christmas [Music] see all right I think I could have used a little more rehearsal and but I didn't really work very hard on this and now there is another song that was sent to me by me I am so me the house take number one you want me to do it again all right so by the way the chat is seemed that encouraged me to do bored of this don't encourage me cuz I'll be back this is all holiday thing there's New Year's songs there's pop music you know send me I'm just the problems of my writing skills are very poor my all my skills are bad poor I I really can barely play the piano like definitely cannot sing at all and my writing that's so clever with the writing and the lyrics I I did my best there but I think other people are more clever or maybe people want to record their own okay oh can you change the background of the snow sketch to green so we can edit this hmm hmm dare I do this again okay it could be as a rehearsal there okay green only up so I can what I need to add is color source and create a new color source and I want it to just be green okay and like this is this what you want is this what you want is this what everybody wants oh just with this snow with this snow but I was worried about the compression right right I was worried about the problem is although I guess the recorded version all right pre keyed footage okay she like shut are we good I'm looking at the patron group and the slack you want the snow or is this good give me some thumbs up or some thumbs down I'm gonna get my I didn't think I was ever gonna have to use this music again do I have it all hmm one two what I don't like those from one two three oh because it starts with three four five six seven okay and my tube should I make myself smaller hydrate yes hydrate okay okay here we go if it's almost 2 o'clock okay this is being recorded to disk so I'm happy to share the recorded the disparate sound levels okay I don't think my kids are still watching let me check my phone I mean think I can't imagine that they're spending their whole day doing this I have no text messages oh I do have a few messages let's see I'm being told that that really actually Cody's training this month is not but I should get some product placement for my Klean Kanteen there okay do you think that do you think that this makes me look more like that I should have the headphones on doing this like I'm in a recording session is that better like it just as a prop not to actually listen to anything that my kids have to deal with this all the time okay I have to turn this off okay now I've does this good with the headphones on no headphones go around the neck yeah round the neck okay that's good around the neck okay how are we doing okay here we go again everybody the only thing I'm worried about is they're gonna bang into the mic but I think it's fine okay here we go wait I need to start over again this has to be octaves up okay and then two octaves down hey don't don't post the things with the preview in the chat it's too distracting I guess I could not look at it I don't want this dot for Christmas there is just one thing I need I don't care about the syntax all the wasted memory I just want I just want my sketch to play more than you could ever say [Music] let's try job oh I want for Christmas is code oops if I did that run I don't want this dot for Christmas there is just one boolean I need that I'm just gonna keep on looping until I run out of memory oh I didn't do this I'm missing a bunch of the course I won't make a linked list and send it without the use of WebSockets I won't even stay awake to try debugging try debugging with the IDE I just want my code to sing more than you want machine learning maybe it'll work oh I want Forks oh I want for Christmas is cold [Music] curly bracket parentheses [Music] yeah thank you thank you very much thank you thank you King thank you thank you okay I wonder if did everything get really quiet yeah oh we lost the music from the laptop nobody told you oh wait don't tell me I have to do this again yeah okay that's good for filtering out the piano okay how people seem to enjoy this so I apologized somebody gave do it again I don't read the chat I know again how many times I do this is this a really do it again thing or like a trolling do it again thing yeah so we were saying that it's actually better for the better for the remix please I could do maybe there weren't a lot of people here why don't I do my um maybe I'll do my drape my other song which was very very short compared to this and which I thought the accordion sound worked well for it let me open up this again [Music] this was organ really loud now I like hope you're requesting that I do frustum colleague tutorials in OpenGL a chance I have to do anything else no I was going to do a different song with the green screen in case people want to remix it oh no I forgot my lyrics Oh what happened to my organ oh I didn't actually enable it it's funny how I have no idea how to use Ableton I'm just like making stuff up that's still the piano [Music] how do I change that oh I say it can change it look at this reverb [Music] how did I get the organ back it's very loud right why I should really like learn how to do this stuff before okay hold on I have an idea don't save let's just start over uh-oh I lost oh wait I have an idea oh uh hold on everyone watch your head earphones everybody yeah she's just the web via the API to control is that too loud I took the headphones off all right I found a little issue and filed it on github and when its debug completely then poor request I will love Oh issue issue issue I filed it on get a website titled it on get and when it's debug completely then pull request I will [Music] don't hold long notes I don't know okay I think I hurt my neck there so these are the two songs I had prepared but I am looking bright one more song that was very excited to try suggested by me I am so Mimi I am Samia are you watching this right now I don't think you are can somebody me I am so me can somebody DM me or repost the song that me I am so me suggested I think I should go back to the piano Oh coding train coat yeah I know the jingle bells' like I've gotten that that suggestion it's funny like I did at one point know how to change to a different instrument but I don't seem to anymore I can show you guys anybody know how to use Ableton how do I change this I was just sort of like dragging it in here and it kind of like suddenly enabled itself yeah I could put stowed in the background yeah the way I'm I gave it away yes those lyrics Alka but first I had to figure out how to get the piano back although I guess the church organ kind of works for this by two instruments yeah how do I must be a thing that I like select something I'm just clicking on like random stuff [Music] okay okay okay all right so now I'm gonna have the lyrics over here let's see if I can find the chords to this song I should really ask for some more time coding all the way up funds coding challenge live that's pretty good okay okay let's see if Ultimate Guitar calm wait wait oh I'm on dirty Saul you need to grab and drop the piano on the right column drag and drop the piano on the right column okay let me try to get this yeah this is where I am right thank you got it thank you oh I see this this might work I see how I can select instrument now thank you everybody oh this is very hard if the lyrics over here in the music here which is just the chords but oh it's quite loud again ok quite loud again yeah I should put the snow back in the background better okay okay Oh Oh last wait hmm I think I might need the extra actual sheet music because I don't know even though the tunes let's see [Music] this is not this is this is not gonna work for me okay this I shoot this is a bad idea to like just try to find music a statement I gave you my pointer but the very next line I think I need to go back to the piano I can't hear the music is too crazy I don't know okay all right let's try to find here we go okay okay I've got it now [Music] I gave you my pointer but the very next line you gave it away this time there's pull this time there's plenty of fears Oh give it to some last last statement I gave you my pointer but very next time you gave it away so you get a bite here okay that was good enough that's about as much as I mean again [Music] alright there was one other suggestion that came in Oh all right let's go back to the snow oh no I can't go back the problem I can't go back to the snow cuz they'll have the music on the computer okay now I should I should mention by the way that the reason why I'm doing this partially other than just being completely insane is that I'm doing this as a fund raiser for the processing foundation we are now up to 101 donors I mean it started at 71 so they've been 30 people have donated since I started this livestream and we're up to three thousand dollars let's take a look 105 donors I will do jingle bells for the new donors thank you very much and I should get a snow background but okay and I can always do that okay [Music] declare declare oh this is so high Clary [Music] global variables above the function set up throwing the array with bubbles and then going and doing draw and looping and then drawing all that using a for of loop or maybe a for each loop and drawing all the bubbles coding coding coding train coding train coding iteration oh what fun is to type a simulation hey coding tree coding train coding train coding p5.js it's not the right Court that's just the same court OD'ing train is my music is wrong this internet is very unreliable oh it is to type and see 60fps Hey [Music] so here's the thing I really need to transpose that down for my baritone voice it was too high for me OD so I guess I could transpose it but if it's that was gee if I go down by a fifth dashing through this dashing one horse open dashing through the snow Cyrene global variables [Music] buh-buh-buh-buh-buh very balls above the function Senna filling the array with bubbles and then going to draw on doing it iterator through all the bubbles so that they could see and maybe turning into a snow simulation code coding coding train coding train coding iteration what's covered in train coding train coding iteration no company cuz this musics wrong again big trains coasting straight coding iteration oh what fun is to type it is to type a flocking simulation hey coding train coding train code inky coding coding train coding it's wrong Cody Cody Cody Cody p5.js Cody b5 j s oh what fun oh what fun it is to ride in a one-horse sixty of 60 frame FPS open hey curly bracket parentheses semi-colon [Music] how many I'll we just want to see I'm really like can i really drive everybody away well I don't have my live dashboard up anymore alright oh boy I'm getting emails nobody's telling me to quit the Internet alright so I had to like look at the lyrics look at the music which was incorrect trying to transpose it in my head this really not I need to to practice and plan for these better meanwhile we did do this nice coding challenge there's our snow we did this as a coding challenge let's take a look I think I'm gonna go now it's 2 o'clock I know there was a lot of technical difficulties and there's gotta be a good like Oh Tenenbaum one you know Chanukah okay this is good though this is gonna be useful in the future wait hold on okay so oh look this is what it was at the beginning this is a page that I didn't refresh so we're at 71 donors when we started this live stream we do have a 25 dollar goal which I recognize especially when you leave the next 5 or 10 minutes are probably not gonna hit we are now up to 107 donors three thousand five hundred fifty dollars for the processer foundation that will fund one full fellowship so three fellowship stipend is three thousand dollars and mentor stipend although sometimes the mentors do volunteer is five hundred dollars for someone to mentor okay so I am going to tell you more about what this funds by showing you another fellowship this is Sharon dela Cruz this is a short two minute video my name is Sharron lagoons I'm an artist and I do a whole bunch of things and I think Lauren said it nicely I'd go into spaces and I fill it a little bit but what I'm gonna focus on now is or today for this presentation is how I'm filling this space at Princeton University so I'm currently the director of the studio lab which is a creative tech lab at Princeton and so this summer I read this wonderful book called Mindstorms which you should read if you haven't you might see more Peppard and i just really love this quote which talks to true computer literacy is not just knowing how to make use of computers and computational ideas it's knowing when it's appropriate to do so and I think that idea funnels into the pedagogy of the space in the studio lab and what I hope to do and and when you understand that technology can mean a lot of things like a sewing machine or paint things get really exciting so then you can paint on a circuit and teach folks about resistance without ever holding a resistor and it's been really fun to look at stem accessibility especially particularly I'm interested in tech deserts and how do you bring that how do you bring STEM education to tech deserts which include jails which include marginalized communities which include folks who unfortunately been funneled code as a means of a job instead of expression I'm usually that's what I look like most of the time I don't know why I'm here who's here what am i doing all of the time but that's what I run with and that's what I love to do and so that's what I bring to Princeton University thank you [Applause] Thank You Sharon so you can watch the full the full all of the videos from processing day or most of these talks are about 10 minutes long these are just short one to two-minute versions of them and you can watch all of them here on the new processing YouTube channel okay let me thank some more donors I feel like I should have like a phone that I can answer calls with okay so there is all right there are some more donors that have come in here just during this live stream where did I last leave off I don't think I think I read this one okay so thank you too Radovan Dras Kovac for your donation thank you too oh wait I already read these but I'm gonna say it again Marian Miren Miren Maron for your donation from the Netherlands I think I read some of these already thank you to James burns for your donation I don't know why I'm forgetting to do the Bell here's another donation and thank you too - these yollie's these alley thank you thank you close enough thank you Maron and here we go we've got another one from Christopher Coleman and Layla Marin thank you so much for your studio membership so thank you so much and now we have one more Thomas Blackburn thank you for your donation and we are now up to that's where we are 107 donors $3,550 we are funding in December all donations for December a full fellowship the fellowships will be announced probably in 2018 that's the next year the the open call for the fellowships has closed but you can always apply next year assuming the processing foundation still like this which I hope and think that it will all right so what else what else can we do today oh what a joy don't look at my music oh there's snow so I should probably go it's after 2:00 I've been here now for like three hours I had a lot of a lot of technical difficulties we did make this beautiful wintry snow I do feel like the actual programming of it was kind of convoluted and I don't know that it can actually be edited into a challenge but that's fine this will just stand alone as a special live episode usually most of my sessions get edited into smaller tutorial videos today I'm just goofing around so let me see if I can get any more requests close the Downloads bar at the bottom thank you so what could we try could we try which should I try one or two more things for the snow yeah I don't think I'm gonna post the code for this do we do it anybody have any song lyrics they want me to try what else I would like to play more of these processing Day videos for you but I guess people are saying that they'd rather just wash them on their own time which is totally understandable and let's see do a background to the snow but with the background be let's see i as a lot of those donations are complicated so every time a new donation comes in I'm gonna stay here for 10 extra minutes so let's see we're gonna put a timer on now I got to get the power here okay so let's see here we're gonna do a timer let's first see still at 107 donors 10 minutes timer just it keeps going if I go to another tab right so it's at 9 minutes and 50 seconds now 10900 yeah okay me I am so he is pointing out that people could do $1 dieticians so I'm gonna stay for an extra 10 1 minute per 10 dollars in donations how about that no no yes good point let's see it's okay because nobody's actually donated yet so so now I can scratch that for if um I'll just stay up let's see what's a nice formula $10 for one minute so $100 is 10 minutes we're at 3/5 but I'm going to go for 10 minutes right now and we'll see we'll see what I just tear off the tab make this fullscreen open up I can make this like a tiny little window if I ever could use a computer by the way I used to do this in my coding challenges remember when I had those ah no I want not fullscreen I just want full browser so annoying there we go that'll do it okay I will check the donations I'm gonna be here for eight more minutes I will I will happily take song requests I do need fun I will take song requests I will happily do my performance of all I want for Christmas is code again I can also try to add things to this snowflake simulation I'm just looking for requests now but I'll also answer questions in the chat background to the snow so what would be a good background for the snow please sing one more time reindeer better background well I need help with the background idea better background I agree Purple Rain Purple Rain yep that sounds that's that's gonna be too hard I'll do that later another time gradient sky-blue quaint village gradient blue sky gradient blue sky kind of like that number we're at three five five zero okay gradient blue sky oh thank you I'm once again I'm getting some background suggestions I need I need okay I guess I can get that link here's a nice background image i dot IMG you are calm /p and i1y C - but what's the what's the copyright situation with this image and I also totally typed in the wrong typed in the wrong a because I had caps lock on for some weird reason P + iy see - JPEG it looks good what's the copyright situation on this image it's a nice background picture of a snowman it's tanta see this is what I want everybody else to do not that great of a resolution for that image yeah ah thank you me I am so me okay I really only just want to do me I am Sumi is definitely the winner of these lyric ideas oh this one's gonna be good alright hold on I'm sure I could find the chords on this computer with the lyrics I am going to check the donations at the end of the ten minutes exit full-screen hold on hold on [Music] this one's got a promising start I'm trying to get the sheet music here oh wait whoo here we go lots of options oh look at this okay here we go I want to transpose this but I won't really no cords on this one I'm gonna have to actually read the music well this is no good there we go oh and it's an a good key for me too not really because I can't sing at all all right here we go everybody Oh get good Oh git commit tree Oh git commit tree how lovely are thy branches Oh git commit tree Oh git commit tree how lovely are thy branches your pull request now I'm just improvising good thing that went up your pull request will be merged soon and every bug will be fixed and the processor will work really well Oh Kip commit tree oh it commit tree how lovely are thy branches okay thank you thank you thank you thank you everybody thank you Oh one minute left how am i doing there so far what can any wait what all right $10 for one minute one we left I think I'll check now what time is the post office closed I gotta get to the post office now this for one minute if I have to go timers running out I have so many things open I've never I have never Hey Oh Christopher Goldman in the chat hello okay oh my soft-boiled egg is ready okay like some kind of hard-boiled egg cooking flashbacks okay here we go yeah maybe I made that I've kind of made that kind of expensive here we go I really got to refresh the page now [Music] we are up 26 dollars in that ten minutes which means though I closed that window I will stay here for another two minutes and forty seconds let's just round it up to three all right I'm here to answer your creative coding questions or try more singing or possibly make a change to the snow simulation I really just plain exhausted I can't do any more coding so I don't know if this is really there's much point here I would be happy to to play another processing day video what else can I do mmm okay I'm getting some song lyrics suggested from the chat we'll try this one now I'm gonna try this now okay this lyrics were submitted by David okay correct syntactically round well I'm doing this in this is a very weird key for me compiler all this bug free [Music] round function subclass and superclass yeah yes okay good we got we got 30 seconds left come on I got I'm like JavaScript or Java Script come code it 300 different kind of ways and the name of the week put your desktop image but the one without snow okay I'm getting lots of requests I saw my PC oh my god [Music] okay let's stop this timer and we are now going to go back three five seven six we were at three five seven six let's see what we get two thank you everyone good night thank you everyone good night thank you thank you it's been nice being here with you did I I've been nice being here with everybody today on this special coding train and I hope to see you all on the next coding train which will be in 2018 and then [Music] coding trainer say goodnight you know it's just the afternoon coding trade had many technical hiccups but and it will be back and all the streaming will work bye-bye coding train train you all have Mary get miss as I'm being told to say in the chat thank you everybody it's about 2:30 I'm gonna go do the rest of my day thank you for everyone for making a donation I can't remember if I read the names of the they don't recall if I read the donations of the last donations there is one here from anonymous donation for one dollar thank you and another anonymous donation for $25 thank you very much that's where we got those $26 I'm gonna go I'll be back in 2018 I will probably be take the coding stuff a little more seriously I'm planning to do a bunch of tutorials around machine learning it's a little bit sad that I didn't get to all these coding challenges that I hope to get to but I did make this snow and so what I would love we could have a hashtag I'm kind of a hashtag for people to share their snow creations little gifts on Twitter or make a little code pens send them to me at Schiffman I will post the code and all that sort of stuff I will be back sometime after the January 2nd probably the end of that week what day is that something like that all right oh my goodness terrible hat hair III I cannot bear to say goodbye oh I really want to make a 3d version of this I wanted to do it in 3d with planes somebody wants to make somebody wants to just make a quick donation if we could get 25 more dollars I like see if I could just get to this work with WebGL just 25 more dollars to the processing foundation let's see this 110 111 112 let's see if we can make that happen for Olli another donation of $25 to the processing foundation I will attempt to turn this snow into a WebGL system alright let's see if it happens [Music] up-up-up oh my goodness we're way up there okay we did it okay okay let's see if we can do it just a little bit just a little bit that works right that's good for getting a donation okay let's close this so we're gonna go to our code and we're gonna change this to web GL hold on hold on hold on everybody let's make a copy we're gonna have a 3d version desktop snow snow 3d snow 3d and then I'm gonna close this go to terminal it should have left while I had the chance I had had to get one more 20 what am i doing desktop snow my stomach is growling let's run a server here well let's first open it up and Adam and then let's run a server and we should see the same exact thing excellent and Adam I should be in snow 3d great okay by the way I don't even celebrate the holiday associated with this hat just because you're wondering what I'm just I've got the spirit I don't know I have a YouTube channel don't I do the holidays okay so I am now going to just first change this to WebGL just out of curiosity let's just change this to WebGL and see what breaks right why not a lot of stuff broke well here's the thing I don't can't use the image function anymore now the image function probably should be done in such a way that if you call it in WebGL it behind the scenes makes a textured plain but we'll do that ourselves manually so let's go to here and let's say I believe what I want to do is get rid of this get rid of this and I want to say texture this dot image and plane this dot R this dot R let's try that see what happens let's set up where am I looking at the right code let me just make sure I'm like running the correct code oh no I forgot that I had this silly thing here that I'm not doing anymore okay okay oh oh it doesn't like these as textures why what's wrong with the 32 by 32 image texture mm oh boy oh boy are we gonna be ah is are we running into a problem where this actual a 32 by 32 okay I'm gonna have to do a test here we're going have to do we'd have to comment everything out and do some tests it's common to everything I do want to store all these images so one thing I want to do is let's just do texture sprite sheet plane with comma height let's see what happens here okay so this works as a texture that image worked as a texture what if I were to say textures index is zero Oh interesting okay so I'm doing something wrong somewhere else what if I were to say playing 32 but though I think I know what the problem is I think I know what the problem is thirty-two point one thirty two point seven no I was I was sort of thinking that maybe maybe it's maybe some of them are so small hmm what if it's like less than one huh all this is working so what do we think that I did as an error right let's go back and put this in up I'm being asked what I'm being asked oh the errors complaining about the Translate interesting let's let me look at the air again I didn't look at it very carefully cannot read so where did this happen snowflake render snowflake J ass line 95 so let me just try something here let me just force the size no that worked what let me just force wonderful oh I know what the problem is rotate doesn't work in peace in in the WebGL render is pacifically say rotate Z wonder if that was actually the problem yeah that was the problem nice ok so now you can go back to this dot R this dot R now this is working but something has gone wrong right because everything is offset so it's untended to like rethink everything but I'm actually just gonna do something rather lazy which is just oh but I really want that everything to be centered around the center if I'm gonna do some camera movement so let's let's rethink at all so when we create these I'm gonna make a random location right centered around the center no actually no it's not between it's between negative width / 2 + width / - that's a random location around the center I should really just make a global variable that's like half width or something and then this is where we set locations we also God we do it in too many places - height / - I really really should make a global variable that's half width half height but I'm too stubborn and so this should at least fix their starting locations sort of I must have made a mistake somewhere extra comment on line 2028 in sketch KS yep thank you still didn't fix it wait negative with okay so that's thanks well maybe the randomize is happening ah I know what a big problem is now in snowflake everything has to check if it is less greater than height / - less than negative width / 2 - the star greater than width / 2 + the star and randomize where's randomize all right fix that already okay great yeah shoot I don't know if I'm using this anymore but I'm gonna have to fix it and this should be - height / - - height / to redo the whole coordinate system yeah okay this is now the snowflakes in 3d and if you don't believe me watch this I'm gonna do something insane I'm going to say right here at the beginning right after draw I don't need this anymore rotate let's rotate X but I'm going to show you something cool that I've learned rotate X which no let's rotate Y rotate Y by Z off okay now look at this so it's this flat plane of snowflakes oh guess what I don't have to do the parallax thing anymore I don't have to do the parallax thing anymore that's the whole point of doing this in 3d okay so let's boy this is gonna make things really nice and simple random sighs we don't need random size anymore we don't need all that I'm just gonna make them 32 pixels all of them I don't need to multiply I don't need to do this parallax thing anymore let's just see what did I miss f is not defined whoops so let's go back to I kind of like the idea of copying the force vector just in case okay whoops get random size is not defined probably in randomized I can just say I don't need to randomize the size anymore okay there we go right there's all of my snow in 2d it's doing something particularly weird though hold on let's well I'm because I use that this dot are in so many different places let's turn off this rotation oh just the sine wave is now the same for all of them which is not good it shouldn't be though because angle is random let's let's find that offset let me get rid of that offset for a second where do I set the offset I'm just going to get rid of that offset for a second okay now they're all moving at exactly the same speed which is fine they're also reappearing in the wrong place top update no no that you're just behind me okay hold on hold on I want to add the Z but I want this to look as expected oh no that's right I mean I realize they're all going at the same speed now oh and there's just like it is doing it there's just a weird little break here because of how they're all going at the same but why are they appearing on the screen I didn't fix the wrapping I thought I did oh oh I didn't fix this so this I didn't fix this wrapping okay this you great there's a weird little break because of how they're all falling at the same speed but I think once I add to Z that's going to go away so let's put this let's add to Z now so what I'm going to do is I'm going to let Z equal some random amount let's try between negative 100 and 100 I'm going to create the vector at Z and in randomize I'm gonna do the same exact thing again I should reuse this randomize function in the constructor it's really awful everything that I'm doing here and let's just see what happens maybe okay let's add the so hold on let me rotate Y by map Mouse X 0 with 0 & 2 pi just I just want to be able to look at the scene here and see oh I'm not translating by the Z so I can add the Z all I want but if I don't actually when I draw them translate by the Z it won't show up oh no oh no I've run into a really horrible thing I need to sort them notice how they're not transparent anymore because of the Z sorting check the Twitter SoundCloud for the Christmas song somebody already remix my Christmas song that's crazy if that happened oh oh the humanity I can sort them I can sort them we're gonna sort them we're gonna get we're gonna do this but first I wanted to just let's just so let's do that so one of the things I need to do before I draw them and so I honestly I should really render them in a totally separate loop I'm gonna render them what I'm gonna do is I'm gonna say snow dot sort and I'm gonna use honey use the arrow function I'm gonna use arrow function a B right return what can I just say do I have to say return like if I do this a dot Z minus B dot Z Oh pause right somebody in the chat you might be wondering what I'm doing I probably should write this more beginner-friendly I'm gonna write this more beginner-friendly in a second so let's look at this one a more long-winded way compare returned a dot posi z- b dot pause Z oh my god there seriously is a remix already [Music] [Music] okay listen to that later okay okay so this is what I'm trying to do whenever you sort an array in JavaScript boy one I could just sort it by its default if it we're numbers are strings they would sort in alphabetical or numeric order but I can write a function that I got to turn the sound off I can write a function that tells you tells tells the array how to sort it and I want to sort it based on the Z value so I can't remember I just always start the negative value means put a in front of be a positive value means put beep in front of a if they're equal if they're equal so this should sort it one of the ways and this is just like a fancy es6 way of writing this with the arrow syntax I think so boy I'm really not I'm just like okay so now okay we have a syntax error what I get wrong here one last parenthesis right well I did it so as long as I sort them so that I'm drawing either back to front or front to back we should be okay and now we can go put our rotation back in I'm missing all these messages oh my god there's a whole Frosty song now if I turn it around backwards you can see it's drawn in the wrong order but I'm not going to worry about that so I definitely want to make this Z quite more extreme so I'm going to I got to correct this like I'm not gonna correct this now I'm too lazy too lazy hope the camera went off sorry I forgot what I was doing I'm going to what was I doing oh yeah I'm just gonna make a I mean I'm gonna try this so let's try min Z max Z because I'm so lazy I don't want to read I'm too lazy to refactor the code just could have a global variable to go to your place okay I have it backwards okay so that's better so this is actually in 3d I mean it's not it's two-dimensional I think oh yeah so oh but I need to uh I want to have them more of them further away right no I don't this actually this will work this will that could seem more further away so this is fine suddenly Seymour okay so now here's the thing here's what's crazy about this if I were to put the rotation in and just say rotate I'm going to use that Z off variable but slow it down look at this as it spins the snow flakes are flat so they point to the side how can I make a snowflake continue to appear 3d and this is a technique known as billboarding so even though the camera view is changing if I always have the snowflake facing forward in other words if I go into the snowflake code wherever I'm rendering it and I all just undo that rotation and maybe I want to undo that rotation before I do the rotate Z then they should always be facing forward even as the camera swirls around right so there's some issues here with my clipping and the Z buffer does the sorting and the oh boy I really didn't just sort it the other way or no because it's spinning around I thought maybe if they were always yeah there be another way to fix this transparency but what I'm trying to show you is that I can have a three I could just remove through this no I'm pretty sure that the z-buffering I've done correctly but once I start rotating around yeah right cuz you're whoops oh no I don't I did it in two places yeah so if I just left it like this I'm not seeing that black brick thing I also need to as the things are set further away they need to start much higher up my view is all off so I'm gonna leave this this is a 3d version of it you could probably do a lot better by thinking about how you're gonna where you gonna see them how your know the particles are gonna color that there's so much more you could do but now you can see that you can actually also do this in WebGL and I think in theory what's nice about this is is that I probably could get away with let's try like 1400 of these you could see like it's you know there's some framerate issues but this performance in Fury is going to be much much faster than the 2d version okay so we did this in 3d if this ever gets edited into something this is now the end of this coding challenge that was a snowflake system in 2d and then in 3d and maybe you'll enjoy it and I'll see you in another coding challenge okay now me I am subbies sent me an excellent set of lyrics the real technique has just rotated all the snowflakes and then do the Z calculations okay now if the donations have risen above if that just round it to 3650 I will read I will sing me I am so bees last song Oh three six what we need four more dollars okay so while we're waiting for four more dollars let's take a look at Casey Reese explaining the origins of processing started from when we first start started processing I've been frying myself back in the olden times the primary aspiration was really to bring coding to a new audience of people and at that time in 2002 one the audience of new people we were interested in reaching was a community of artists and designers the community that yet previously hadn't really embraced coding as a way of making work as a way of expressing themselves and and communicating so the primary idea here is that we start sketching and we move from sketching which for me is thinking into sketching and code which the code then produces visual works and so the idea of sketching in code is a fundamental idea to the origins of the processing project you can have an idea write code quickly and see results quickly so when we started processing this was really the vision the vision was to be able to write these short programs that would then have a visual counterpart so this is a movie that I'll just let run for a moment it gives you a sense of the first kinds of things that we made with processing in the origin but what happened after was really unexpected and really exciting and it really cuts to the core of this idea of community Ben and I had some assumptions about what we wanted to do with processing but a lot of other people had other ideas about what they wanted to do um things that we had never imagined and so one of the early pieces of soft code that was written for processing with a library system that allowed other people to write code contributed back to the community to document that code and then people could do other things that for example these things on the list interfacing with different Hardware working with video working with audio etc things beyond that original scope really driven by the community and hopefully curated and encouraged through through the through the original work here's a few bullet points to sum up things that didn't we fit into that short discussion but these this idea of getting out of the lab and into the world you know taking things from this rare environment and and trying to open it up to a much larger group that processing from the very beginning was a language and environment that were intertwined so they were kind of no friction between the two that's that was the aim and then community was always an early focus but that community wasn't as an online community was an international community and I think the radical notion of today which were so excited about is that we can also hopefully foster local community too and meet in real life meet face to face which is something we haven't done until today sixteen years later so I think that's one reason why we're nervous and excited about today okay so I need to thank the donors and I think this is probably gonna be the last bit but I'm still trying to get set up here to see if I can get the music here that I need oh here we go this is good this will be good this is gonna be really tough let me just put this here okay so hold on this will be good for Thank You Casey for telling us about processing let's I took the oscillation out I kind of like the 2d one better but let's go make a nice background here enter full screen fresh okay so here's our snow system and now I am going to where's the where's my panel okay here it is so I'm going to thank the donors that have donated since we have thank you to Shawn from Bristol UK and thank you - thank you - anonymous donor processing p5.js is just fantastic keep up the great work thanks for the nice message and keep Dan singing another donation from some of you donated earlier I do not want to enable dictation not now and Gemma and then one more donation to read Thank You anonymous donation we have now made it all the way up to three thousand six hundred sixty dollars donated by 115 donors in the month of December okay so now what I need to do is try to get the music oh my goodness this is gonna be pretty much impossible it's might I might want to do this on the green screen because then I can have then I can have the music I'm by the way I said four more dollars whatever that's the only donated but I was going to do it anyway but the music's kind of complicated for this one it might help me to have two different screens let's see let's see if you guys can tolerate this so let me get the lyrics going here they really do need to be near each other okay now let me go to here I'm gonna switch to this apologies for everybody's eyes how's the volume level of the piano and I'm gonna quit this with this quit this and I'm gonna get to hold on okay if I had a printer in this room so make things a lot easier okay all right thank you me I am so me for these lyrics for another holiday song and I have not ever played before in my life or son nor yeah so heroes here he goes I'm gonna be sight reading this and by the way I'm really terrible at the piano so my sacred you won't recognize it cuz I'm totally not playing the rhythm I'm just making up my own stylish version of this [Music] that was that's the intro Frosty the repo was a react based web site with a input field input field and uh but didn't note and two eyes made and two eyes made out of radio buttons quickly Oh page to page to page frosty the repo is a fairy tale they say oh no no I got off there the rebo is a fairy tale they say [Music] he was made of snow but the children know [Music] how his backgrounds the default there must have been some not magic magic in that library they found for I don't know his son before when they placed it began to dance around Oh frosty the hey the actual words doesn't count he could laugh all day play just the same as you and me hey this is these are the actual is the actual it's just frosty the repo rewritten lyrics [Music] thank you everybody thank you thank you thank you thank you thank you I'll be back okay I'll be back another time alright everyone and commit to github just like you and me okay yeah yeah well so that was very that was very nice everybody you can now see the couple aired the music over here attempting to read it and wow that even that even it's fired a few more donations well if I were another person in another life I would stay here for hours more it's now 3 o'clock I think I've been here for five hours about five hours so I think this has to be the end of the processing foundation telethon fundraiser Thanks to everyone who donated thank you for all thank you everybody for being here on this livestream please the donations are open forever we do have this goal to try to get to twenty thousand dollars in December be great to see if this number can get up maybe we can get at least into five figures and I look forward to everyone's crazy music video remixes of all of my coding holiday music and I will be back I'm very happy to come back and redo any songs that I need to at any point did I mute myself I don't know what's going on I'm exhausted I gotta go I do actually have to record a couple intros to some other videos that I need to post I got a lot of content that's coming out and that's that mmm all right happy holidays everybody enjoy your vacation break whatever it may be whether you're somewhere cold or warm or dark or light give a hug to your friends and neighbors take a break from code do something nice for somebody be out in the actual nature recycle I don't know do lots of things that are good for the world and that sort of thing okay and things like that I don't anyone got that reference so this will be apparently archived forever oh I do reserve the right not to archive this forever but it will be it will be it will be I'm gonna hit the stop streaming on the stop recording button and I am going to that's it so I'll see you later bye see you in the new year see in 2018 goodbye everybody thanks for watching thanks for being here and I'm just gonna check the slack chat to make sure there wasn't like an important question there's some remixes here alright thanks everybody and good night

Channel: The Coding Train

Views: 19,184

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

Id: dEWmwQMKgIk

Length: 226min 24sec (13584 seconds)

Published: Sat Dec 23 2017