JavaScript functions

MMP 210 > Week 9

So far, we have been using the functions that are provided by the p5 library, like setup, draw and ellipse.

We can start writing our own functions to do more complex drawings that the defaults provided.

Functions are blocks of code that can be called repeatedly.

Functions are like variables, but instead of keeping track of data they save a series of code statements.

Functions are defined with the keyword function followed by the function name and then parentheses (). After the parentheses are

function banana() {
	console.log("Hello world.");
}

Notice how nothing happens after we declare the function. The function is defined, but the code won't run until it is called:

banana();

Arguments

A function can also be written with arguments, which are variables that are declared within the parentheses of the function.

A function is kind of like a blender. A blender always does the same thing, it blends food together, but the result is different depending on the ingredients.

Arguments are the ingredients of a function.

Let's write a function with arguments.

function greet(name, greeting) {
	console.log(greeting + ", " + name);
}

greet("Jenny", "Hello");
greet("Jerry", "Hi");

Now check what happens if we call the function with out arguments:

greet();

Why is this undefined, undefined?

The variables that are created for the arguments of the function, in this case name and greeting and implicitly instantiated when the function is called.

So, even though we never wrote var name; or var greeting; they are instantiated, and when a variable is instantiated but not assigned, it has the value undefined. Because we did not call our function with the right number of arguments, those values stay undefined.

Scope

Variables declared within a function are not available to other functions in our program. Any variables declared in the global scope, or outside of any function, are available to function scopes.

Read more on scope.

Bad scope example:

function assign() {
	var x = 0;
	var y = 1;
}
function add() {
	console.log(x + y);
}
assign();
add();

Better scope example:

var z; 
var w;
function assign() {
	z = 0;
	w = 1;
}
function add() {
	console.log(z + w);
}
assign();
add();

p5 functions

Today, we'll create our own p5 function to make interactive shapes.

Earlier, we created an interactive circle using the dist() function to determine if the mouse is inside of the circle.

Here's a variation of that example.

That is enough if we only need one circle in our sketch, but if we needed five circles it would be annoying to copy and paste that code.

Using a new function, we could define a button that draws the ellipse and includes the functionality.

We already know the information we need, the position and size of the ellipse, as well as the functionality to determine if the mouse is hovering inside of the circle.

What we want to do is replace

ellipse(x, y, s);

with

button(100, 100, 100);

To create a new function we can declare the function at any point in the code.

Next we need to add the arguments for the button. We need to know x, y and s or size.

These arguments do the same as our previous example's var x = 100; so we can skip those lines and copy everything else into our function.

Now we can easily add new buttons.