1.3: Shapes & Drawing - p5.js Tutorial

1.3: Shapes & Drawing – p5.js Tutorial



In this video, I start writing code and cover the basics of coordinates systems, shapes, and drawing in p5.js.

πŸŽ₯ Next video:
πŸŽ₯ All videos:

πŸ’» Code:

πŸ”—
πŸ”— p5.js Web Editor:

πŸš‚ Website:
πŸ’– Patreon:
πŸ›’ Store:
πŸ“š Books:

πŸŽ₯ Coding Challenges:

πŸ“„ Code of Conduct:

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 parentheses some number comma some other number no no 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 is it important what is it doing ok 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 already I have to tell it to rerun the program who 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 changed 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 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 for 1 or 400 it's interestingly what happens if I delete this well so p5 by the way will 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 picked some arbitrary size probably 100 by 100 but let's put that back there's 400 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 instruction is 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 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 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 you were 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's 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 cuz 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 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 crea 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 say 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 then 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 any 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 are 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 biggest of numbers in between parentheses and then end with a 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 could ask me questions in the comments and hopefully I'll be able to respond to you okay so I need to give myself a little space here and what I want to do is raw 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 10 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 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 of coordinate system in with pixels and computer graphics define does not look exactly like this the equivalent of this zero zero B 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 3 comma 4 and try to find that pixel I would have to go 1 2 3 pixels over and 1 2 3 4 pixels down 3 comma 4 would be this pixel right here the truth of the matter is are really really teeny 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 now if that 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 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 5 pixels wide there are 5 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 notice 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 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 25 mean 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 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 like 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 pause 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 what 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 what your assignment is if you choose to accept this is like 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 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 Y 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 gonna not worry about that too much rectangle is maybe not the best one to start with because of 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 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 zero 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 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 I'm almost ready to finish this video one thing one thing I gotta tell you so pretty ball ah why is the background 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 setting the background color so 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 gonna use command X for cut and command V for paste now look at this zoom 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 not 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 think that's gonna come how's this Square move around how can I interact with a mouse and the order is going to 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 show you one more thing do I want to show you one more thing I think something to be really useful 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 start 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 rect 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 this 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 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 oh 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 recs mode is another function that 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 the lips mode as well we could click on this and we could see look there's corner there's corners there's radius their 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 got the basic idea and I look forward to seeing what you make you can share links to the p5 sketches you crate 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

32 thoughts on “1.3: Shapes & Drawing – p5.js Tutorial

  1. This is what I made
    function setup() {
    createCanvas(400, 600);
    }

    function draw() {
    background(220, 0, 200);
    ellipse(195, 75, 70, 80);
    rect(134, 120, 125, 200, 50, 50);
    rect(85, 135, 40, 150, 100, 100);
    rect(267, 135, 40, 150, 100, 100);
    rect(145, 325, 45, 200, 100, 100);
    rect(200, 325, 45, 200, 100, 100);
    }
    I couldn't have done this without you! You are a great teacher!

  2. You act a lot like my English teacher, which is a really good compliment. A lot of energy! You put life into your videos, unlike most other videos in monotone voices that show in the most limited way! You execute very clearly… keep up the amazing content! πŸ™‚

Leave a Reply