...

...

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. 

Functions act as jumps in the program. In the event of a function call, the program jumps to the position where the function is defined and then returns after the function has been executed. Most programming languages have many built-in or native functions. To find out how the p5.js functions work, and what parameters they expect, we need to look at the documentation.

Example: Mouse Interaction

Some functions within p5.js are predefined and enable a fast graphical interaction e.g. mouseX and mouseY, which contain the current horizontal and vertical position of the mouse, relative to (0, 0) of the canvas.

var length1 = 0;
var length2 = 0;

function setup() {
  createCanvas(300, 300); // define window size
  background(0); // define background colour
  stroke(255, 255, 255); // define line colour
}
function draw() {
  background(0);
  length1 = mouseX;
  length2 = mouseY;
  line(100, 10, 100, length1); // draw a line
  line(150, 10, 150, length2);
  line(200, 10, 200, 250);

  fill(0, 0, 0); // fill colour
  strokeWeight(5); // line thickness
  ellipse(100, length1, 50, 50); // draw an ellipse
  ellipse(150, length2, 50, 50); // draw an ellipse
  noFill(); // turn off fill
  ellipse(200, 250, 50, 50); // draw an ellipse
}

Exercise :

Take your results to form exercise 1, and modify it so it animates across the screen. 

Syntax of functions

There are two parts of a function. First there is the the function declaration, where the name of the function along with its properties and behaviors are defined. Next there is the function call, where the function is then actually executed. Functions may be called multiple times.

...

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).