Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.1 Setup and the Draw Loop

In this lesson, you’ll learn about the most important functions in a p5.js sketch: setup() and draw().

Related Links

2.1 Setup and the Draw Loop

So there are two very important functions that are at the core of p 5. The first is a setup function which we'll write just here like so. Function setup. Though we don't need to manually call this function p5 does this for us automatically and does so only once at the very start of the sketch. This is a place to do any preparatory work like specifying the size of your canvas or background color, that kind of thing. Let's just put a console.log in here so you can see it working. So this goes in the browser. And great, you can see here that it's called automatically, and only once. The second even more important method, one that you'll spend a lot of time in is the draw function. And we write this like so, function draw. Now, the draw function, like setup is called automatically by p5. However, unlike setup it's called over and over, and over again as fast as it possibly can. As soon as it's called it does whatever's inside the function and then does it all over again, 60 times a second if it can. Let's try it out. Whee. So we can see the kind of this message going up, and up. This is the method getting called after the setup function is called. And then just looping over and over again. Okay let's draw something. First, remove all console messages, we don't need them anymore. And so let's set up our canvas. We'll need an area of the browser to draw on. Where would we do this? Well setup seems the most logical place, so let's do it there. Creating our canvas is as straight forward as saying create canvas and then putting in the width and height we want the canvas to be. So if you wanted a canvas that was 600 pixels wide and 200 pixels high, you would say createCanvas(600, 200). Let's be greedy and use the whole width and height of the browser. An easy way of doing this is window.innerwidth, and Window.enterheight which returns the width and height of the browser's view port. This will however give us some unsightly scroll bars. We can remove these easily enough via CSS by adding display: block to our canvas, like so. Lovely. Okay, that background is looking a little plain, so let's give it a bit of color. All we have to do to do that is use the background function. This takes a color as a string. It can either be a color name, RGB values, or a good old bit of hexidecimal, which is what I'll be using. FBE571 is an all favorite of mine. But if you're coding along, feel free to put it in whatever you want. Just so you know, FBE571 is pretty hard to beat. Let's check our browser. See, what did I tell you? Okay, I promised you we'd draw something in this lesson. How about a circle? Some call it the king of shapes, I don't, but let's draw one anyway. Now we're drawing something, so we should probably put that in the draw function right? Yeah, makes total sense. Here we'll call the ellipse function, which is just a fancy word for any shape that's circular. And that's the export arguments. The first two are the x and y positions of the circle, as how far from the left and top of the canvas we want the circle to appear. Now, we want it to appear at the top left of the browser, so let's just say 0, 0. The next two arguments after that are the width and heighth of the ellipse. So that's where ellipses are different than circles, and they can be tall and thin or short and wide circles. We want our circle to be quite big, so lets say 100 pixels for the width. And because we want it to be an actual circle, then the height has to be the same value, so a hundred as well. Okay let's have a look. Okay, so as you can see here the circle has been chopped off right along its center. The reason for this is that the x and y coordinates we specified for the ellipse refer to the center of the circle. Let's move out from there. To bring it to the edge we need to specify the x and y position of half of the width of the circle. So that's 50 pixels and 50 pixels. Quick refresh. Great. So our circle's looking a bit boring. Let's change its color. To do that, all we have to say is fill('lightblue'). But make sure you do this before drawing the ellipse. It needs to know what color it is, before it draws itself. Great, let's lose that harsh border though, by changing its color as well. Let's handle it saying, stroke('white'). What we're saying here is, draw the outline of the circle using white. Now that's looking a little bit like a bubble to me. What else could we do to make it even more bubbly? How about a tiny bit of shine? I don't mean anything fancy, just a little mark like in cartoons. This kind of thing. Let's do that in the next lesson.

Back to the top