At this age and time that we live in, coding is simply invaluable. It has the power to uplift your career, your future prospects and even your intellectual capacity. Computation is driving one of the largest capital expansions in history and there has never been a better time to learn coding than now. 

But learning how to code can be challenging. It is hard to find good resources that are relevant, practical and engaging at the same time. This course teaches coding from scratch using the vastly popular programming language JavaScript. Using JavaScript and a programming library called p5.js, you will learn how to code in a highly engaging and visual manner.

Find out more at: www.codingforvisuallearners.com

Coding for Visual Learners: Learning JavaScript with p5.js

## Creating Functions

Functions are primary building blocks of JavaScript. They allow us to write programs in a more efficient and scalable manner. Functions help us to manage complexity by containing and grouping operations under a single executable name. We already know how to call functions by using the p5.js predefined functions such as **ellipse** or **background**. We even created our own functions as p5.js forces us to put our code into two function declarations, **setup** and **draw**. If we wanted to create our own functions, we would be following the same convention that we have been using for the creation, or declaration, of these functions.

To create (or to declare) a new function, we would start off by using the function keyword and then give the function a name of our choosing that ideally describes the behaviour or purpose of the function. 

```javascript
	function functionName() {
		// function body
	}
```

Next, to the function name we would open brackets. If we want to build a function that works with user input, we can define parameters inside the brackets that would act as placeholder variable names for the future user input. We will see how this works in a bit.

Then we have curly braces. Inside curly braces can be referred to as the function body. In there, we would write the code that would construct the logic of the function. 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 not really an issue since we can easily create a circle by providing the ellipse function with same width and height values. For argument's sake, though, let’s create a **circle** function 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. Inside the brackets, we will be writing down variable names that would eventually be provided when this function is called. These names are called *parameters* as they parameterize the functionality of the operation we are creating. We will be using these parameters inside our function to be able to let the user control the inner workings of the function.

```javascript
	function circle(x, y, diameter) {
		ellipse(x, y, diameter, diameter);
	}
```

We can choose anything as parameter names, but it usually makes sense to use names that communicate the intent clearly. So in our case, using the names; x, y, and radius makes sense.

After defining this function, we can call it by using its name and providing it with values. Values provided to the function are called *arguments* to the function. Notice that the function might fail or not work as expected if all the required arguments are not provided.

```javascript
	circle(width/2, height/2, 100);
```

Don’t worry too much if you feel like the terminology is confusing. It might take some time to get used to it. The *parameters* of a function can be thought as the values that the user would eventually provide when they are using the function. Those same values that are provided when calling the function are referred to as *arguments*.

With the **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 actually uses the ellipse function under the hood to draw those circles. But the neat thing about functions is that we don’t really need to know how they work once they are available to us. We can just use them without thinking how they are implemented. **ellipse** function that is implemented by the smart people that 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 help us to manage the complexity by containing and grouping operations under a single executable name. Functions are essentially blackboxes. They encapsulate the code that they contain and whatever variables that are declared using the **var** keyword inside the function are not visible from outside the function.

# Creating Functions

Functions are primary building blocks of JavaScript. They allow us to write programs in a more efficient and scalable manner. Functions help us to manage complexity by containing and grouping operations under a single executable name. We already know how to call functions by using the p5.js predefined functions such as **ellipse** or **background**. We even created our own functions as p5.js forces us to put our code into two function declarations, **setup** and **draw**. If we wanted to create our own functions, we would be following the same convention that we have been using for the creation, or declaration, of these functions.

To create (or to declare) a new function, we would start off by using the function keyword and then give the function a name of our choosing that ideally describes the behaviour or purpose of the function. 

```javascript
	function functionName() {
		// function body
	}
```

Next, to the function name we would open brackets. If we want to build a function that works with user input, we can define parameters inside the brackets that would act as placeholder variable names for the future user input. We will see how this works in a bit.

Then we have curly braces. Inside curly braces can be referred to as the function body. In there, we would write the code that would construct the logic of the function. 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 not really an issue since we can easily create a circle by providing the ellipse function with same width and height values. For argument's sake, though, let’s create a **circle** function 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. Inside the brackets, we will be writing down variable names that would eventually be provided when this function is called. These names are called *parameters* as they parameterize the functionality of the operation we are creating. We will be using these parameters inside our function to be able to let the user control the inner workings of the function.

```javascript
	function circle(x, y, diameter) {
		ellipse(x, y, diameter, diameter);
	}
```

We can choose anything as parameter names, but it usually makes sense to use names that communicate the intent clearly. So in our case, using the names; x, y, and radius makes sense.

After defining this function, we can call it by using its name and providing it with values. Values provided to the function are called *arguments* to the function. Notice that the function might fail or not work as expected if all the required arguments are not provided.

```javascript
	circle(width/2, height/2, 100);
```

Don’t worry too much if you feel like the terminology is confusing. It might take some time to get used to it. The *parameters* of a function can be thought as the values that the user would eventually provide when they are using the function. Those same values that are provided when calling the function are referred to as *arguments*.

With the **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 actually uses the ellipse function under the hood to draw those circles. But the neat thing about functions is that we don’t really need to know how they work once they are available to us. We can just use them without thinking how they are implemented. **ellipse** function that is implemented by the smart people that 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 help us to manage the complexity by containing and grouping operations under a single executable name. Functions are essentially blackboxes. They encapsulate the code that they contain and whatever variables that are declared using the **var** keyword inside the function are not visible from outside the function.

Coding for Visual Learners

08 - Functions

Creating Functions