Functions and more Canvas - JavaScript Programming Basics p.2

Key Takeaways

what's going on everybody yeah came back welcome to part 2 of the JavaScript basics tutorials in this part 2 we're gonna continue working with the canvas just really quickly just show some of the other things that we can do and then we're gonna get into functions so let's go ahead an get started so let's say we wanted to continue just drawing this you know line so where we left off we have this lovely piece of Contemporary Art and if we wanted to we could just continue drawing lines so for example I'm just gonna copy these two lines we don't need to move two because that's all we did like we did that to like move without actually drawing but if we actually want to draw we just line two and then stroke so let's say we did I don't know 70 and 55 here if we rerun that you'll see okay now we've got this you know angle added but but what we're really interested in is these blobs like I would really want to know how do I draw like a blob and what's a blob is a circle so so how do I draw a circle to the to the canvas well there's a method that is arc so in this case we would contact context arc and then the way that you look at this or think about this is arc in theory if you did a full arc it would be a full circle so what would the center of this if there if you did draw a full circle what would the center be so in this case we'll say a hundred a hundred now with art you don't have to draw a circle so arc is here for any time you want a curved line right you you might want to continue the curve all the way to make a circle but you also just might want a curved line so that's what arc kind of solves all those things and one one fell swoop so you would say what's the size over sorry what's the location like the XY 100 100 and then the next thing that we would pass here is what's the size and then you've got the starting angle in the ending angle so we're gonna say zero and then you would say basically you're going to think of this in terms of pies so one times a math dot pie is going to be half of a circle so let me just add a context dodge stroke and let's go ahead and run that and you'll see here so we drew two now we didn't draw it like this doesn't go to one hundred one hundred it's a bit beyond that but the center of this circle which would be like right there that would be one hundred one hundred so if we want to draw a full circle now math dot pi we could say two times math dot pi and we will run that and now we have this full circle okay pretty cool so now what I want to do is basically all we actually want is to have a circle for now so I'm going to delete everything up to begin path we're going to begin path we're on an arc the center is here cool and then we stroke so it's kind of like you know this would be your line - and then stroke so and then we don't need a move - in this case so okay so let's test that really quickly yes so now that's a pretty boring blob we would probably want to fill it so you can probably I think you can get away with this afterwards too you could do a context fill after the stroke or before the stroke I'm pretty sure yeah the other thing that we can do is let me just test this make sure yeah the other thing that we can do is change the actual color with context fill styles so we can say context fill style and in this case we'll go with a beautiful green so now we get our green circle now what if what if we wanted to have multiple blobs like this how would we actually do that and the way that we would wind up doing that you know you might think well I'll just haha I'll just copy and paste I'm an expert computer person and you you could do that but you probably don't want to do that right like we definitely just copy and paste but that's we use functions or at least things like functions so like we used Verret we can use variables to get rid of copying and pasting to some extent mostly variables is there so like if you needed to change a value as you write you would just change it in one location or you can use variables if you want the program to like change your value based on some conditions with functions it's it is for one it's just gonna clean up clutter and stuff like that it's also going to make it easier on the programmer because imagine if you wanted to like change these lines like like suddenly you just let's just imagine you wanted to do something different with how you get a blob to the screen or what you're gonna do with that blob or whatever now you've got to come through to change every single one of these it's a pain in the butt and so anyway we definitely want to use functions or something like functions he will talk about classes in a little bit not in this video so the way that we're gonna do that is to with a function we'll just come here and let's just call this function we're gonna call it blob and then you have your parameters and then the function itself now what does a blob take well a blob is gonna take you know court like it basically it's this stuff right here we don't need to talk about the starting in the ending angle here because we're going to we're always going to use the same values here it's always going to make a full circle so we really just want the X the Y size in the color so that's exactly what I'm gonna write here XY size color then what we want to do is take this code here and I'm just gonna cut it paste it then I'm gonna highlight here and I am going to I was gonna try to have that there we go hit tab and tab it over so now that we've done that the next thing is we need to fix these variables in here so like right now that's just hard coded and this is part of what we wanted to fix so we're actually just gonna pass X Y sighs and then in here we're gonna just put color so now you've got this blob function and now we actually want the blob function to run so the way that we could do that is just literally call blob now sometimes you might write a function that has no parameters right so it looks like this and it does something besides what we were just done here so maybe these values are filled in right and one of the common mistakes I see from new programmers and myself included I've made this mistake was you call blob but you forget the parentheses or worse in your actual you know definitions of things you add parentheses which makes it run so here this is just a pointer to the blob function here this is running the blob function okay so let me add those bars back hopefully I could there we go nice so now we want to actually run the blob function so we are just going to pass in let's do 25 100 size will be 20 and color wool made green so first let's just test to make sure that works sure enough and now what I want to do is close the towns if you use my editor it would all be in the same tab okay so this is that few more 75 and we'll go with a 50 and then we'll put I can't I'm not gonna make 5 of them but we can do at least a few so we'll do 25 and then 100 and then this will be red and then this one's blue and awesome we were on it cool so that's that's functions that's why we're doing it just as a note don't forget to begin path if we don't begin path like what if I took this and just put it right out here let me just run that real quick so you notice how it looks pretty funky what's going on there well begin path also takes note of where not only where the stroke is happening but for fill so the last thing is gonna be filled here but every step of the way so let me just show one more thing where I close out this tutorial so I don't think we've talked about comments so if we want to get rid of something or we want to make a note to ourself like you know makes a green blob we use comments and the way you make a single-line comment is with two forward slashes and then the way you would make a multi-line comment is with a slash and then an asterisk and then multiple lines and I guess I should make multiple lines and there's an asterisk in a slash and then I'll close it off now comments aren't read by like JavaScript or rendered by the browser or anything they're there for either your notes or so someone else reading your code gets a better understanding of like what is happening in your code and then so basically pretty much those two things either just a note to yourself later like I want to add this or work on this next or or you're telling yourself how a function works or you know anything so anyways but you can also use it for debugging purposes like so in this case I just wanted to show that the fill will now be you know all read basically everywhere because of what we've done cool so yeah so the reason why I wanted to show that is just just as a reminder or not even really a reminder I haven't really totally made it absolutely clear I guess I did say begin pad starts and restarts but keep that in mind it's not just for a stroke it's for a fill it's for everything going on so you definitely want to make sure you re beginpath for every single blob or thing that you draw to the canvas okay well I think that we've made some really good progress here we've got multiple blobs on the screen the next thing we would want to start doing is moving some blobs right we want to get these blobs animated and moving around and stuff and bring them to life so in the coming videos that's exactly what we're going to be working on is how do we get these to actually move around and all that if you've got questions comments concerns whatever feel free to leave them below and a quick shout out to some of my channel mem Henry assumed our Rajneesh cheeky buns 13 and frank lloyd welcome back all of you guys for your third months you guys are amazing and that's it guys I will see you guys in another video