Live Stream #150: Coding for Total Beginners with p5.js + Snake Game Redux

[Music] [Music] you know never I can never I can never get it right I could never get it right here we are starting a new year and I really thought I had it this time Thank You Kelly who just sent me a message in the slack that popped up that I saw that I was muted okay so I'm welcome back happy Sun at the end of summer happy started school back to school happy almost a Labor Day weekend it is a holiday weekend a Friday afternoon here in the United States where I live in New York City I'm broadcasting live from the Tisch School of the Arts at New York University I have I haven't seen the chat catch up to me and I know that the chat the live chat that's going on during the during the stream is usually about 30 seconds behind so now I see that someone says Leo says now we good so I assume that means the sound is going um could you could hear the music I think when it was playing before yes so I have a whole lot of really wonderful happy things to announce I'm gonna talk about something called the p5.js web editor that is the primary topic today's live stream will be for the total beginner for the most part they'll be a few things that I'll do that aren't that are that involves things that I that you would have to know about already in terms of programming to be able to follow along in full detail but yeah that's always I try to have everything friendly and available to the beginner but today I am returning to my roots and going back to create the first intro - you're about to learn to code for the very first time videos I'm replacing some of the videos on my channel that have gone out out of date so if you're kind of here for the machine learning lower-level tensorflow programming stuff that i also sometimes do go enjoy dinner or breakfast or go back to sleep whatever it is you were doing I um I want to begin today unfortunately with some very sad news I'm gonna bring up the web browser here Medan it's only fitting that I I'm not sure if I pronounced his name correctly is a coding terrain viewer for a long time a member of the slack community someone who made countless contributions on the coding train github I was poring through all of these commits from Marin I was looking at some of the messages that Marin wrote Marin sadly passed away I believe this week I actually don't know the date I was alerted to this news on Twitter I wanted to take so the merit is not something I ever met a Marin I think though is you know one it is I don't have anything prepared to say but I think that what I want to say is that one of the reasons why I enjoy and love getting to do this is that the the material that I put out on this channel other people find it and they send me things back they teach me things they're kind to me and answering my questions they join the slack community they help somebody else they contribute on github you know I do earn a small living from this channel in addition to the work that I do at NYU but there's more to it also than that and Mayer and I think is someone who really for me even though I never met him or never spoke voice to him only chatted through github is somebody that I really came to know or feel that I know and I'm really really sad sort of crushed to hear this news so today's live stream is dead it to Meriden is dedicated to Marin I encourage you to check out the website Marin dhtml I believe there's a place where you can leave online condolences and most of the I'm Erin is from the Netherlands if I'm correct somebody correct me if I'm if I'm wrong so I think if you click on here you'll see most of it too in Dutch and I'm getting some notes that maybe my sounds a little off so I'll look at that for in a minute so in the future I might try to do a fundraiser around suicide awareness and that's something that I'm looking into a YouTube has a new platform called YouTube giving but this today's live stream back to the beginner I think is appropriate it's dedicated to Meryn I'm gonna mute my microphone and take just about 30 seconds of silence you know I'd ask you in the chat - yeah I know that everybody watching this is the stream comes in at a different time laughs 30 seconds 20 seconds later 45 seconds so take a moment take 30 seconds to take a break from the chat and I will be back okay I also want to say that I'm wearing it's an awkward transition but I'm gonna go back into coding tutorials as I typically do on Fridays I also am wearing this shirt for the made by Tim choy as part of his project distributed web of care I was like oh actually just got that shirt I want to wear it on the coding train should I wear today it's a symbol of what I think to me to me I love what tan is doing with his project distributed web of care I have to look over here in my monitors see what's written on it but a lot of times when we think about technology we think about control user machine learn and what about thinking about care what about unlearned we're all after all rather uncomputable so this is a shirt from Tim choice project distributed web of care I I'll try to include some links to Damien's work in video description okay so there was there was some some a couple notes about maybe my shirt tag is ok well that's that's pretty typical for me there were some notes thank you Chris Persian for posting the note in the slack channel about the National Suicide Prevention lifeline which is one eight hundred two seven three eight two five five that's obviously a United States number okay so and and thank you moderators for moderating the chat K week bond in particular and others of those who are moderating what everything ok with the sound before I move on I'm just going to have a little drink of water check the white board camera let's see here is it working it is not on of course when I drink that water you can really hear it right it's very like awkward and weird sounding probably coding train brought to you by water okay what first of all I have this chair is like in the shot which is a problem where can I put it I'll just put it here white board everything ok sound is fine over here I am back going to I will include links to Aaron's website and his commits and workout with according trained in the description I'm closing this whoops I have foes setting up some stuff oh and this is a forsen thing I'm going to talk about and this another thing I'll mention is that I have the other thing that sounds a little quiet sounds okay good you know I prefer it to be a little bit quiet to be honest I say won't you be able to hear it but I'll get a little bit excitable gonna get a little bit loud and when that happens sometimes the microphone can peek or distort and Matt Chea who does a lot of the video editing for posting stuff separately afterwards can always boost the volume it's easier to boost it then correct it down so if unless there's a significant problem with you being able to hear it yeah okay so I do have some new branding stuff that's coming along the way you can see here this there's gonna be some new t-shirts with this new bouncy letters coding Train logo I you'll notice that in the chat there I have new emojis and icons for the members that's a thing that's a part of the YouTube membership program you're interested I you know I want to believer that point but those of you who are members of the chat can go ahead and blast them with those emojis and so there's new there's a lot of new stuff coming with new characters and some new t-shirt stuff and stickers and things like that okay let's see all right so let's go here so this is what you know this is a bit of a tricky time of year for me as I mentioned many times already I work at New York University and so I have classes starting next week I'm teaching three classes which is a lot and one of them is on Tuesday from the meets on Wednesday at Monday's a holiday but in particular one of the classes that I'm teaching is the introduction to programming for total beginners and I see that there was a new member that joined alka I think is out got a new member of the joined Alka Thank You out guy first the camera goes off those good timings and so I need to buy my previous video about to around here I think well I'm just gonna start what I got to cover this lap if I haven't know a laptop so much to discuss I have new workflow I'm gonna do a video about the new workflow but I can't get to that today because what was I trying to get to here yes I need to go to youtube youtube.com slash the coding train and I need to go to oh I could subscribe to my channel I created a new Google account just to be logged into something here subscribe got another subscriber I'm gonna go to here there we go I'm gonna go let's just look here no no not here don't show me an ad don't show me an ad alright so in theory and a new member another new member question is are the lights flashing at home Meir Shah thank you for joining fire siya so these are these are the videos for the learn to code from scratch you've never coded before course and they are many of them were made I would say two or three years ago some of them were made last year a year ago if we start getting into the classes with es6 stuff that I started doing okay sorry there's something there's some like weird delay going on that's weird so like the output of this into my monitor is behind I don't think that's gonna cause a huge problem but let me just test something with you all just to see if because you is this out of sync for you I don't care so much but I'm curious it's a new computer I didn't notice this when I did my test run through you're gonna be able to hear me type because the tie is kind of loud and I want you to so when you hear the sound of the letter a does the letter a up here and I'm gonna look over here too so for me I see it immediately and then it appears on the monitor of what I'm live-streaming a little bit later yet when I move my hand it's instant so there seems to be a little bit of a delay but I think that's gonna be fine I mean we have to live with it right now if that's a major issue for anybody let me know okay thank you everybody all these nice messages in the chat I love seeing that okay so in theory this fall I intend to remake all of these videos that's crazy I don't think I'm gonna do that but I am at least going to make remake one point one introduction p5.js tutorial this workflow video is going to go away I mean it's not going to go away it's still gonna exist but that workflow video is not for a total beginner instead it'll be about the p5 web editor which I will talk about then I'll get to basics of drawing so I want to see if I can redo today this was a 12-minute video this was a 15 minute video and this was a 15 minute view and by the way when I say redo it's not like I just went rewatched photos so I'm just doing the same idea but I'll probably do it in a different way with different examples and just with my more gray hair so that's the so that's the no delay people are saying everything's fine or it's a tiny millisecond this is like okay so that's the core plan what else do I want to do oh no I want to announce the p5 webinar I'm kind of doing that already but I will say a few more words about that I want to do the new intro to code a drawing tutorial a colored these are for complete and total beginners so if you've never coded before ever today is a live stream to tune into oh but of course as everything will be edited and recorded and uploaded later to then I have this idea the most I shouldn't say this now because what if I don't get to it what time is it now it's five o'clock I have a I have some time but I also run out of steam eventually the snake coding challenge is the most viewed video on my channel it's also like I use constructor functions instead of es6 classes i didn't have the p5 web editor when i made that i did some weird stuff in that video that makes no sense probably so I thought I would try today as a coding challenge snake game Redux it's kind of true that this is just a grab at words because like I'm sort of curious like why did that video catch fire and if I do it again they probably won't but will it I'm just sort of curious but it also feels like it's worth worth giving another crack at so if anybody wants to tell me that's a terrible idea I will listen but I probably do it anyway and then number six on this list we find a working marker I'm looking at the chat number six on this list is I want to make some videos about how to make a p5 course with Google classroom so and this will relate to me announcing the p5 web editor so let me get to that I'm not I'm not announcing the p5 web better the p5 web header has already been announced by the people who made the p5 web editor I am pointing you to that announcement just to be clear so I do work closely with the processing foundation I helped to found to create the processing foundation I've been working on processing since 2004 and if I go to medium.com slash at processing org you can see this recent post hello p5.js web editor so this is the p5.js it's just really distracting to me I'm sorry when I scroll and then it's like I see at the corner of my eye the scrolling coming later but I'm gonna get you this is the p5 web editor announcement I do need to deal with this laptop and putting some green in front of it I encourage you to watch this promo video it has I'm just gonna play it without sound because you will not hear it oops so gonna let it play so this is the announcement video it has all the people who work don't know people who worked on the project contributed it to it talk about it look there's me with like a longer beard and Orioles hat Orioles go Orioles right maybe Sabich on the reason why I'm one dimension Saba Khan has been working on education outreach for the processing foundation he has a whole video about how to do education with p5 and I think it more sort of an overview and I would like to do some nuts and bolts of like you're a high school teacher and you use Google suite already how can you integrate that with p5 and the web editor it's something that I'm doing this semester here's Cassie who is the creator of the p5 web editor so I encourage you to watch these videos on your own read about it there is a full overview video with Cassie of all of the features not well the bulk of almost all of the features of the web editor it's about a 20 minute video of Cassie walking you through everything I'm not gonna make one of those myself it exists right here from the creator of the web editor so I encourage you to watch that there is a video here from Mathura who is a recent ITP alum and researcher and a research resident who with many other people all credited in this video Claire Kearney bopi and Lewis and many other people have worked on making the p5 web editor accessible for people who are blind or have low vision right from the beginning so you can watch that video to learn about that and there's a great question in the chat from Cole which I want to answer in a second and then there's also this video about p5.js for educators Sabra talks about a lot of different initiatives related to computer science education in particularly in K through 12 and how how you can use p5.js if that interest you there's a lot of work going on with the New York City Department of Education and the cs4 all initiative they've been directing the writing of a new curriculum written by Luisa Pereira who is also teaches here ITP there's a whole p5 curriculum I will point you to that if you but you'll find it in the description so we this is today is a wonderful day if you are a teacher if you are a beginner I think that all of these resources have been launched in or out there okay so I encourage you to all these videos are on the processing foundation YouTube channel how do I get to that YouTube processing foundation so if you don't already subscribe to the processing foundation I look I'm gonna subscribe but I'm something like I don't know what Google account this is that I just made but so I encourage you to subscribe to the processing foundation's YouTube channel and if you have the means you can also support the processing foundation's work it's a non-for-profit charity here in the United States at processing foundation org slash support that's not the right URL slash support okay so all right so that is check announce P five web editor let me quickly answer a question that was asked about by Cole in the chat and okay I'm sorry I'm looking at the slack channel so Cole asked something like I'm gonna rephrase the question will the p5 web editor change the process of uploading coding challenges so I don't plan to exclusively use the p5 just web editor on this channel it will certainly become a core tool my mission is to show a variety of ways of coding you know again I do focus a bit on using processing in p5 and related libraries but I use node and I'm going to be using Visual Studio code I'm going to show you some tricks that I have to use a different terminal this I term thing that the slack Channel and people have helped me set up because I'm very out of date with my stuff so but if I do a coding challenge in the web editor it will facilitate people making their own versions of it and sharing those very easily and I will talk about that and show that as I get into the web editor itself alright I've got to get into this material so let me figure out let's get a good phone okay I got to figure this out now here's I really really hope I don't subtly like spend 45 minutes on this please keep me in check but the web editors layout is a little bit awkward compared to how I've usually done my videos so I'm going to just quickly try to set something up so first let me get a good font size those are you watching how is this font size and so let me know I kind of feel like it needs to be a little bit bigger let's go to 36 okay so let's do here and 400 400 shows up there one thing I can't do easily if i zoom that's fine it's okay that I can live with all right so p5 web editor now there's two options I'm gonna try something here this is write it okay first let's try to get this laptop to go away so I've got some green paper cloaking device and this is my extra laptop where I look at the slack channel for members it's it too big okay that's fine I you know I am always erring on the side of making it larger yes me I am sue me I saw the CSS modifications to flip the web editor and also increase the console oh I didn't now me I am so me can you put that in like a github gist because that'll be the easiest way for me to grab it onto this computer I played around with it but I didn't actually do it on the login so if you could put it like a github gist I'm a little bit afraid of doing that because I'm a little afraid if the web editor looks different on my screen compared to other peoples they're going to be confused but I think it just being flipped is sort of not a big deal and I could also acknowledge that the other thing I could do is I can flip myself oh but my words on my shirt will be backwards I guess maybe I'll flip use some CSS hacks to flip that and we can make that a Chrome extension for people who you know it could become a feature of the web editor itself how am I doing here with this laptop so far so good right thought I was asking what's a gist a github gist is a single page lightweight way of sharing a code snippet that is much more lightweight than creating a full github repository just the way of like let me quickly share some code with you right yes this is green paper I will prove to you it's green paper there you go now I need okay let's see you know certainly this is the kind of thing that I should do in advance but the way my life works these days is I get into this room about 10 minutes before I set the time and so I very rarely yep I think that did the trick I very rarely I have a lot of I did spend some time here yesterday at least getting this new computer working so I've got a bit of a faster computer I have an e key that works I would like to get if I was thinking of getting a mechanical keyboard was that when when what was her name when sorry when new Katsu's was here okay this is a shorter URL me I okay so I've got it from me I am so me there was a bug in it me I am so me that well we would probably I would love to fix if possible which is that but let me try getting that first so me me I am so me dot so me I am so dot me a dot txt oh no but I needed so that's good what was useful to me was somebody made a version that was like that I couldn't turn into like a little JavaScript bookmarklet and I could just press and it flipped it around otherwise I suppose I could add this in like by going to the developer console or something I should know how to do this right and if I go down like here into like the styles or something and I also want to make this bigger like I can add it here somehow it's amazing that I don't know how to do this right that's B dot txt okay so what I'm going to do this is a little I do have a video tutorial about making a bookmarklet bookmarks bar new add page so I think did it have JavaScript you so if I add this I mean you can just say oh no whoops flip p5 put this in here save and now if I click this yeah the bug is let's see if that bug is there I want to be able to move this back and forth yeah is there all anybody have any idea of had how I could fix this so I'd love to fix that I can live I can live with it for right now but this would be then people are going to ask how do I flip it so I better acknowledge that I'm doing that I'm going to I can also like yeah but that's fine how can I remove this whatever okay let me lock my thing in here so that good I didn't spend too much time on that lock oh that looks like ah get a little more green right on the worst tiny bit more green sorry everybody I'm kind of an idiot because I don't need all that space but just didn't do it high enough over here now I'm gonna need another piece of tape no easy way to fix that okay well I will just live with it I think that's okay the other thing I was gonna do is flip myself but I think I'll keep it this way okay one more piece of tape and we should be ready ah the worst of this do it evenly I have to like undo it how do we do there all right can you notice anything let's let's minimize this and see yeah all right of course if I walk over here it's a little bit weird but that's fine okay we are in good shape just pretend there's a pulley that's very good feedback all right I think I'm ready I'm just cycling the cameras here by the way for sale I'm like a NASCAR driver here with my new laptop just kidding I mean I'm not kidding water h2o get back to me all right um I don't think that I need oops shoots wrong button okay I don't think that I need this list written out here anymore if somebody could help me to remember it obviously you can take a snapshot of it but it's pretty obvious so let me be clear about what I'm doing here I'm actually teaching at NYU a new online course for any and NYU undergrad to sign up for and learn to code it's all gonna happen online through a Google classroom and there's lots of features for interaction and discussion and sharing of sketches there the videos for that course are what I'm doing here on this channel for the public to consume I have a dream of someday having also a version of the course like that public people could sign up for in some way but I'm not ready for that yet like to do things small and incrementally so I am NOT going to be referencing that course in the public videos but I do need to make some specific content I have to hear some things out so this first video that I'm about to do will introduce the course and I don't do scripts sometimes I have a good mental outline of what I want to talk about sometimes I just spin my wheels I'm not really sure what's gonna happen right now but I am going to just do my best can I raise this up a tiny bit and I'm gonna go to p5.js pork and processing foundation org and across the state type work okay oh boy I don't want to be a process just about this but I need to make a new video for the homepage of processing on org okay somebody baked get me to do that and my phone is ringing I got a highlighter out the notifications on this b IM Samia terms of a pull request request let's actually let me talk to a cassie who's the creator of the web editor and see take her temperature on that and whether that's gonna get in the way of other things that are happening but I'm I'm interested in that as a feature and I I blow that extra preferences so anyway let's we'll have a discussion about that sorry me and Sookie was asked about whether to like actually pull requests making this flipping a feature of the web editor itself okay let's see what can I go to reference yeah that's good or exhibition maybe exhibition will be good okay I think bothering me that my laptop is like kind of off but I also want to be further this way all the way all the way all the way all the way all the way all the way all the way perfect alright I'm ready okay I'm gonna wing it that's what I always do I could always do it again right you guys Oh too much I remake the content again I was actually I rewatched about a week ago my other intro to p5 video and in that video I said like I said the middle like boy this is completely different than my last attempt but I wasn't live-streaming at the time so I clearly had done it a few times I also thought that video was kind of terrible so anyway alright welcome to the first video in what is the playlist of many many many probably too many videos about learning to code if you have never written any code before if you've never programmed before if you don't know anything about programming it's my intention for this playlist to be for you so this is the first introductory video I'm just gonna talk about the pieces of the puzzle that I'm going to use throughout this video series and show you where all those things are and kind of a little bit about the history of those things just to get started in learning to code learning to code you don't have to have know anything and all you need is a computer with a web browser to follow along you don't have to download anything install anything I'm so excited about that now here's the thing if you choose today August 31st 2018 if this is the time of the recording there's many videos that follow this in the playlist many of those videos were done a year ago two years ago three years ago they're using the same exact stuff that I'm going to show you but the screen is going to look a little bit different so I'm starting over because there's a new tool that just came out today called the p5.js web editor and it's the tool that I want to use for people following this tutorial series so the first few videos will have that tool in it and the rest of the videos are just gonna have the same concepts that you could keep using in that editor and maybe someday all of them will be replaced I have no idea I'm gonna stop talking about that that's not the important part but I want make that clear if you happen to be if you're just one of like race ahead and see all videos alright so what does it mean to learn to program what does it mean to program what it means to program is to write instructions for the computer to follow now this can happen in a number of different ways but you need a programming language which provides a syntax okay I was doing fine but then I I needed to stop for a second I feel like I can always stop and we can have an edit point when I'm doing the thing where I come over here I don't know why I'm coming over there alright I will address this Luka asks I'm curious why are you making a whole other series when you've already done it it's a very valid question and I'm not confident it's a good decision to do this in terms of you know give an infinite time it would definitely make sense but I do think it's important it's hard for people to follow that tutorial series if they because there's not a sort of central I want to I want to restart it with the p5 web editor so okay okay okay what does it mean to program the computer what it means the program the computer is to write a set of instructions for the computer to follow you right now as a human being could write me a set of instructions to follow you could say do some jumping jacks and you could say touch your nose and touch your head and like I don't know stretch your hamstring muscle which is the thing that I really need to do with all these backups but that aside what were say talking about oh that that's the kind of thing that we could do with each other as human beings but there's something interesting about that right if you said to me do some jumping jacks I'm able to do them you could say thank you much for being an editor I didn't have an editor in the past um you could say do some jumping jacks you could say jump up and down with your hands going up and your feet going out you could say please would you do some jumping jacks or jumping jacks do jumping jacks do you could say in all sorts of different ways and through kind of human interpretation I could understand what you're trying to say and interpret it and follow your instructions programming and program the computer to do something is a different process you have to be very very specific and you can't get things out of order or make a slight mistake or miss a word or miss a piece of punctuation and this is called syntax this is like probably the least interesting thing to start talking about when you start talking about learning to program but the reason why I was thinking about it is because you need a particular language in which to communicate with the computer and languages can be high level or low level meaning they can sound more like common language or they can sound more technical and cryptic they can be manipulating the internal memory and guts of the computer directly or they could be just writing some instructions or something that sounds like English but then is translated by some other system this tent up against was good I'm gonna start this part over let's give me like a there's gonna be a couple Mulligan's on this eventually I'll get into the rhythm of this yeah pseudocode yes describe right you should start with pseudocode that's a good Kelli Murphy is giving me a good some good suggestions I just want to kind of hit the bell okay so what does it mean to program so what I mean by programming coding is writing instructions for the computer to follow up and you might think of that and in this course the way that I'm going to start it's going to be all about writing instructions for the computer to draw a picture now there's many different applications of coding related to data and sound and music and text and web sites and but the place that I'm going to start in this course is drawing pictures and animation it's not the correct way or the best way even to learn to program but it's the way that can be that I'm comfortable with and that I think is well suited for certain audience and perhaps you watching this if not I don't know so I might say something like draw a rectangle and that's the instruction and then the computer draws a rectangle to the screen I might say something like draw ten rectangles and then the computer would draw ten rectangles to the screen this is much like how you might say to me do a jumping jack and I would do this or do ten jumping jacks and I would do ten jumping jacks well there was something about stretching my hamstrings as I said earlier looks a good joke think I cut out yeah this is getting better this is a better I'm gonna get the hamstring thing good I think I have it in my head now have you guys ever seen the movie Groundhog Day welcome to Groundhog Day [Music] all right so what does it mean to program the computer so what it means to probe computer is to write a set of instructions for the computer to follow and the way that I'm going to frame that for the purpose of this course is all about writing instructions for the computer to draw pictures so in other words you could imagine a window on the computer screen and you're providing instructions for things that should appear in the window draw a rectangle draw a blue rectangle draw ten rectangles draw a rectangle in a circle that erected on a circle and alternate the colors black and white black and white black and white there are so many ways that we could think about how UB might in English or whatever your native languages instruct the computer to follow some algorithm and algorithm being a series of steps to execute to solve a problem writing code is code instructions to execute an algorithm a series of steps to solve some Tunica problem now in this course we're not gonna necessarily stop but I'm hopefully you might solve some problems but you can also just play around an experiment and make beautiful pictures and that's where we're gonna start but we need some way of doing this together drawing a rectangle drum circle the computer doesn't understand that you and I could understand that if we speak the same language or even if we don't we might be able to use body language or some other way of kind of human intuition to communicate but the computer requires specific syntax and the syntax that you need the syntax is defined by the programming language you choose to write your code in and boy oh boy oh boy you know Google go have fun googling what's the best programming language to learn in 2400 and that doesn't make any sense to 20 20 40 whatever time in the future that you're watching this video I don't I'm not gonna worry myself with any of that stuff I'm gonna pick something I'm going to pick a programming language called JavaScript the reason I'm going to pick it is because it that's the one that I know a little bit and it also happens to be one in which there is a particularly Brer II and I'll talk about what that is that is a library of code of helper functions of things that will help you along in JavaScript called p5.js and this is a particularly Brer II that's created by a nonprofit organization called the processing foundation I'll include lots of links about the process foundation all of its initiatives it's an open-source project which means it is all they're available all about how p5.js works is all available for you to learn and find out about and as a beginner one of the missions of p5 is beginners learning the code cannot aren't just users of p5 but can be contributors to p5 so you can participate in helping to make this tool that you are learning to use I encourage you to get involved with that and I'm happy to help facilitate that so by the way p5 gas also grew out of another project that's part of the processing foundation which is just called processing it uses this is very confusing i Raza must stop talking about different programming languages I can it's built on top of a programming language called Java which sounds a lot like JavaScript and in fact JavaScript was named JavaScript because at the time Java was like this super cool thing to use and it still is for me I suppose I mean I like it but I don't know if you've ever been to one of those webpages where it's like giving you lots of error messages about a Java applet it's not so well suited for sharing on the web and JavaScript is the programming language of the browser so if you want to make this strange picture which is Square Circle Square Circle Square happen in the browser by writing instructions in JavaScript you can use the p5.js library you can share it instantly with your friends with your family with your co-workers with your fellow students you can get feedback I'm going to show you how to do all of this in this video series pause pause pause pause pause now again it's important to note this is not the only way to learn to program you know if you were here in the room with me out ask you to just like shout out the names of other programming languages do you know about you might say like Python or C or C sharp or COBOL or PHP oh oh I don't know something else there Java blah blah blah we could keep going on and on and these are in no particular order my goal for you in this course is to learn about the concepts of programming to be creative with programming to discover how to realize your own ideas through coding and both and this is a nice place for us to start we're gonna get the benefit of be able to put our stuff instantly in the web browser and if someday you discover some of these other tools make sense for other projects they would like to learn this is going to give you a foundation of knowledge for that in this playlist in this series and all the videos that I'm going to make them and I'll walk you through learning to code you will also select by accident learn a little bit about something called HTML and a CSS HTML and CSS or the other pieces of the puzzle for making something appear on a web page I'm going to focus focus focus on JavaScript and you're not gonna see anything about HTML and CSS for quite a while but there's these underlying other mechanics for how content is formatted and styled to appear on a webpage so while this is not a web development course because think about web development you might by accident learn to do some web development by taking well you're really taking this course but by watching these videos and following along yeah like what if I missed this is actually being recorded right now as part of a live stream let me go check to see if there's any questions all right no I forgot I should have mentioned like scratch or blockly that's a good dose some good feedback in questions all right looking in the chat I do have a CSS tutorial and I will be I'm yes so my goal I had a regular schedule but I hope to be here every Friday continuing doing this stuff and other things too if you've ever written COBOL Neal's writes if you've ever written COBOL PHP will come the greatest language of all time yeah I shouldn't have gone down a list of programming languages all people are gonna talk about I forgot jQuery that's not a programming language it's like a people hungry all right all right enough with the enough with the enough with the require 8 so ok so let me pull up the I just want to get that medium post up again so I can reference it oh my god well hello kinfolk sorry all right all right I'm sad I'm very sad that the joke with the stretch you got the hamstrings of my back problem is not gonna make it into the final I'll have to live with that math arrow in the way here okay all right uh all right all right let me move on with this I think that was fine it was it is what it is and now I'm going to move on all right so I'm wrapping up this first video this sort of introduction I suppose I should probably introduce myself a little bit if this happens to be the first video that you're watching I no no no I don't need to draw forget about that all right so I'm wrapping up this video and then the next video it's really where I'm to get started I'm gonna show you this is what you type and this is what happens and this is why what this happens when you type it and this is what happens if you type it this way this breaks it but this way fixes it and we're just gonna rinse and repeat and rinse repeat do that over and over again for all the little fundamental pieces of building blocks of learning to create your own software but I want to just show you a few URLs that you can sort of poke around and read about before you move on to the next video if you're interested so this is the p5.js website this is the website that has a place where you can sort of learn about the p5.js project this reference page is gonna be very important because it's the place we're gonna look up like I forgot what's this thing does we're gonna look at the reference page this learn page has some additional tutorials that you could look at there's lots of examples here that we could click around and play with I'll just show you one right now let's go to soft body and you can see like oh this looks fun so this is the kind of thing that you're gonna learn how to do how do you draw a shape with an algorithm how do you define a set of steps to draw something and then how do you control its motion and behavior I don't like that I picked that let me try that again we could pick a an example to look at like the game of life here the game of life is a particular type of generative algorithm I'm gonna run it again which involves lighting up cells on a grid black white black white based on what's next to it and creates this fun biological crazy that's one what's one that I I'm just a flocking one why am I just why I always should just do the one we could pull up one of these examples like I could click on this one called flocking and you can see oh this is kind of slow that is no no bad game of life was better what is with all these game of life is better snake game oh my god there's a snake game example Oh convenient you stuck here okay Nicole like sweaty like really very stressed out I would go back to the game of life I could just click I could just click on example like game of life here and we could see ah this is the code ah what is what is going on here this looks crazy look at all this syntax and punctuation and stuff by the end of this whole playlist of series this will make does that does ever make sense to anybody looking at code that you didn't write I'm not really sure but you will start to understand what the pieces are what is the process for building up a particular project like this and this is a well known algorithm called the game of life it's a mathematical algorithm that involves you know how cells on a grid turn black or white based on what the other cells are doing it's kind of like this bacterial like stimulation so oh there's so many things we can do I actually have a whole video tutorial building this up from scratch you could go and find but stay with me here so this is the p5.js website once again automated p5.js was made actually one other thing I want to point out here is I want to go here on community I think it's a p5 has a really wonderful community statement which is really important so I encourage you to go to the p5 just commune your statement and read it p5 chess is created by the processing foundation I'll show you the processing foundation runs the fellowship program and here's a whole lot of people Lauren McCarthy is the creator of the p5 just library you can learn more about the how does this how did this project come about by looking at the processing foundation website the original processing project which is the Java based platform if you're looking for inspiration I'm particularly recommend this exhibition page where you can find really lots of interesting and beautiful interactive projects made with code ok now here's the part that I'm so excited about because this is like branding this is a project two years in the making but it's brand new in terms of its announcement today at the time of me making this video the p5.js web editor this is an editor that you can use that you can use and write code in the browser save your projects share your projects with look there's that David life thing again with without anything they don't need to download anything at all and I'm gonna show you how to look there I am that's weird and I'm going to show you how to use the p5.js editor while you're learning to code I do want to mention that if you are interested in all of the features of the web editor watch this video by Cassie terre occasion this is not a beginner programming video but it's a video for people who might know a bit about programming already to see what the things a web editor can do actually walks you through every all of the features accessibility is a core feature of the p5 web editor if you are low vision or blind there are a lot of features built into the web editors allow you to code with it and matura talks about all the people who contributed to that effort and those accessibility features in this video as well as if you are a teacher and you want to teach with p5 maybe you want to use these videos or make your own or write your own curriculum sabor Khan who does education outreach for the processing foundation talks about that in this video and I am planning to make my own series about how to use the p5 web editor and Google classroom together so if you're interested in that stay tuned I'll be making a video on that okay so now this is the p5 web editor um there it is so well look this is some code that doesn't look so bad function setup what does that create canvas what is that background 2:20 what does that function draw what is that this is all the stuff that I'm going to talk about precisely in the next video so in the next video I'm gonna show you what kinds of things can you type here what ends up happening over here when you type them and why and we're just gonna go from there video after video after video adding piece than this piece and this piece and by the end you can make your own interactive animated game artwork data visualization who knows you're going to be much more creative and come up with something much better than I could possibly imagine right now okay so if you're excited about that great keep on watching there's also lots of other things in the world besides programming like so you could go do that stuff too and especially like being with people and hugging your neighbors and stuff like that that sounded weird I have you for that somewhere I'm gonna go now I have to stretch my hamstrings because I have got some back problems and that's gonna help I see I got that in there alright see you all later in the next video and everybody in the chat is talking about which programming language they love the best for whatever reason alright that's gonna be okay right me I am so me do I need to do I need to re say something else at the end there yeah that's gonna stop with the dab requesting cuz I it's it's too much noiz in the chat so I'm not going to do it let's see Oh getting text method on me I just got a text message from Cynthia Nixon the New York governor's race I was like oh the big sin is texting me in any rise no I don't think that's a personal message oh right I think it went well Thank You Marshall okay so this is what the good news is I have gotten past what is the harder part for me slack channel participants when I'm done with the live stream today if you are there could you please remind me I need to make I need to stay a little longer and make a quick intro for the actual NYU course that just talks about the NYU bureaucracy stuff it's you're not missing anything I just need to not forget that because I the course launches on Tuesday this is not the eraser that I use and I want to make sure I have that okay alright ok so it looks like I got a super chat thank you to mr. Uggla help I am watching an insane man Babylon indeed that is exactly what you were doing [Music] ok alright so all right Oh into p5.js org all right okay I'm gonna do drawing I got a couple talking about drawing coordinate systems and shapes in this video alright oh wait so I guess I'm gonna do this flip thing that's weird that might but I think maybe I still need to like I mean the thing is if I'm going to do this then what's the point of doing the flip thing I mean I could just leave it like this but I could also do this and flip and then and I could kind of more come over more this way and then I have more I don't know how do i oh there it is yeah like I could do this and then like if I'm just whoa and then you know if I'm saying like just try to figure this out so I mean talking about the code we see it over here I mean I can kind of do this and imagine that I'm referencing the screen anybody have any feedback about the layout thing like so these are my options like kind of use just part of the screen and stand kind of off to the right but have the code over there so it's okay if I'm a little bit in front of this while I'm talking I think this is the best because then I could sort of back off and talk about this or I can kind of move over and talk about this I think I'm gonna leave it like this for right now but at first I'm gonna do this so the video starts oh it's like this I know you guys I know everybody watching is about 30 seconds behind me so oh I should have been that I guess I need to make something about signing up for an account all right so let me oops no at the moment that the reason why I don't want to do that yeah there's some okay so the one problem I have people are commenting on the layout stuff and it's a little bit unfortunate but I have no idea what you're referencing because you are like 30 to 45 seconds at a different time so so Matthew I don't know what you meant and there's also the dark theme I think yes let me just check that there's dark which I could use but if I do that I definitely need to use the high contrast I think I think this actually looks better on the on YouTube the white one all right I'm gonna I'm gonna leave I'm gonna use my own instincts here and I'm gonna do it like this yellow on left then code then window Oh got it editor on right okay oh boy this is way too hard for me to decide coding on the right canvas on the left okay great so I'm gonna do this but I'm going to leave myself a little bit of buffer zone here okay the reason why I went to incognito mode was to have a view of it without being logged okay coating on the right canvas on the left okay great that's what everybody seems to be saying all right you're wrong what time is it oh it's not even six o'clock that's a good sign because I think this will be pretty fast you know I waste so much time in between I appreciate everybody saying let's use the dark theme I'm a little bit concerned about how that's gonna look just in terms of my seeing it on the monitor it looks weird but you guys are you are all actually watching Yeah right hi let me just try it settings yeah this is actually pretty good so I think I'm gonna leave it like this high contrast people are okay with a high contrast so I'm gonna change it to that though just to show show that feature this is the dark I think it needs to be the high contrast now we prefer the high contrast all right light theme looks better on YouTube so I'm looking for in the slack channel kind of do this real quick sorry everybody this is kind of important to get this right and in the in the poll that I just posted in the slack Channel when I say dark no dark means the high contrast I'm not gonna do the dark without the high contrast I don't think that's right as a colorblind person I appreciate the high contrast okay okay seems to be the popular one okay so just so everybody knows I am having it start like this cuz this is what you're gonna see by default and I will switch it alright thank you for everybody for bearing with me here all right okay I got a good start with this hello I'm back so this is the first video where I'm actually gonna start coding in p5 with the web editor that's those weirdoes very good hello I'm back so this in this video I'm going to start coding in p5 with the p5 just web editor for the first time on this coding train YouTube channel so if you go to you should what if you're following along you should go to editor p5.js org and you will see something that looks like this now I'm in an incognito window here because I want to show you what it looks like being logged out what you're going to see on the top right you're gonna see login or signup so if you've already made an account you'll want to log in but more likely you if you're watching this for the first time you're going to want to click on signup this should be its own video because I think I need to I think I think if I'm gonna have a video about drawing with p5 you shouldn't have to watch like even if it's just 5 minutes long about setting up that this probably should have been in the previous video but too late alright sorry let me just give me one more time here ok hi so before X I know I said that in the next you watch the previously I said the next video I'm gonna start coding apologies I'm not gonna start coding just yet I didn't do one more thing I'm going to show you how to get set up with the web editor itself so the first thing you want to do is go to a web browser I'm using the Chrome web browser but the the and I'm on a Mac but you could be on any other computer and using a different web browser as well you want to go to the URL editor dot p5.js org that's where you want to go you can follow along and go there right now what you're gonna see is something that looks like this this is the web editor and you can actually just start coding but I'm going to show you what these things mean but like what if I change this background number to zero and then I run up here and there's this button here this this button it looks like a play button like I'm gonna play on my old timey VCR well really this is gonna run that code and I'm gonna see well look at this there's a square with a black background over there if I change this to 100 and I click play again who that the color of that change where they say 100 comma zero comma 200 now the colors purple so I'm off I'm off the train is off the tracks but I'm going to come back and explain what all these things are how you type them why you type them and what they mean later but the thing is like this is my opus now I have made this beautiful wonderful p5 sketch and I wanna share it with the world I can't I can't I could go to file and I can click Save but it says in order to save sketches you must be logged in so at the moment the editor doesn't have any way to save something without you having an account you can play around but what you'll want to do is go to sign up so if you you might already have it account you can go to log in I'm gonna click sign up and here what you can do is you can create a username and email and a password and if you are if you don't have your own email address you know you you can and you have a parent or somebody else that you can ask to use their email address to sign up that's what I would suggest doing so you want to create that account you don't need to use your email other than just for the signing up so once you've signed up and you've logged in you're now I'm going to leave this you're gonna see something like this now I created an account called coding train and it will say hello comma the username that you picked so you'll see that you can go onto here under my account you can see there's things like my sketches my assets this is something that will if I'm gonna show you how to you can use images and sounds and upload videos to the editor those are things that would appear in my assets settings I'm gonna show you in a minute but now we're in p5 itself now I want to go back to my beautiful opus where I don't know why yet but somehow I changed some numbers and I got this beautiful color over there now I can go to file save once I've done that this URL up here is a you URL forever that that is my sketch and in fact I can go right up here to sketch notes file share and you can see look now I can share the code for my sketch here I can actually share a full-screen version of the sketch let's look at this look here's my beautiful sketch so now I'm going to show you how to make more interesting things and then share them without the code and then this is something called an embed so if you have a blog this is something where you can actually take your sketch and embed it into something else I'll come back and show you this stuff maybe again as we get further along and I'm not going to worry about it too much right now okay so we've got it here's the thing what is the name of this project what is the name of this project if i zoom in here the name of the project is unbiased shoe so this is one of my favorite things about the p5 web editor it will auto-generate a name of each sketch for you now the truth of the matter is you probably want to have some practice of renaming and naming it something that describes what it actually is I can click this pencil icon and I can call it coding trained editor demo I can hit enter and now the sketch has that name the URL this name is not part of the URL for sharing that sketch it's just a name for you to keep track of if you ever go to for example file open actually I want to it's telling me I don't want I need to save it first so I'm gonna go to file save and then I'm go to file open oops didn't save I found a bug and file open my account my sketches why why is it not saving weird hold on everybody save project saved I remember this happening I remember this bug we're gonna fake it for the purposes of this weird so it shouldn't be it's saved it shouldn't be I don't know what's going on I'm gonna choose not to worry about this yeah there we go I'm gonna choose not to worry about this and just ignore it for a little bit yeah yes it probably is saving it's just sending the prompt anyway we're gonna have to investigate that so Matt to you grab do some magic editing here so I could save it and then I could go I could so so I could now go I could now go to file open and I could see look these are other sketches now a measly friend is some sketch I must have created that I forgot to rename 10 print is something that I was creating so you can see these are the sketches that I have made I could go and browse my other ones okay now here's the thing for me to make my tutorials I want to I want to adjust a few settings visually for how it looks to make it easier for the viewer to see it and so I'm gonna go here under settings and one thing I could do under settings I've already changed the text size to 36 I'm gonna go to this high contrast theme and then I'm gonna close X here we're gonna see this is a nice high contrast theme it has a dark background it also is easily viewable for anyone with who's colorblind in any visual impairment so I think it's going to be nice for the video tutorials to use that theme I also would prefer to make sure that I'm not standing in front of the code by accident so I'm gonna do something a little bit weird that I've been at happen to mention in this video I'm going to move the code window to the other side this is not a feature of the editor I have someone coding trained contributor sent me some code that I was able to hack the browser and I can put the code on the other side and I can see the preview over here so I am going to sorry if you bear with me for a second I am now in my videos I'm going to have it look like this at some point that might become a feature of the editor if other people need this ability to flip where the locations are or if you really need to know how to do that I'll provide some instructions in the video description about how to run add a little button to your web browser to you flip this back and forth but I'm gonna leave it this way I think this is gonna allow me to code in a way that you can see the code over here and if I'm standing in front of the output every so often no big deal okay again this was not comprehensive if you want a comprehensive overview of all of the features of the web editor I will link to the processing foundation playlist there's three videos about p5 and the band the web editor Cassie the Creator the web editor does an overview matura talks about the accessibility features and there and there and there's a video about education with p5 from soccer as well so okay so now if you somehow made it to the end of this long rambling video I will really code in the next video in the next video I'm going to talk about what are the commands the instructions what is the syntax of JavaScript with the p5.js library to get things to appear right over here see you there oh yes sorry I forgot to show that you could log in with github or Google I think the mean is that a big deal that I missed that let me tack that on here just gonna log out one more quick thing that I want to mention actually thank you to some live viewers who pointed this out if you don't want to sign up for a new account you can actually log into the p5 web editor with an account that you already have with Google or with a website called github which you don't know what that is there's some other videos you could watch but you don't see those on the signup page so those don't show here but if you go to the login page you can see these options here login with github or log in with Google so that's another way of logging in to the editor I wonder if that can be spliced in the middle not to you if you can figure out a way to splice that in the middle that would be great is there a possibility to get to share code with other users absolutely you absolutely can okay I'm sure I miss stuff I'm doing my best all right flip didn't remember it doesn't remember like how I do that but that's fine okay why is it not saving this is a little bit distressing that this this seems to be a bug that this should go away oh thank you Austin for that bookmark yeah all right I don't know what's the deal with the saving thing but I'm gonna choose not to worry about it yeah weird oh wait hold on let's just see okay no problem and okay all right what do we got six o'clock we're doing well we're doing well every time I walk over here to cycle the camera my phone is on the floor charging and I see all these notifications I got to turn it upside down so it's really distracting me turning it upside down okay it also does autosave alright okay yeah this couch is still running but you should be all that people are saying like maybe it's not saving because the sketch is running I don't think so it's it's it's meant to be able to save and reload and while it's whether it's running or not that shouldn't affect its ability to like save okay by the way doing this where is the oh yeah this is over here now that's a little bit weird mm-hmm so one thing that I don't love about what I just did is but I'm not going to get to that until later so yeah that should probably by the way in this bookmarklet thing we should probably have the sidebar open up here if somebody wants to help with that hello okay it's time it is time to start talking about and writing some code what's going on here it you can see already that there's this function set up function draw what is that stuff there's curly brackets there's parentheses let's hold off on that for a second let's not get too worked up about that let's focus just for a moment on create canvas parentheses 400 , 400 closed parentheses semicolon I'm going to write that out in a generic way I'm gonna say something like instruction another word for that might be command and the truth of the matter is the actual technical name for what I'm writing here is a function name function name instruction instruction parentheses some number comma some other number I don't know comma some other number comma well let's not put that there close parentheses semicolon this is the syntax for executing an instruction for the computer to follow the name of the instruction parentheses that open and close followed by a semicolon in some number of things in between that number of things could be 0 it could be 1 it could be 2 it could be 3 occur before it depends so now if we go back to create canvas we can see look the instruction is create canvas parentheses 400 comma 400 so ask yourself pause the video for a second what does 400 mean and what does 400 mean I mean it means the number 400 but like why isn't them referring what is it doing okay are you back did you think about it well one way to try to figure this out is for me just to say well why don't we just change the number to 235 then ran the program already I have to tell it to rerun the program well it's half as wide but just as tall mmm by the way there's this interesting button over here Auto refresh huh so notice how I change the code and then I had to run it again that was a little bit inconvenient I mean there's it's not so bad I'm happy to do it as often as I need to but things might be a little more convenient if I select that because now what if I change this to 300 whoops 300 change this to 400 when I change this to 800 it's always going to update the drawing the result of the instructions here what if I have that auto refresh clicked and I'm gonna go back to 400 and 400 so what those numbers define is the width and height of this thing called the canvas this is the drawing canvas it's the thing that we're going to write instructions to draw stuff in to move things around interact with things all eventually and the syntax for making this is create canvas foreigner 400 it's interesting there what happens if I delete this well so p5 by the way we'll always put a canvas there for you if you forget to say create canvas it made a canvas there for you but it just didn't know how big to make it so it takes some arbitrary size probably 100 by 100 but let's put that back there's 400 by 400 there's a really important thing that I want to talk about but let's come back over here so create canvas this is the function name let's use the real terminology you can think of it like a command create canvas that's your command these are called the arguments I think earlier I didn't actually say this but if you were giving me instructions to do some exercises and you said do some jumping jacks I would say how many you need to modify you need to provide parameters for how I should execute the instruction the instructions create the canvas with a size of 400 by 300 pixels meaning create a area on the screen that I can draw to that's 400 pixels wide 300 pixels high if the concept of pixels is new to you on a computer screen every single color that you see is if you zoom way into it as a single dot now there's all sorts of weird funny business going on because we have all these high-density displays now that have multiple pixels for every pixel but all that aside the idea here is if I were to zoom way in wait-wait-wait-wait-wait way in and count all the dots there'd be 400 of them and there's 400 wide and let's change this to 300 just so we can see that's a little bit different 400 by 300 so this is the idea now we have to ask a really important question I've totally forgotten to bring this up what is the difference between JavaScript we haven't even really gotten to the drawing stuff yet but don't worry we will JavaScript and p5 is create canvas p5 or is it JavaScript is 400 comma 300 p5 or is it JavaScript this is not an easy question to answer and it's a question that I hope will resolve itself for you over time as you program more and more and learn about other libraries besides p5 that work with the JavaScript language but the key thing is here the language the syntax the fact that you need parentheses and commas and semicolons and names of functions go here that is the JavaScript language to call a function in JavaScript is to write the function name followed by parentheses with commas for the arguments and a semicolon that's JavaScript create canvas is a function that exists that is defined inside of the p5 library so if you did not have p5 if you weren't using the p5 web editor here in some other environment and you wrote create canvas you might get an error message saying I don't know what create canvas is all programming environments and editors allow you to import other library but the p5 web editor has done this for you so the fact that we can execute p5 commands right create canvas and there's a lot more of them means it is because we're using the p5 library the way we execute that command where the semicolon goes where the parentheses go where the commas go that is all the JavaScript language itself the syntax I hope that gives a little bit of clarity there's more to it than that you'll have many more questions but hopefully I'll keep answering that as we go all right so now where can I find out about other commands that I can write besides create canvas and when I say commands I really mean functions but I like to use the word command at least at the beginning because it's it's a little clearer to talk about what it just we're actually doing here you and me but technically these are functions that we're calling okay all right so the answer to that question is the p5.js website if I go to the p5 Geoff's website and I click on this tat this this link called reference this link on reference has every single function that's part of the p5 library so somewhere on here I could do a find we can find create canvas and I could click on create canvas and learn more about Korea canvas this is known as the documentation programming languages and programming libraries and frameworks all they should at least have documentation where you go to read about how the thing is supposed to work I could sit I could make like thousands and thousands of videos and just go through every one in one of these and explain it to you but learning to program is not just learning how to write the instructions and the syntax it's learning how to read documentation so the functions that I want you if you're watching this video series which I guess you are to follow first are the ones that are under 2d primitives this is where we're gonna start there are lots of functions that go and explore them all don't listen to me but for your first exercise after you watch this video just limit yourself to triangle rect which is short for rectangle quad which is an shape that has four vertices to it four sides edges point which is a single point line which is a line ellipse which is a fancy name for circle but it could be sort of squashed or an arc so all of these are could probably needs its own video to talk about artworks back so but you can explore these experiment with them let's start with let's just make a guess let's start with rect for rectangle and I let's not even click on it yet I'm just gonna go over here and now the drawing now I need to talk about what setup and draw are what are these blocks of code why do they start with a curly bracket and and a bracket I'm gonna come back to that for right now we should understand that setup is the place where create canvas code that's the beginning we're gonna set up our canvas draw is the place where I'm gonna put my stuff to draw stuff to the canvas there's more to it than that but that's the way to think about it right now so I'm going to go in here and I'm going to say all right I'm gonna zoom back out our ECT find out what it means to me I'm going to put some numbers in there shot him out you're not you can't hear you sorry I'm gonna say like 150 25 nothing's there yet 75 senator 85-75 ah look at that suddenly there's a rectangle there so even just through guessing right we know the name of the instruction rectangle rect or ect we know that we need to then put maybe some numbers in between parentheses and then end with the semicolon we could just try be weirdly like what can I put another number there whoops I messed up can I put another number there oh yeah oh look at that what did that do so what if what's going on so you know what I'm gonna actually take the time to explain the rectangle function to you then we're gonna look at the reference page and then I don't need to do really the other ones because you can then do this for yourself you could type the command in you can type the numbers in you can turn play around and guess you can read the reference page and try to fix it then you can ask me questions in the comments and hopefully I'll be able to respond to you all right so let's come over here so let me take I need an eraser time for a second we can edit this let's take a little break for a second to strike and drink a little water this is like really long by the way does anybody have a guess as to like just this drawing video like how much time I've spent so far I mean I tend it's like take way too much time I think but I think this is like important pieces for the total beginner yea denne denne asks could you put the background function and set up as well yes so this is definitely something that I'm going to come back to and I think it's there in the future videos but you absolutely could put the background function in setup yeah all right all right I'm not getting any answers to that question that I asked which I don't even move what the question was all right let me tackle the camera since I'm over here I sure that line actually I should have done line I kinda want to go back and do line but it's fine yeah all right okay so I need to give myself oh space here and what I want to do is draw the canvas for you then what I want to do is write out this function rect and I'm gonna say 100 what did I what did I put actually in here I put 150 25 75 150 25 75 so how do these arguments define the way to draw a rectangle right our ECT means draw a rectangle here are the properties of the rectangle that I want to see in order to understand what these numbers mean we need a little bit of background knowledge about this two-dimensional space itself of the canvas we need to think about something called a Cartesian coordinate system so a Cartesian coordinate system named for the French mathematician Rene Descartes Cartesian is a way of describing a two-dimensional space and saying like this spot can be identified by this quote-unquote XY position or this horizontal and vertical position you if you've taken some type of math or geometry class for ten depending on where you are are you're sort of learning the worlds of journey you might have seen a graph that looks like this with some ticks on it up and down and you might have learned like oh this is something called the x axis and this is something called the y axis and if I say here's a point three comma four I go this it and this is somehow the point 0 0 the origin the centre 3 comma 4 would be 1 2 3 go up and then 1 2 3 4 refers to this position right here within the Cartesian coordinate system a 2d canvas being drawn by p5 is also a Cartesian coordinate system but it's a little bit confusing because this default the standard way accorded system in with pixels and computer graphics define does not look exactly like this the equivalent of this zero zero being the origin is actually up here at the top left and this is the x-axis horizontal this is the y-axis so if I were to say three comma four and try to find that pixel I would have to go one two three pixels over and one two three four pixels down three comma four would be this pixel right here the truth of the matter is are really really tiny right this is very similar to a piece of graph paper and that might be a way of kind of like playing you know you could stop and go get a piece of graph paper and try to like you know draw a big canvas on it and try to position where things are that's the idea of what we're doing here the pixels are really tiny so in many ways so so so if you have two more imagine like this is 0 this is pixel 0 and the width is 400 and this is gonna this is gonna make you a little bit crazy the last pixel is actually pixel 399 well that's so weird think about that though and a little bit off on a tangent here that's not but it's kind of it comes up again and again let's say it's five pixels wide there are five pixels but the first pixel is 0 0 1 2 3 4 5 fingers but I only got up to 4 so I this is like foreshadowing this is gonna come up but again again counting from 0 is a thing that we do a lot in programming which is a little bit different because like 1 2 3 4 5 but there 5 things but there's 0 1 2 3 4 all right so pixel 0 pixel 399 so what does this mean 150 this is the X location of the rectangle and 50 is the Y location of the rectangle so let's just guess maybe one of a pixel 100 is about over here pixel 50 is about over here so that's this pixel here that's 150 this is the width of the rectangle and this is the height of the rectangle 1 even that's about 25 pixels maybe that's about 75 pixels so that is how we define the rectangle the first two arguments are the XY of the top left the third argument is the width and the last argument there is the height and there we see the rectangle I clearly didn't draw this perfectly but if we come back here we can see that's exactly what you see right here and I could start changing these numbers around and I could say 150 and I could say 75 and I can move it over to 175 and it's gonna be over there and I can move it up to zero and it's going to be there so you can see this is what you can play around with now changing those numbers I gotta I gotta get something off my chest what we're doing here seems telling this is what programming is are you crazy it would be so much easier for me to do this in insert you know commercial software that makes images or drawings here but I don't want to bus market for free anyway that the answer is true this is only just the way I want to start the whole point of programming is to write algorithms and instructions for saying things like spin around move up and down bounce off the edge how could I turn this into a puzzle game pong where that's actually the paddle that moves up and down we're gonna get I'm gonna get there but so this is a little bit of like not really how programming works but it's a good place to get started and feel comfortable and so basically you know what I'm Simon tis if you choose to accept this is to make your own drawing make your own drawing maybe make a drawing of somebody a friend of yours or someone in your family a little portrait of them are self portrait or do something abstract or draw a landscape or something that you know so I won't be on it so just try to make now make make a drawing and how are you gonna all I did was show you a rectangle I've been like talking for like two and a half hours I don't think I was this rectangle on the screen so how are you gonna do more than that I'm gonna leave you to it a little bit but but and let me show you how to how to get get get further so I'm gonna go back to the p51 that's here for I'm gonna go to the p5 reference and I'm gonna click on the rectangle function right this is where I am remember p5.js org slash reference I'm gonna click on the rectangle function and we're gonna say first we're going to see here's a nice little example so visit with the very least I could just take this and copy it shoot I have to go back here and I could copy it into my code and we could see okay that's what the exhibit is that look the same as what's here yeah kind of this is a smaller canvas but so right here oh look this there's like another argument and it's round and there's all the others so this is what you can explore but the point here is that what I want to look at is this is what's really important this is known as documentation this is saying this is the name of the function and these are the arguments X Y WH these are other arguments the reason they're why during their square brackets is they're optional so you you have to use an X Y width and height you can optionally add more arguments and here it's going to tell you what they are X is the x coordinate of the rectangle that's exactly what I explained to you over here Y is the y coordinate W is the width H is the height and then there's these other optional ones for rounding the edges and I'm gonna I'm not worried about that too much rectangle is maybe not the best one to start with because extra added complication but I could easily just go over and now click on say line and I can see oh look at this this is what it looks like the function name is line it takes four arguments this is what I get what are those arguments x1 y1 x2 y2 x is the x coordinate of the first point why like why is y1 is the y coordinate the first point oh yeah a line is the thing that connects two points look at that I've connected two points with a line so now I can come back here and by the way oh my god Z I could get into 3d let's not get into 3d right now we'll save that for another time so I'm gonna go back to the editor and I'm gonna say something like line zero zero 400 there we go look at that there's a line oh and maybe I want it to be 403 under because I wanted to go to the other side or I wanted to actually be like 0:50 there's the line right you can see now that line is appearing it is a line that connects two points zero comma 50 and 400 comma 300 now okay something is really bothering me about the code don't be like me don't be much more forgiving and relaxed about the world but I cannot tolerate the fact that this line of code right here is starting over here and this one is starting a little bit over here code in I'm kind of joking around and look there's a space here but there's like no space after this comma one thing that you'll that is important to note is this is going to work no matter what if you if your code doesn't line up or you put a lot of spaces in or a few spaces in these types of things white space meaning space and return and tabs and all those those things do not affect the way the code runs but they do kind of make the code a little less readable and p5 has a really nice feature under edit tidy code which you can also do shift tab which will kind of fix the indentation and white space for you so I'm gonna press shift tab right now oh and everything is all lined up so I encourage you to use shift tab you know save after you've done that I didn't mention by the way that you can see when it's last been saved right up here it says just now that'll change into like a minute later and it also has autosave which you can adjust here in the settings autosave on and off that sort of important little feature just to quickly mention all right so we're almost almost ready to finish this video one thing one thing I got it sorry so first of all ah why is the background too pink and why is the rectangle white and the line is black well I haven't talked about color and also that's the topic of the next video we these are arguments that define the dimensions and the location of shapes but those arguments don't seem to define the color so we have to look at how do we define color the clue to that is somewhere in here right background the function must be the background color that's coming play around with that on your own if you want but that's what I'll talk about in the next video the other thing is look at this the line looks like it's going over this rectangle what happens if I take this line of code I'm going to use command X for cut and command V for paste now look at this zoom on in the line is behind the rectangle so layering the layering of the shapes what appears on top or behind has to do with the order of these lines of code the order that the code happens is is very important to how a program runs that's important right now just drawing some shapes playing around experimenting but this is a crucial concept that will come up especially once I want to animate this stuff so that's that's I'm that's gonna come how does this square move around how can I interact with the mouse and the order is gonna become even more important then okay so here's your assignment make your own picture use only don't listen to me and use whatever you want but if you want to constraint use only what's here under 2d primitives and yeah and maybe not arc or the play with arc and I'll have to make a video about arc or something and mmm let me kind of show you one more thing do I want to show you one more thing I think so I'm gonna be really useful so I got to show you one more thing where is this one okay attributes these are some other functions that you might be interested in exploring and I'm gonna come back to strokeweight for sure some of these as we talk to talk about color but at least one rect mode and ellipse mode are kind of important so I'm gonna just show you something about rex mode which is that remember how I said that this XY defines the top left location of the rectangle sometimes it's much more convenient to draw where a square rectangle is by setting the center of it and so that can also be done let me show you what I mean by that for example the center of the canvas right what's the center of the canvas if it's 400 wide and 300 high the center is 200 by 150 right so I'm gonna put this rectangle at 200 150 and then I'm going to make it 150 wide and 150 high huh that's weird oh it's not in the center oh but the top left is in the center but what if I want the rectangle itself to be centered well I could figure out the math for that I go okay so then it's like 125 maybe it's like that's shifting it over but I can use an attribute sorry and the attribute rect mode is another function I can type Center in here this is an instruction a function to set the mode of drawing a rectangle to Center which means now look at it there it is in the center okay so that was another important so maybe in your exercise you might want to use rec mode in ellipse mode as well we could click on this and we could see look there's corner there's corners there's radius they're Center so there's a few other ways of defining how rectangle is but I think for the most part you're just gonna want the default way which is corner or Center which is Center okay you know when I said I was gonna do these videos I sort of imagined doing a whole bunch of like two or three minute ones I've completely failed at this this has became kind of a long one about drawing but hopefully you've got the basic idea and I look forward to seeing what you make you can share links to the p5 sketches you create after watching this video in the comments so I'll click on them and look at them and that'll be exciting okay thanks for watching and see you in the next video where I'll talk about color alright how are we doing everybody I'm feel like I'm actually okay on time at 6:30 we just guess I've been live streaming for about two hours and three hours is my r2 limit but I think I can do about a bunch more things all right you know somebody I can't remember who somebody on Twitter maybe sent me all this like really useful feedback look this up and I forgot to look at it right before I started whoops and the camera went off that's good so that wasn't more than half an hour I've seen the chat I don't know how far I'm gonna get today people are asking questions are you playing to do the whole tutorial today I don't know what counts there's the whole tutorial I'm gonna do the color one today then I think I'm done I don't know how many of the other ones all redo line is off the canvas there is no column 400 right okay okay um sorry I got distracted I I was like trying to find somebody's tweets sort of looking at Twitter way too much stuff going on I'll be back let me just see if I can find it because there was like really good feedback in there and I'm toy look again at the wrong time link to corresponding original videos in the details okay updated with es6 notation so that's good because I'm not worrying about that yet oh all right so these are these are good feedback but it's actually not necessarily related to what I'm doing right now so that's okay okay so anybody who was watching this who's like actually a total beginner anybody out there a total beginner watching this following trying this yourself running into anything okay Oh No press back who is in the slack channels asking do you mean my feedback from last stream no that feedback is also really good that was about the workflow setup stuff and I do want to look at that it was feedback about how I since I'm redoing some of my older beginning videos things that I could do to make them better and the feedback there that I just found on Twitter was more about like the stuff that's later on so okay so now what I'm going to do is let's do the color thing [Music] all right by the way of that eye problem you know this I guess I am Who I am you are what you are but I do feel like that was way too long okay all right so let's let's talk about color let me cycle the cameras okay all right yeah we got well let me save this let me do duplicate encoding train color all right all right hi why is the background pink that is the question that I would like to answer in this video color color is the next thing you probably may have to watch the last video you hopefully made some beautiful interesting or not that's beautiful but you made your own drawing and you're proud of it I'm proud of you for making it now you want to add color you can looked ahead of how to do it and started adding color anyway but you didn't I'm gonna show you how to do that now before I do that I do want to mention some other kind of logistical things that I've kind of forgotten to mention so one thing is whenever I create a sketch with the p5 web editor I'm gonna put a link to that sketch in the video's description so you could go down to the video description and click on it and so if you go to the link to the sketch you're actually going to go to a page it's gonna look just like this it's kind of the same code if you hit play it's gonna have the same output now you might have different you might not have the the dark theme with high contrast turned on so your layout might look a little different but ultimately the code is going to be the same but when you you won't have a save option because you're looking at a project that's made that I made in my account that I've shared with you so let me bear with me for a second I'm gonna be right back so this is going to edit so I'm just gonna go to some other sketch of mine so many oh my goodness so many schedules sketches I want to find something really simple this so I'm back now this is a another sketch that I've made for another course and I'm gonna kind of get to all this stuff and how all this kind of stuff works but even now look at all this complicated code it kind of might make some sense to you right o-line you know about that ellipse you know about that what's this X&Y this is all stuff we're gonna get to but this is a sketch called oscillation by nature of code which is a different account so if I I can edit this code right I could say like line you know 100 and then oh it's doing something slightly different I'm not sure what exactly but I can't do I can't there's no save option where's the save option you're gonna want to go to file duplicate and suddenly you're gonna see that it says oscillation copy by the coding train and I could rename this and I could say oscillation demo for YouTube or something and I've renamed my sketch but this is how when you go to a sketch that I've made you will come to a page that says you know color example by coding train and you will then do file duplicate and start writing your own the truth of the matter is if I'm doing so simple you don't necessarily need to duplicate my code to keep doing it but that's an important piece as I go through future vision I want to mention that at the outset of this video okay I'm gonna leave I'm not gonna worry about that I'm gonna go away now we're back here color how does color work on the computer you know I should have thought of this before it started recording this video but here's here's what I'm gonna say it with three syllables are G B remember this RGB RGB R stands for red G stands for green B stands for blue the way that you create a digital color is by mixing some amount of red some amount of green and some amount of glue so that's that that's where I want to start but we have that's the concept how do I apply that concept to function names and arguments of those functions well actually guess what we have done that already in here there is a function that is talking about color background is a function that draws a solid color over the entire background of the canvas and there is somehow 220 sprinkles of red 0 sprinkles of green right RGB those are the arguments and 200 sprinkles of blue and when you sprinkle that amount of red and that amount of blue you get this pink but let's just go with this what if we take out all the blue you can see that's pretty red what if I take out all of the red now it's black what if I just put some like really big numbers in here like just guess like a thousand look at that now we've got white to all the colors all mixed together make white that's weird right because if you like worked with paint and you were to mix all the color all like a whole lot of paint together you get this like brown muddy color get darker and darker this is the way that the color mixing is working here it's like mixing light so it's more than that the analogy here is I have a red flashlight a green flashlight and a blue flashlight and if I shine all those flashlights together in the same spot they mix together it's additive color the more we add up all those colors the brighter and brighter it gets but actually this is kind of wrong the fact that I'm putting a thousand in here so the idea here is we're sprinkling a certain amount of red and a certain amount of green and a certain amount of blue by the way there are other ways to set color I'll get to that this is not the only way some of you watching it like what about I heard something about HSB color and well there's all sorts of other ways to do it but this is the fundamental basic way the amount that I want that I can sprinkle has a range none no red none more red is zero the maximum amount of red is 255 by the way how many numbers are there between 0 and 255 if you keep the 0 0 1 2 3 4 it's too thirty-six again we're back to this weird counting from zero thing so there's a 256 possibilities 0 through 255 so now we can go back and we can kind of see let's come back to this and see all right 0 let's go back to 0 0 0 let's do 200 let's do 255 we can see that it's blue let's do 100,000 it's the same blue so p5 is kind of smart enough to know when you call the background function if you by accident put a number in there that's bigger than 255 just consider it 255 now you can customize those ranges for yourself and there's reasons why you might want to do that again I'm going to come back to that you could look up the function colormode for how to do that but let's just stay with the default a red a green and a blue so I'm not the I'm not really very talented visual design wise so I'm not going to talk to you about how to pick beautiful colors that work well together yeah I hopefully you can find you you're gonna have that talent yourself I bet or you might find some other resources but this is how it works our GB one thing you might notice is did you notice how when they were all 0 it was black and when they were all 255 those white what happens if I make them all like 100 it's like this gray color when R equals G equals B when the red green and blue values are all equal this is something known as greyscale color greyscale color is a color it's with notes it's the saturation is a term that's D saturated it's a color but it's gray 0 through 255 0 being black 255 in white for shorthand all of the color functions and there's more of them allow you to if you want to do a grayscale function you can skip having all three and you can just use one so if you put one argument in the background function you're assuming a grayscale color let's make note of this because there are a lot of different ways so let's assume that there's some type of color function right background being the one that we know right now if it has one argument this is grayscale if it has three arguments this is RGB and you can make a gray color with the RGB being equal but this is the way that you can call any color function now what other color functions are there let's go to the p5 reference I don't know why I don't have that open anymore let's look for color oh look oh so many things so many things said exciting ah so we want there's a lot of stuff about creating and reading color and I'm definitely gonna come back to that stuff this is really what we care about set in color so these are now you want to write make your new sketch your next assignment is to use any and all of these stroke no stroke no Phil Phil maybe color mode clear huh background so background we know about oops I clicked on it by accident but that's nice we're looking at the reference but we don't fill and Stroke are the next concepts that I want to talk about so let's say we have so what are the color function so color functions could be background that's one here's another one Phil here's another one stroke if this is our canvas and the shape we chose to draw is an ellipse with the ellipse function phil describes the interior of that shape stroke describes the outline the outline of that shape so let me show you what i mean by that so if i come by come back to the editor and i'm gonna get rid of the line and i'm just a with just this rectangle leave background at 100 what I'm gonna do is right before I draw the rectangle I'm gonna say fill and I'm gonna say 0 0 255 look I should show you about the console in errors I can't believe I'm showing you about that yes right look at this it's blue the interior of that shape is blue now I'm gonna say what's the outline it's black so by the way the default fill in p5 is white and the default stroke outline is black but I could now say stroke 0 255 0 and I'm already driving myself crazy with my inconsistent whites mates that we can zoom in and see the outline is now a green color so the interior the fill is blue the outline is green what if I were to do another shape like an ellipse and put that at like 50 50 175 oh look it's also green on the outside and blue on the inside Oh what if I want that ellipse to be a different color Oh what if I put like down here fill 0 255 0 well it didn't work why didn't that work I'm saying Phil green not ellipse well order order remember order the ellipse let's move the ellipse over you see how the ellipse is on top of the rectangle it's because it's drawn after it but you need to set the color of what you're about to draw notice how fill and Stroke are right before the rectangle well that's set to blue that's set to green the ellipse is still picking up that fill and Stroke it's going to be this like it's like you're saying hey computer thing that's drawing the stuff pick up this pen and I told it to pick up this green pen for the interior I meant to make it red but I told it after it already drew the ellipse so let's make this red because that's what I wanted to demonstrate but if I go and I take this and I put it before it suddenly it's red so look at that so I kind of want to group things I could add some the idea here is I can I can make a stroke that's like 255 so that's just using grayscale color so you can see like ah the interior here is blue the outline is green the interiors red the outline is white there we go you probably have a lot of questions ask them in the comments there's a few more things I need to come this video why why why why when we looked over here in the reference is there a no fill-in no stroke and by the way I encourage you to go and look at these reference pages and read them because you'll find the things that I'm explaining to you are explained there and probably more clearly and it also has examples why is there no fill-in no stroke well you might think to yourself oh what if I don't want this circle to have an outline no outline of that circle please oh I'll just put 0 in here write 0 must be like no outline but remember 0 is not no outline 0 is an outline that is black and this is why instead of stroke if I say no stroke then suddenly there's no outline so no stroke means no outline and I could say also instead of Phil no Phil means no Phil look at that so I'm just seeing the background color come through because I'm only drawing the outline of that shape now I'm gonna go back and put the fill in what's and I realize there's a few other things I want to talk about ok so remember I said there were lots of ways guess what there's another way I could have 1 2 3 4 I could have 4 the fourth argument is and I so RGB is not the whole picture there is also our GBA and a stands for something called alpha ok alpha I feel like I should I wonder if I should divide these videos up to shorter chunks yeah I mean it kind of want to like coz alpha could be its own video I'm gonna leave it long for now that's just the way I'm doing it today think back and redo nice ok yeah alpha a which stands for alpha alpha is a word for transparency meaning is the color see-through what does daddy mean right transparency so by the way the same range right 0 to 255 for the a 255 is the default meaning that color is just all aver it's another word by the way is opacity so this idea of kind of making the color a little bit transparent so it starts to blend with what's behind it now of course this is all about just creating the illusion of that 30 there's no blending of the colors nobody painting your computer screen it's just a single pixel with a certain color but p5 knows that if you want it to appear transparent it knows what colors behind it can figure out how to make that illusion happen so for example if we come over here for this ellipse right this ellipse that's red what if I were to add if I were to say comma 255 here nothing has changed I'm adding that alpha value if I put 0 there it's gone if it's fully transparent I can't see it at all if I make this 100 look at that you can see how it sort of looks light and it's blending with the background and blending there so maybe I want to just give it a little bit more 175 and you can start to see that there so this is something you can play with transparency so just to finish this whole thing off I can have one argument for anything background fill and Stroke is a grayscale color 0 to 255 3 arguments is an RGB color with 100% opacity it is fully opaque it is not at all transparent if I add the fourth argument I get an RGB color with some amount of transparency and by the way if I just do just a little bit of an aside here if I just use two numbers then I'm having greyscale with some alpha so it's a grayscale value with some alpha so that's important to know as well so those are all of the options let me see what have I missed here okay clear background let's not worry about that's much more important when we clear is important when we come to Anna so I'll come and look at what clear does once I'm doing some animation stuff but color mode is kind of interesting I should probably do a whole separate video about that I encourage you to click on it and look through some of the documentation for what you can do with color mode but basically color mode allows you to change the way that you're describing color with an alternate format well I don't want to set the RGB in value maybe I want to set something called a hue or a saturation or a brightness I'll make her trying to make a video about what HSB color is maybe I have one already and which gets all linked to it and then it color mode also allows you to say like what if I want the range to be between 0 and 100 it's easier for my mind to think about that but I don't think you necessarily need to use color mode right now but I'm letting you do ok so now what is your assignment if you're watching this and you're gonna make something take your drawing and give it clerk fill it with color set the background set the set to fill and Stroke of different shapes I want to give you just one more we give you one more little treat here if I add a function called stroke weight this is a function that's not setting the color but you know I'm trying to show you that the outline of this let me make the outline of this is like red and I've kind of like I can't even see it that's weird we make it blue oh you know why because I put this I'm so much more to show you that the outline is blue but I have to like zoom all the way in to show it to you what if I add this thing called stroke wait I just put the number 1 in there well what that number 1 means is the outline of the shape is 1 pixel wide it's a thin 1 pixel wide outline I could make that 8 and suddenly it's much thicker so and you know I can zoom in just to show this to you I could be sort of insane and make this like 24 or 105 you know it's only like the stroke is like wider than the actual shape itself but the point is just to be able to if you want to adjust the width of outline that's something you can do with these strokeweight function thanks I so what I want to do is show you something about code comments and errors this is really important I've kind of been skipping over that I'm gonna do that I'm gonna make a video really about that separately in with with the people I'm just web editor and that will be coming next okay so it so that's something it's gonna you probably watch that before you do your project or afterwards whatever but that's gonna help you a little bit just kind of keeping things organized and managed okay so I'll see you soon yeah was there a sound problem there so I oh yeah no sound bromo how long is the stream going to last I am a baby at another hour at the most I'm not sure oh building is probably completely closed the only person left all right it was very subtle didn't notice it okay so great so I'm gonna assume that's fine oh all right so I need to do something about comments and okay all right everybody all right all right I have to do one I really need to do this comments and errors hi so I have so far made three videos in this series about learning to code from the very beginning with P 5 and the P 5 web editor and I kind of have been avoiding showing you what happens when you make a mistake which I really should not have done that's the thing I really should be showing you right for the beginning but I didn't and I also haven't mentioned to you something called code comments and both of these things are fundamental to how you might create a p5 sketch one that you might work on or a period time and return to later so let's first look at the console and errors so there's this whole extra section down here that I've ignored I've been talking about this is where you write your code the play button execute the code and this is where you see the result of your code well what do you see down here what you see down here is messages that are things that are related to what's happening in your code that might be a mistake or something that you add you want to specifically put a message there so I'm going to show you there's a function called print I'm gonna say print and I'm gonna say hello and I'm putting this in setup because I want this just to happen at the beginning and this again I will come back to later so this being in the code suddenly in the console we have this down here the idea the console is not something so if you're making a project that you imagine users using like a game you wouldn't put the score of the game here you would want to draw the score somewhere on the canvas or there's actually a way you could put the score below the canvas something for the user to ultimately see but if you just want to be able to see what the score of the game is and kind of like for yourself while you're developing the console is for you the person who's writing the code or your friend who you're sharing the code with or your teacher or whoever I mean it's something that anybody using the p5 web editor can see but when you finished it and you on your own website which is maybe something I'll show you how to do that console wouldn't necessarily appear so in addition to be able to put your own messages anything that you do wrong is going to be down there now one thing that's really important notice how no stroke has a capital S look no stroke also doesn't even have any arguments in here like it's just open and closed parentheses because there's no way to modify it that's something I didn't mention notice how there's commas here if I could get anything wrong like if I delete this comma look at this now I'm also getting error messages in here now this is it won't go I don't even hear that sound did that did it just buzz buzz look error message so here's the thing whenever you see the red error message first of all just take a deep breath sometimes the error message is lovely it's like tells you exactly what's wrong and you can and it tells you how to fix it and this might be a case on caught six syntax error missing parentheses after your argument list sketch line eleven oh look line eleven missing frenzies sorry you know what it really should say missing comma so this is the thing the thing that's generating the error the web editor of the JavaScript language the browser all of these pieces are figuring out what to put down there it doesn't always guess correctly so we the next thing is I can see like unexpected a parenthesis we could kind of like see it there but we're gonna have to guess what's wrong it's actually a comma sometimes you'll get an error the message that totally makes sense I'm gonna change this from stroke weight with a capital W to stroke weight with a lowercase W and this I'm not getting such a great error message but this is a really important one uncaught reference error stroke weight is not defined well but why is it not defined I watched a video from Daniel Schiffman and he said that stroke weight is a function from the p5.js library it's not part of the JavaScript language but it's a function of the p5.js library and I could call it in my code if I'm using the PAI just way better we just drew but because programming is in JavaScript is case-sensitive it doesn't know what it is without the capital W and notice how the editor is syntax highlighting it for you so strokeweight suddenly it turns blue this is by the way no different than me saying like oh I want to write a function called unicorn magic o uncaught reference error unicorn magic is not defined because it's not a functions not part of the p5.js library or any other library that i might be choosing to use as part of my project there are other functions that you can call by the way that are just part of JavaScript inherently that you get when you use javascript and p5 adds functions to that so that's an error you're gonna see a lot it's it's because you've misspelled it maybe you got a capital wrong or it's just something you thought was in p5 or some other library using but it's not there at all so here's an interesting thing I'm going to just take out all the semicolons or like some of them no error message I'm having like heart palpitations right now because the semicolons give me comfort but the truth of the matter is the semicolons are somewhat optional in JavaScript they indicate where the end of the line is the end of the line of code background 100 is where is it it's there but JavaScript can usually figure out where the end of line of code is even if you don't include this the semicolon the weird things I'm going to show you something kind of interesting if I were to put let's say rect mode up here on the same line the code runs just fine the same way JavaScript actually thinks of that as two lines of code because semicolon me at the end of the line then the next line but if I delete the semicolon now all this lost it can't figure it out so this is why it's generally good practice to use the semicolons it's like a safety net like I'm really explicitly saying where the end of the line of code is but you might you like really just you should have fun and just like not using colons but I can't help it and also I have to do the tidy code thing now there okay so that's errors on the console there's another thing I want to talk about in this video maybe I should make it another one I'm so confused about whether to make short ones or long ones but I'm going to talk about it right now no I'm gonna do it in the next one I wanna shock I think I should make these shorter I think it's better to make these shorter somebody's gonna tell me that wasn't that long people just talking about the buzz talking about the buzz shy should I do another image I should I keep going or make it the next video like if you were a student you're in high school you're watching these on YouTube would you rather have the longer ones are a bunch of shorter ones long no I mean I find as bits 20 minutes it's fine short and curly this is a very scientific way of pulling we just see you write something into the chat they see Kelly is typing and I feel like Kelly is going to say in flack something really meaningful and I'm waiting all right I'm gonna I'm gonna yeah about 50 miles shorter long yeah that's true CJ right shorter is better for searching finding what you need I think the comments is its own thing so I'm going to I'm gonna do that or I know I said at the beginning of this video that I was gonna talk about the code comments but I'm not going to that's gonna be in the next video and do that separately so you can look at them individually and this videos title should probably just say like console and error messages so you won't will turn up in your search alright so if you want to the next thing that I think is useful to you and like working on your assignment to your project for this first set of videos is understanding what code comments are and how to use them I'll do that in the next video okay here I am so in this video I'm gonna talk to you about code comments and how you can write comments in your code for just you are your friend and the human beings who are look at your code to read or actually to like quickly disable and re-enable certain lines of code all sorts of exciting things you can do with code comments I'll show you how to do that in the p5 web editor but this is a universal concept any programming language or environment that you choose to work in we will have a feature of a way of writing stuff in your code that is ignored by the computer that's executing the instructions and is just there for you to review if you like took a break for a for a year and you come back or to remind yourself with something so let's look at that so anything that I write into the p5 web editor with a slash slash immediately that line becomes what's known as a comment so let's like like what if I were to write something okay so this is the green rectangle in the center so the idea of a code comment and you can see that it is highlighted it is gray it does not have the syntax highlighting of the executed this means that when the computer is executing the instructions and I never explicitly said this but it's important line by line one after another it ignores this that is just there for me the human being to read so this can be useful if you were doing a self-portrait you might like this is where I'm worked on my nose and this is where this is the code for drawing my chin and this is the code for drawing my ears you don't even have to do it as a sentence oh I could just say like you know red red circle you might also write a note to yourself like later I want to make this circle animate and actually a convention of science right to do I mean that but you know that doesn't mean anything but so there's all sorts of things you could write in the code comments so I encourage you easier said than done and I don't necessarily follow my own advice but I encourage you to get in the habit of writing code comments your future self will thank you it's certainly something that as a teacher I try to do as much as possible because I want to explain the code in line so people can looking at it can follow what certain pieces are doing and typically I put the comment that's describing what's happening after it okay so that's how code comments work but there's another sort of neat trick to code comments that I'm not mentioning which is that if a code if a comment is the thing that's ignored why not use slash slash in front of something like a function call so I could for example do slash slash and suddenly the line of code with the rectangle function is grayed out and the rectangle is no longer in my canvas so this is a thing that I can do because before do you notice how when I wanted to demonstrate stroke wait so I have to pause for a second because I getting getting notifications on my watch that's really distracting me I'm gonna take it off I will look at these I think it's an important message but it's it's way too distracting my watch is buzzing me okay sorry about that this is gonna be awkward edit but I'm gonna coming I'm gonna sort of repeat what I was saying and it'll hopefully get spliced together in a way that makes sense before when I was showing you what if I wanted to use no stroke instead of stroke what I actually did was I deleted stroke and then wrote no stroke in there and I was able to sort of like undo my way back but often what I want to do and I'm gonna do that right now often what I want to do is say like I let me quickly disable the stroke and then show you no stroke so here I'm kind of saving what I had before because I may want to we enable it and then and adding in something new and then now if I want to put the stroke back I can delete that and I can delete the slash slash and now the stroke is back so and I can even do things like I can like highlight this whole section and I can say command slash and the whole thing is like commented out I can say command slash again and the whole thing comes back so this is a really just useful technique while you're working to kind of speed up your workflow you can kind of leave some stuff in your code that you don't want to see but you might want to pull back come back later and you'll sort of figure out how to manage this best but the primary reason for comments is to add things in your code about what you're doing and this could be for teaching or it can be notes to your future self and I might say that things that you might want to consider doing is you know code example by you know you know Daniel Shipman you can do things like this the coding train maybe you put like a URL in here like this is the kind of thing maybe you have some information like and it's what your license is like please share and use you know there's technically you can add a software license that's part of the comments and I don't want to get too far down that oh let just explain to people what they can use it for but this is the kind of thing that you can also use code comics for to put something at the top that's kind of announcing what it is credits and usually I would do things like this code is based on everything you know I learned from you know Lauren McCarthy and Cassie Tara Cajun creator of the editor you know I would really often like I'm always crediting where I got my name because so much about coding is finding examples and changing something in the example learning to code is doing that and so I always like to try to give credit you know sometimes a legal requiring because I give credit with p5 everything is open-source and you and licensed in such a way to all the examples that you do are not required under any legal anything to give credit but it's nice to give credit when you can I always try to and if I forget - if you see something I made I forgot to give credit please let me know so I can have it okay okay there's some more stuff there's other fancier ways you can add comments but I'm gonna I'm not going to go into that right now I'm just noticing in the chat so well you know all in good time I can't get to everything in every video so that's code comments you are ready if you were if you were taking this somehow as a course this would kind of be the end of the first module you've learned about a little bit about what p5 is what JavaScript is how to sign up for an editor account how to draw shapes how to set colors and how to read error messages and add comments so make a sketch save it share it share it with me in the comments share it on Twitter let's talk about bet ways that we can share these things with each other and I look forward to seeing what you make and if you continue watching this series the next stuff that is to come is going to show you about how to animate the stuff and interact with it with the mouse okay I will see you soon and hope you enjoyed these videos everyone's doing they have to do the star slash slash star do I really have to it seems like a whole can of worms to open Oh been dug this how do we share in the comments we can't put in a link so you can put in a link if you put in a link it'll stop the youtube comment system will often flag it and it'll show up when I look at the channel moderation as like a possible spam comment I I will approve them if they're a link to the web editor so it just won't show up immediately I have to look at my messages now because it looked like there was something important so apologies oh okay sorry I just I'm a little bit later getting home and I thought coding train is brought to you by a very kind family who doesn't mind when I keep being later than I say that's what all that buzzing was so I think I've got to start wrapping up but but but I am going to I'm gonna do that snake game coding challenge alright oh I didn't duplicate this but that's fine I will work that out hold on I'm gonna do something a little bit weird here I mean I'm not too worried about keeping track of this code actually you know what I don't think I'll clean this stuff up later I'm not too worried about the alright hold on no no no let me let me let me do what I meant to do so I'm gonna back I don't know how long the undo is but I'm gonna back up to the end of the color video which i think is about this so that's coding train color then I'm gonna do file duplicate I don't think I need this but coding train comments console and I'm gonna say print hello here and I'm gonna hit save and hopefully that oh oh and then I'm gonna get this oh whoops let me get this just gonna have to finish this up and I'm gonna say print hello hope so this should be fine so later when I'm putting links into the video description I'm going to say file open yeah so I have coding train drawing coding train color oscillation demo encoding trade comments console so these will be the things that I'll link in the video description yes thank you Kelly I should do that now I can't do that though live broadcasting all right I'm gonna do my best now why that closed everything alright I'm a little bit concerned but let's so I am going to I I think for this coding challenge I am NOT going to flip the editor because I'm going to need to use this over here and so I'm just gonna try to see how it works like this and that's plenty of space for me so let's try this so I'm gonna say snake coding challenge so I'm gonna try to make the snake game again today is the day today is the day of just redoing everything I've done before so unfortunately I don't have time to do a video about using Google classroom and the p5.js web editor I've got to add that to my list and hopefully I can be done with this coding challenge in 20 minutes Oh Austin says fix the sidebar in my new bookmarklet I'm a little concerned I'm just gonna try it like this is I'm a little bit concerned about people like seeing it all different but and also I just I'm pressed for time so thank you for that I'm gonna play around with that flippin thing in the future future video okay you know I actually don't have to do the thing I could do that other thing I need to do this weekend I could do it not in this studio so so let's see okay I am so not prepared for this and I'm totally exhausted I'm gonna be over here drinking my non branded water product we need to erase the whiteboard so you might need to use it okay here we go here's my attempt to make another video with a million views most of my videos look like five to ten thousand views that snake there you go look it up that snake game video it's always at the top of my analytics and just forever it don't know why but okay all right let me cycle the cameras hungry I haven't had dinner this is uh this is a recipe for disaster but I'm doing it anyway happy back-to-school in his August 31st school for me starts next week on the Kodi train I'm going to do have to do it classic again I'm going to attempt to do a coding challenge can pick the snake game and yes I have done this before but I'm I'm going to do this in order to celebrate something that was announced today the p5.js web editor so the p5 web Jazz official web editor is out and I'm gonna try to go nice thing about this is when I code this at the end of it stop the sound effects at the end of this you'll be able to just go directly to this URL which I'll include in the video description and hit duplicate you have to make an account for the web editor hit duplicate and and then make your own version of it from my code and sure that would be so I will include all about how to do that in the video description and I'm gonna give myself about Oh watch isn't on there's no timer but I actually have to go home very soon so I'm about 20 minutes which of course is gonna take longer than that but let's see how it goes alright so however long this video is is however long it takes hopefully there'll be no edits every once a while like you know it just has to be an edit cuz the whole system crashes I better get coding snake game have you ever played the snake game the idea of the snake game is there is a canvas you are a dot or like a little square on that canvas another doctor or another little square appears which is a piece of food you want to move you can only move to the right up or down along grab that piece of food once you grab that piece of food a new piece of food appears somewhere else and you get a little more on your tail you get another piece of your body and you get the next piece of food it gets longer it gets longer and anytime you hit the edge if you run into one of the edges you die the game's over or if you hit another part of your body and be honest about tartar as your body gets longer and longer that's the snake game that's what I'm gonna code so in order to do this I'm gonna use object oriented programming in my previous version of this coding challenge I used Lexus constructor function thing and now we have es6 classes I want like a happy sound so one thing I'm gonna do is I'm gonna show you by the way if you want to know all about the p5.js web editor check a link to a medium article that is in the video's description and a whole bunch of videos from the processing foundation there's a nice video with caste ter occasion created the editor describing all of its features but one feature is that I can go over here and find this little thing this little tick less than greater than two times whatever it is and I could say add file and I'm gonna add a file I'm gonna call it snake jf and now I have a file called snake doc is where I can create a snake class now if you've never done object-oriented programming before the idea is that this is a template for this snake object I'm gonna make in my code and has a constructor function I will refer you to my tutorials about program objects wearing with es6 classes now but in order for I need to actually go into index dot HTML so that the page when I run the code is actually using both sketch dot Jas and snake touch yes so that's there so now I have sketched a s which is just a oh and I need to see this a 400 by 400 canvas and a snake Jas which has nothing in it but what I'm gonna do is I'm gonna say let snake and in setup setup being where the code starts in a p5.js sketch snake equals new snake so I've made a new snake and what do I want to do I want to update the snakes location every frame and I want to display it so the idea here is I want to say snake dot update and I want to say snake show I'll use show as a meaning show yourself display what is this snake dot update is not a function oh come on I have to write the code for it yes I have to write the code for it so if I'm going to write a function called update that means I have to put a function in the snake class called update and then I have to put a function called show no I'm done coding challenge complete snake game not also this is like the skeleton of the code but I actually need to put stuff in here and I'm gonna hit shift tab to tidy up the indentation okay hmm what do I need so I'm gonna do something a little weird I know that what I need is an array because even though the snakes position you could think of as like a single X Y location I boxed this the last time I did this really what I want is an array because I want to keep track of a list of all of its locations and maybe the first element and probably more easily the last element of the array when there's only one thing is it's the sort of head of the snake the front part of the snake so I'm gonna do that I'm gonna say this time to call it a body is an array and then I'm gonna say this dot body index zero but one thing is is create vector now create vector is a function in p5 that creates a vector object and that vector object has an x and a y so I'm going to create it at 0 0 and then in update I'm going to say this dot body index 0 dot X plus equal this dot X speed I'll call it X speed or X direction or something and this dot body dot wha is using that zero dot y equals this dot Y direction oh this is so ugly but it's the way I'm doing it right instead of having a this is a little weird like really if it's just like one thing that's moving around I just have an x and a y instead I have a body index 0 X and a body index 0 Y because later I'm gonna get to add more pieces to the body so if I run this what's this dot X direction style y direction it doesn't even exist so those are going to be variables that tell me is the snake moving to the right or left is the snake moving up and down so those values this dot X dir is I'll start them at zero so there's zero and so and then show I'm going to do something I'm going to say what do I want to do showing the snake is drawing a rectangle I'll do something a little bit weird so I'm gonna draw again eventually it's gonna become a loop because I'm gonna be drawing all the pieces of it but let's just start with putting in the x and a y and I'm just going to say I'm gonna make it ten this is gonna be a little weird actually ten by ten the rectangle and I'm sorry that you can't see all the code let me I'm not I'm not used to doing challenges with the web editor so let's see if I can make this a little bit wider there we go so okay rectangle and then I'm gonna say fill 0 just to make it black and look at that already I see there I better save this oh saved a minute ago it's auto-saving that's wonderful there it is right there let me make x-direction one uh whoops two equals by accident look it's moving now right because the idea update the bodies heads Y X location is increasing right if I made this 100 it's moving really really fast 10 it's moving pretty fast if I change this back to zero it make this one is moving down I could do all sorts of weird things make that five but that's now no longer in the snake game the snake game by definition I can only move horizontally or vertically so I'm going to start these at zero and then I'm also just right now I'm going to change this to one good I'm gonna explain me to do this in a funny way that I think might work well it's a tiny little dot a 1 pixel dot that rectangle I am going to now in sketch I'm going to have the keyboard be the controls so I'm gonna say key pressed oh I forgot how to do this already so like if key equals up what is it in p5 basically keep rest is an event that whenever I press a key this function happens that I can check what she did I press but I totally can never remember how to write this function so let's try to look at the p5 reference somebody maybe in the chat will tell me let's look at key pressed if value equals zero know if key code equals left arrow this is good this is what I want it's a key code so key is for like the which character I press but if I'm using the arrows I need to use left arrow right so let me actually just grab this I'm gonna say if key code and I know I could use a switch statement I'm just not going to right now okay please don't don't at me that's what I'm supposed to say somebody taught me that who's younger than me cue code equals left arrow key code equals right arrow doing a terrible job of paste paste down arrow up arrow no no Auto format there we go okay so now what I want to do is if it's the less left arrow then snake dot set Direction this is the way I did it before I remember left is negative one to the rule negative one along the X and zero along the Y so I'm going to write a function that's like saying set the direction so this is for left this is for right this is for down this is for up negative one okay tidy code so I think this is the right idea depending on which key I press move the snake in that direction so now I can say I can write this function set direction and I'm getting an X and a Y and I'm just saying this dot X Direction equals x and this dot Y Direction equals y so whatever comes in the function sets those things people I can see the chat over there please do a switch David no duplicate my code and change it and make us would make it better use the switch statement okay so now I'm gonna do this let's zoom in here let's see if this works oh come on no I have to click over yes down look at this so now it's working right so I'm pressing all the keys and I'm moving it around perfect now I need to deal with something I don't want to have to like zoom him it's like so tiny so ultimately there's an issue here like I want to think about the snake in units of one here's my snake it moves one pixel over it moves one pixel over it moves one pixel over but I have a canvas that's 400 by 400 and I probably want to draw it as like a 10 by 10 thing so I want to have a variable I'm gonna have a variable I'm gonna call it our easy short for like resolution can you see that and I'm just to make that 10 so that variable and actually to be honest I could just use you know what I could do I could just use the scale function I'm just gonna use the skill so I was gonna use math and I was gonna always multiply its X location by that resolution and multiply it and use the resolution for the width but the truth of the matter is p5 has a scale function so I'm gonna say let resolution equal 10 and then in the draw function I could just say scale by resolution and what that's going to do and notice like see look look at that I can change this to 50 I can make this 10 I can make this 100 it's just scaling it up and if I move this to there and so now if I make this 10 and I move to the right it's actually moving every 10 pixels also because when it changes by one it moves 10 and I could what I might want to do is you know you or might want the animation to go really fast but I'm gonna change the frame rate to 5 just to slow it down so we can see what's what's it's a little tricky here when using the p5 web editor is I need to click over here to give this preview pane focus so that it gets the key commands so now you can see it moving over and this you know this can the frame rate typically I don't want to like slow the frame rate nation down but this is a way I can control the speed of the sketch so this is what I'm gonna do okay so now I need okay so I need to have a food a piece of food so I'm gonna make the piece of food a just a vector that's some R and I could make a food class but I think that's overkill I'm gonna make it okay so here's now a tricky thing I want the food okay let's say my by sketch is 400 by 400 and really so really my world is 40 by 40 but I scaled it up by 10 so I need a variable to keep track of the actual dimensions of the world so I'm gonna say I'm gonna use W now I don't know I'm starting at Pala columns or I'm gonna say W equal I'm gonna actually just put let W and let H here so I'm gonna say W equals floor with divided by resolution what is this width divided by resolution is 400 divided by 10 which is 40 and the reason I'm using floor there's just gets my math is off I want W to be an integer a whole number that will take off the decimal place H equals floor height and of course it's a square so I don't really need to have two separate values but your window might not be a square there okay so so now that I have that why was I doing this again oh the food because now I want to get an exposition and guess what I run before I'm gonna write a function food location food location and what happens in this function is I pick an X which is floor random W and a Y floor so I need a spot random H right I need to find a random spot for the food and set that there and then in draw I'm gonna make the food a red I'm standing a little bit in front of code but hopefully this is okay and I'm gonna say rectangle food X food y1 1 so you know I guess I could make it a point or something with this it's just everything is a view of unit 1 scaled up okay can i oh and I need to actually call at the beginning food location and why is it oh it's not RIT so you know what I need to do here is I need to say no stroke that stroke is getting scales in a strange way so this is actually 10 by 10 pixels it was much bigger because with a stroke there that's getting scaled as well so now we can see let's if I click over here we can see and eventually come on get that piece of food ok so now but so this is working they gave us working this is good this is much better than I did before hopes to do this a second time even though that was like a couple years ago let's make this 20 just because I want to be able to see it better ok so that's good and we just make sure things are lining up excellent so now I need a test I'm gonna say snake dot eat food so that means I need a function and let's put that though I don't know the order matter so much I'm gonna put this here and I'm gonna say eat food I'm just gonna make an argument called position so basically the food is getting passed in here and I'm eating the food if now this is really probably a bad idea because you never know in JavaScript if you've really got the number like 3 or if by accident you have the number three point zero zero zero zero zero zero one but I'm going to test in theory if the XY of the head of the snake is the same as the XY of the piece of food if they're equal I should be eating the food so let's let's just see if that works so I'm gonna say if so first let X equal let's just put this in a separate variable let y equal this stuff going to get that head of a snake location if x equals positive I then return true and also say console console I or say for it because I console a lot of print food eaten okay so let's see if this works it's a little bit dangerous a little bit treacherous and I'm gonna say return false otherwise and then in the sketch I'm gonna say if if I'm gonna have this return something if you eat the food then you just need a new food location right so immediately we should pick a new random location all right let's try this I missed it I can't get it oh so that's working all right so I think all my flooring of the numbers you know maybe I need to have some better if this this seems to be fine so I'm gonna live with that I'm happy with it okay so now we are so close what do I need to do this is going very remarkably well that's a sure sign for something to go wrong I'm gonna say this dot grow if I eat the food I want the snake to grow if I'm calling a function that I intend to be part of the snake object within the snake class I need to reference it by saying this grow and so that means I need to write another function grow and what that means is I want to expand the array okay okay well this is the tricky part this is where everything went wrong before I'm not even looking at the chat there's a chat going on I'm sure I would screaming at me I'm gonna add another variable this dot le n for length length of the snake and it starts as one so is that a minimum I know when I want to grow I want length to go up by one so I want the length to increase and they need to add something onto the array add something to the end add something to the beginning this is unclear to me so first of all let's try so so let's just try saying this dot body dot okay so first let me get the last I'm thinking about this you know what I think this is gonna be I think actually this is simpler than I think let's just try saying this dot body dot push create vector so I'm just gonna push a blank vector into it like I know I need something else in the array so let me just and push you something to add to the end of the array maybe I want to put it at the beginning I'll figure that out in a second but I'm just gonna push to the end of the array and actually I'm not realizing the flaw in that but that's okay yeah so actually so pushing I could put it in the beginning and that would actually work I think but okay I think we're gonna figure this that I'm like trying to think it through so that's easier than thinking through just coded so what I want to do now this whole thing so first of all shut what this means is anytime I want to draw the snake I don't actually want to draw I don't want to draw just a single rectangle I want to draw all the rectangles so I'm gonna say and I could use like a for of loop or something but I'm just gonna say I'm just gonna use a regular old fashioned this dot for loop this dot body dot length I plus plus and then this loop will go around here oh oh no oh no oh no I've killed the editor I've killed the editor let's pray autosave works by the way the editor has infinite loop protection in it so I was like not ring about making this happen but I have now called infinite loop and I've totally frozen the page I'm not sure why I didn't get the infinite loop protection but what I'm gonna have to do and we're gonna pray let's see let's let's just pray I'm gonna get this I'm gonna close the window you won't let me close and I'm gonna just go back to it let's see when it lasts Otto so I'm gonna quickly quick off this Auto refresh and where did I last leave off ah that's not so bad so the last time it auto saved was here and I'm going to I'm going to retype my loop more carefully without having auto refresh on but I is less than this body dot length I have to move this now back all the way over here I plus plus and I'm going to auto format that and I'm going to say this dot body dot I this so now I'm drawing every element in there okay like so now I'm gonna hit save project is saved so I have that oh I lost what I wrote and grow live and learn to move this over here alright because I had this open that's why so this actually comes back here what time is it 7:45 okay we're good we're good we're good I got stuff I got stuff so grow what did I do in that I said this dot body dot push create vector and I said this dot length I don't know if I need this length variable to be honest because by definition the length of the array is the length variable it was so sad and then did I add that it and then I added that too let's see I lost some code you're not working you're not really coding if you don't lose some code every once awhile to an infinite loop okay so here we're good now this is what's gonna happen here is really weird but I'm gonna get the food oops I missed the food so interestingly why am I not seeing I would imagine that I would see another so one thing I would guess that I'm gonna see another appendage but it would just be at 0-0 put oh look at me look at this push create vector and create vector at zero zero let me just do that so that if we rip so what we're gonna see here is this there we go so that second part of the snake is there but it's up there so what I need to do now is when I'm updating the snakes location this is I'm gonna comment this out for a second the first thing that I want to do and there's shift okay there's an array function called shift I forgot what I last time I did this I didn't use that I just manually moved all the spots in the array let's look at array JavaScript shift I don't actually know what this function does but everyone was telling me I should do it shift one two no look at that that's so perfect so this is what I want I want to shift all the elements down one and I guess I'm losing one so let me just see about let me see if I understand this so just in the console and we practice this let array equal five six nine 105 so that's what's in the array and if I say array shift whoops no that's what it returns did it shift it but it shifted oh so it's just giving me the thing that it got rid of and then it's making it one less so this is perfect because it's exactly what I need oh I love it so actually all I need to do every time an update is say this dot body dot shift and then that's moving everything over and then the last spot so one thing I need to do is let me save where it currently is so let me pop it does pop pop doesn't remove it from the array right so if I say array dot pop that gave me the element five but the array still oh no that got rid of it how do I get something off the end without removing it so unshipped adds from the beginning that's interesting how do I get the last element without removing it yeah that's what I'm this is what I'm planning to do grow yeah so update is shift and then I want to want to get well I'm just gonna do it the manual way this dot I'm just going to say let head equal this dot body dot and this dot body dot length minus one that's the last element dot copy so this is me taking the last element and making a copy of it and then what I want to do is say head X plus equal this X Direction head dot y plus equal this dot Y direction and then I just want to put that back on so I want to like save where it was and then move that and then the body is all there yes so I'm being told this is actually how to do it so that's the last element copying it let's so I just want to see something here for a second let's see if this works so why do I need something else let me just see what I've got here so one thing that I want to do what's wrong here this dot body index this 10 dot cannot read property copy of undefined so do I not have oh because I'm doing it after shift and if I'm shifting something with zero yeah if I'm shifting signature so shift has to happen after right cuz if it only has one thing in it I shift it it's gone okay so this is working now I look at that so this worked and it made it longer but because I it created it back at the start so I need to keep that location when I grow it so the same thing I need to do here in grow what I want to do is not add what I want to do is do this exact same thing and then push right I want to take the last one and add it to the end so I need to just duplicate where it was before to the end I think this should do the trick yep is it am I like going one step behind by accident I'm not sure well that's pretty good you know why the food oh oh you know what it's not to getting it until I get to the back why because eat is always checking this one I need to check the last element same thing this is very awkward the way I'm doing it and I'm sure somebody will make their own version that's less awkward but I need to check the location of the head against the food here we go let's try this one more time snake game go there we go and up yeah this is better okay great this is working alright now guess what one more thing I need to know when to restart the game when do I die so I'm going to do I'm gonna do a function called like check you know check for death or like end game and what I need to do is I need to check if the head intersects with any of the other positions so the head as we know is well it's this this is a little bit weird what I'm doing that's the last spot and now I can say for let I equals 0 I is less than this stop body dot length minus 1 I don't want to check the head against itself I plus plus I'm gonna say let part equal this body index I and then I'm gonna say if we care we went off for the purpose of dough editing we can we if part index if part x equals x and part dot part dot y equals y then return true the game is over or if X is greater than what was it W minus 1 right it's gone off the screen or X is less than 0 or Y is greater than H minus 1 or Y is less than 0 then also return true I should probably check that first because if you're off the edge I don't need to check I don't need to check any of the body parts oh but I need to first get the x and y values so I'm doing something a little weird where sometimes I'm using like the vector and then I'm saying paused at X and positives I'm pulling out the X&Y from the vector and then at the end I'm going to say return false so let's see if now I can get endgame to work so in here I'm gonna say also now at the end if snake dot endgame I'm just gonna say print print end game and I'm gonna say background to 5500 and no loop so I'm just gonna completely shut down the p5 sketch if the game ends so this is not just thing what you want to do first interaction design but I'm just testing the feature so the first thing I might do is just try to go off the edge so I'm gonna go off the bottom yeah okay so that works so going off the edge at least the bottom like I should probably test the other edges whoa what just happened there and I took my Auto refresh off I'm gonna put that on so if I go off the top ooh that didn't work I probably had a mistake somewhere in there yeah oh why this should be Y OOP that was a mistake ok so yeah all right hopefully that fixed that I'm gonna and now what I need to do so one thing I need to do just to be able to test better is I'm gonna add something I'm gonna add the mousepressed function and I'm gonna say this snake dot grow so anytime I clicked in the house I'm gonna grow the snake so I could do it so test this feature oh whoops shoot oh and you know what I should set the snake in the middle so the snakes location should probably be initially the W divided by 2 and H divided by 2 and I've got to keep everything in integer so I've got to put floor in here just in case all right so now let me well why did that oh because when I grow the head becomes the same location as the other part of the body and then I check to see if the game is over but shouldn't it fix it with oh but if it's not moving so I got to move it first I mean this should be ok no oh because if I click to get focus oh this is so set this is like a silly debugging thing so I'm what I'm gonna do is I'm gonna have it grow with the spacebar not mousepressed else if key equals space I'm just trying to do this to debug it and so I can do whatever I want now click over here and I move it so I'm gonna make it longer so now let's see if it dies yep okay great so I think I finished this game really what I want to do is come up with an end screen or restart the game or have some sort of score let's see before I go how long I can play it before I die hey oh let me just show you something if I go I'm gonna hit save if I go under this is a feature of the web better if I go file share I'm gonna go here and I'm gonna grab this full screen URL I'm gonna grab it I'm gonna open a new tab and now it's just the game I'm going to make it bigger for fun times I'm gonna click in here and ready I'm going to play the game goodbye make your own version look for the link sign up for a p5 web better account hit duplicate make your own version share it in the comments there will be a coding training comm page which you can also share it this is much too easy I'm gonna be here forever I'm gonna look at that well this is working I made the game I can go home now let's just see how long this goes for okay I die I don't know why I died I thought I hit backwards so a good thing I hit backwards the game is over thank you thank you so that might be a bug that I want to fix so that actually be hit best but I guess you should lose the game if you hit backwards I don't know you know you can make the design more interesting you can do all sorts of things you can now make your own version of the snake game in p5 in the web editor instantly share it thank you to the prospect foundation casting Taric Asia and all the people who made contributions the p5 web editor and all people have worked on p5.js over the years I'm so excited to be able to make tutorials and coding challenges with this I will still use my other workflow and I will use processing but I hope you enjoyed this video and I'll see you next time on the coding training all right all right so let me if anybody wants to get this right now this is it Thank You CJ for the claps so I have to go I'm gonna just quickly send a text message oh sorry this is like did you believe you're watching a live stream and I'm like a texting my family to work out child care arrangements I get oh my wife is going to some concert tonight I can actually so hold on almost done [Music] I really shut off the stream before I do this okay sorry I sent the important messages but each should be after update still yeah I probably made some mistakes whoa what happened here what did I do oh because I made it bigger there let's look for mistakes Oh bug dot snake dot each should be after okay so um thank you everybody who has been supporting this channel I'm excited that I'm doc next time will be next Friday most likely I will probably be continuing more beginner stuff but I have a lot of other things to get to so things that are coming this fall are tutorials on word Tyvek Oh actually next Friday I have some surprise tutorials that I'm making that have to do with machine learning and training a model those actually won't happen during a live stream for some technical reasons but you look for those on the channel they will come out so I might be recording some of those on Friday but and they'll be out you know be out by Monday but not on a live stream but I will still do hopefully a live stream on Friday with some other stuff in it so I think yeah people are asking the chat when what I don't have a sense of what my schedule is going to be but I do not teach any of my classes on Fridays so that's typically the best day for me to do a live stream and I will try to alternate some in the morning and some in the this sort of afternoon early evening time depending on as I know that like it just sort of helps different people different time zones be able to watch the videos okay so thanks everybody yes oh I definitely want to do a video about having an AI beat the snake game yes 40 Tetris is never gonna happen but thank you for the suggestion me I am Samia alright so thank you everybody you'll notice that if you join to be a member the coding training you get access to new emojis I send you some stickers stay tuned for new t-shirts with new designs this is a new logo the designer is Jason headland Jason hey Glen calm this is still kind of somewhat of a working draft and I will see if I can answer one or two questions still how many people are watching by the way right now I mean what I'm gonna do I'm in just in case things crash I'm gonna hit stop recording there's now the whole livestream has been recorded to disc coding training piece to repeat processing p5 there's actually another secret sticker on the bottom someone's asking Wow Oh guess what three blue one brown which is a channel on the YouTube which has wonderful content is going to release a video about quaternions very soon and I do solemnly affirm with the very sacred train whistle that I will do a video on quaternions at some point based on whatever three blue and brown does and when I say at some point I mean sometime in the next 25 years but hopefully sometime this year who created p5 p5 is created by the original theatre p5 is Lauren McCarthy the project itself is a has been built by a large collaboration of many people the p5 community and go the p5 website and the p5 github to see who all those people are and the processing foundation raises money to help maintain the p5 library you only get the so I have patreon this is a very confusing thing and maybe someday I'll have a better system I have both patreon and YouTube it's for memberships YouTube memberships you get the emojis and the icon and stickers you can also get the stickers with patreon members and an invitation to slack channel so youtube's membership is the equivalent of five dollar-a-month patreon but if you do the five dollar-a-month patreon you don't get the YouTube stuff the only reason you might want to do patreon is if you prefer the platform and if you want to do one of the higher level pledges where I'll mail you some books and stuff like that but just be aware that those higher level pledges it takes me quite a while to get this stuff to you you should get it within a year that's that's sort of what I'm promising but as I do a mailing every few months this live stream has been up for at least three hours and yeah so once again I just want to say that this live stream is dedicated to the memory of coding train contributor enthusiast Madden I'm very sad about hearing about the news of Americans death this week and but I wanted to mention that again at the end because his contributions and his spirit really meant a lot to me in the channel in the community and I talked a bit more about Maron and showed the website at the beginning of the livestream so when this gets archived you can go back and see that and I'll put links to information about Meriden and his web site in the image chat okay alka says I can't wait for the 50th anniversary coding train up sewed with the introduction of quadrillions thank you everyone I have not had dinner I clearly need to have dinner and I'm going to hit stop streaming I'm gonna go and thank you everyone for your support I'm checking my notifications on Twitter and let's look at my mentions on Twitter I got to find my is dashboard okay so my dashboard says two hours 56 minutes and 30 seconds so almost three hours and here's the chat I'm gonna just type in the chat goodbye all see you next week bye and good night by the way this is the computer that has the broken a key this is the old coding train computer this is the new coding train computer see you next week okay and I am now going to click this button that says stop streaming and when I click that I awkwardly just disappear goodbye

Channel: The Coding Train

Views: 44,720

Keywords: javascript, learning, tutorial, processing, Processing (Programming Language), creative coding, JavaScript (Programming Language), HTML (Programming Language), Intro, Lesson, Lessons, p5js, daniel shiffman, p5 js, p5.js tutorial, coding, programming, programming beginners tutorial, programming beginners guide, tips for programming beginners, coding for beginners, p5 editor, p5js web editor, p5js editor, snake game, snake game coding

Id: wTDDsOZwdQY

Length: 209min 34sec (12574 seconds)

Published: Fri Sep 07 2018