Functions are an elementary part of programming languages. With them, programs can be simplified and presented in a manageable and reusable way (modularisation). Functions also help us to keep our code organised and understandable. 

...

functionName(parameter,.....) ;

Function Examples

This example shows how to write functions with return values.

function setup()
{
  const result = calculateSquare(4); // assign variable to call a function
  console.log(result);

  print(calculateSquare(10)); // call function directly
}
 
function calculateSquare(x) {
  return x * x;
}

If you want to draw three smiley faces out of ellipses or arcs you could repeat all steps three times. Or better, we can create a function that draws a smiley face, and then call this function three times. This makes our code tidier, shorter, simpler to understand and much more modular. This example shows how to use functions for creating legible and simple blocks (modularization). The best part is, that we can easily continue to use our smiley function to draw hundreds of smileys with minimal code.

function setup()
{
  createCanvas(500,300);
  stroke(255);
  strokeWeight(3);
  noFill();
}
 
function draw()
{
  background(0);
  smiley(100, height/2);
  smiley(250, height/2);
  smiley(400, height/2);
}
 
function smiley(x , y)
{
  print("smiley");
  ellipse(x, y, 100, 100);  // head
  
  ellipse(x - 20, y - 10, 10, 15);  // left eye
  ellipse(x + 20, y - 10, 10, 15);  // right eye
   
  arc(x, y, 60, 60, radians(20), radians(180-20));  // mouth
}

This example shows how to write functions with return values. When a return value is used, a value is passed back to where the function was called. We can also imagine that the function call, in this case calculateSquare(4) is replaced with the returned value, i.e. 16. You will typically use a return value if your function is providing the answer to something.

function setup()
{
  const result = calculateSquare(4); // assign variable to call a function
  console.log(result);

  print(calculateSquare(10)); // call function directly
}
 
function calculateSquare(x) {
  return x * x;
}

There is another special type of function when working with p5.js: an event function. Unlike the previous examples, where you wrote both the function call and the function definition, the function call is happening automatically in response to an event such as a keyboard or mouse interaction. Events in p5.js use specific predefined names, which you can find in the reference. And here is our first interactive program:

function setup(){
 createCanvas(300,300);
 background(0);
 stroke(255);
 strokeWeight(10); 
}

function draw(){
 point(mouseX, mouseY);
}

function mousePressed(){
 print("x:" + mouseX + ", y:" + mouseY);
 clear();
 background(0);
}

Exercise

Write a sketch where a unique shape follows the mouse position. When you click the mouse, the shape should change in some way (form, colour, size).