Introduction to Functions in p5.js

p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, researchers, and those who want to enjoy making arts.

In this article we’ll be discussing the two major functions in p5js which are:

setup function and
draw function

We'll then do a little practice just to scratch the surface of what we’ll be discussing. Looks a lot right? But it’s quite short and easy. So here we go!!!

Prerequisites

To complete this tutorial, all you need is a basic understanding of JavaScript, along with your text editor. With that in mind, let’s get into it!

Note: If you’re just getting started with JavaScript, check out this free and comprehensive tutorial on freecodecamp.

Getting Started

P5js can be used in various methods, one of the easiest methods is by using the online p5.js editor which can be accessed here. Below is an example of how the editor looks:

Another way is to download its required file and link it in your markup, or include its CDN in your markup directly like below:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
  </head>
  <body>
  </body>
</html>

TIP: If you are using VSCode, you should definitely download the P5.js extension

Setup function

In p5.js, the setup() function will run first, immediately your program has started. We use this function to set the initial environment properties such as text-color, screen-size, background-color, as well as loading assets such as images and fonts. And also, note that your p5.js program should contain only one setup() function.

Draw function

The draw() function is called after setup() function. The draw() function is used to executes the code inside the block until the program is stopped.

Let’s do a little practical:

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);

  noStroke();
  fill(255);
  ellipse(200, 150, 75, 75);

}

In-depth explanation

Setup functions happen only once and, that’s the moment the sketch begins. This is why we input the createCanvas() because this is the kind of thing we want to do just once, You don’t want to make canvasses multiple times and you don’t want to make a canvas at the end, That wouldn’t make sense. So the flow at the beginning of the program the setup makes the canvas.

Draw happens forever, Another word for that might be ‘in a loop’, whatever code is in draw is in a forever loop.
So why would it work this way? why would we do something once and have other codes happen all the time? Now this is not necessarily how the software works, All software has a flow of operations but the kind of flow is common for an animation program, for graphics program. let's take a look at the output to our code :

We just have a simple sketch with a circle in the middle and we can see the flow of the program happening but we don’t see anything change but we need something that changes something that varies inside the draw function. Let’s think about this what would it be for us to be able to move our circle with our mouse, we can therefore introduce a variable. A variable is a named entity, a keyword that stores something and in this case, we want to store something that has a particular value and in p5 we can get some variables for free and one of those variables is mouseX and another one is mouseY . Meaning the moment we write our mouseX in our code :

function setup() {
  createCanvas(400, 300);
}

function draw() {
  background(0);

  noStroke();
  fill(255);
  ellipse(mouseX, 150, 75, 75);

}

we then rerun:

We see that the circle moves relative to direction of our mouse. What really happens, the draw loop is happening over and over again it keeps getting the dynamic current value of mouseX. so this Is just our starting point, what can you do with system variables mouseX and mouseY one thing you could do is create a simple painting program. We could do that by writing the following code:

function setup() {
  createCanvas(400, 300);
background(0);
}

function draw() {
  noStroke();
  fill(255);
  Circle(mouseX, mouseY, 24);

}

Here’s our output:

Conclusion:

We talked about two functions the function setup and the function draw as defining the flow of the sketch these are just events, the setup functions happen at the beginning, the draw then happens continuously. There are many other events that we can define, another function is mouse pressed, This is an event that sits and waits.
It only happens when you click the mouse. For more examples, you can check out coding train on YouTube here. Please share if you found this useful.

Blog