If we wanted to create our own functions, we would follow the same convention we have been using for the creation or declaration of these functions. To create or declare a new function, you will start off by using the function keyword and give the function a name of our choosing that ideally describes the behavior, or purpose, of this function. Next to function name, you would open brackets. If you want to build a function that works with user input, we can define parameters inside the brackets that act as placeholder variable names for the future user inputs.
You will see how this works in a bit. Then we have curly braces. Inside the curly braces can be referred to as function body. In there, we write the code that constructs the logic of the function. Here, we can also make use of the parameters, the variable names we defined inside the brackets next to the function name, as part of the operations we want to perform inside the function body. Let's look at a simple example. Notice how p5.js has an ellipse function but not a circle function. This is really not an issue since we can easily create a circle by providing the ellipse function with the same width and height values.
For the argument's sake, though, let's create a circle function of our own that would work with three values, the x and y-position that we want to draw our circle at and the diameter of the circle. Here is how to do it. We will start off with the keyword function and then we will put down the name of the function that we would like to have, which is going to be circle in our case, and then we will open and close parameters, and then we will open and close curly braces, which is going to constitute to the function body.
Inside the braces, we define the parameters that this function is going to be accepting. I would like this function to accept a x-position, a y-position, and a diameter value. And here, inside the function, I can write any statements that's going to get executed when I call this function by its name, which is circle. So here, I can put another function, actually, which is going to be ellipse in this case. And it's going to make use of the arguments that are provided to this function which is going to be x, y, and the diameter.
And I'm going to be making use of the diameter twice for the ellipse function that is inside the circle function. We can choose anything for these parameter names. It can be a, b, c, d, whatever, but it usually makes sense to use names that communicate the intent clearly. So in our case, using the names x, y, and diameter makes sense. After defining this function, we can call this function by using its name and providing it with values. So inside the draw function, I can call the circle function that I just created with the parameters, or arguments, of width divided by two, height divided by two, and hundreds.
And now, as you can see, this is drawing a circle to the screen. If you might have seen, I was using the words parameters and arguments interchangeably. They are similar to each other. The parameters of a function can be thought of the values that the user would eventually provide when they are using the function. So when you're defining the function, the correct terminology is parameters, as these values provide parameters to the function, or they parametrize the function.
But when you are calling the function, those same values, when they're provided by the user, they are called function arguments. Having created this circle function, we don't need to worry about using the ellipse function to draw circles anymore. We can just use our own function to draw those perfectly round circles. Having implemented the circle function ourselves, we know that it is actually using the ellipse function, under the hood, to draw these circles. But the neat thing about functions is that we don't really need to know how they work once they're available to us.
We can just use them without thinking how they are implemented. The ellipse function that is implemented by the smart people who created p5.js might be using all sorts of things inside to draw an ellipse, but as far as we are concerned, it draws an ellipse when it is called, and that's all that matters. In this example, creating a circle function doesn't buy us too much efficiency. As a matter of fact, we can just pass three arguments to the ellipse function instead of four to draw a circle instead, but functions become really important to use when we are building more complex programs as they really help us to manage complexity by containing and grouping operations under a single executable name.
Functions are essentially black boxes. They encapsulate the code contained inside. Additionally, whatever variables that are declared using the var keyword in the function are not visible from outside the function. This means that coding these variables that are defined inside a function from outside of the function will result in an error. Let me illustrate that by writing a simple program. So here, I'm going to get rid of my codes for the most part. I'm going to delete the circle function code and delete the circle function itself as well.
And I will define a new function called sayHello, function sayHello, which is going to have a variable in itself called var message. It's going to have the value Hello World! and then it will just console.log this value. And one thing that is worth mentioning is that it doesn't really matter where I'm defining this function.
But if I were to console.log the variable message from outside of this function, we are going to be getting an error, because this variable that is inside this function is not visible from outside the function. Remember the concept of this.
- Color functions in p5.js
- Operators and variables
- Conditional statements
- Loops, functions, and objects
- Working with arrays