Understanding p5.js - Griffith-ICT/1701ICT-Creative-Coding GitHub Wiki

When creating a new project we get the following code:

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(220);
}

Our code consists of two functions setup() and draw().

These functions are run or executed at different times and in different ways.

setup() function

The setup() function is run once at the beginning. Any sort of intialisation you want to do can be done here. The default code sets the size of the canvas (note that you don't need to set the size of the canvas but it will be very small by default, 100x100 pixels).

draw() function

The draw() function is run regularly. Whenever we want to draw to the contents of our canvas this function will run. So where setup() only runs once, and it runs before draw() is ever called, draw() can run as many times as is needed to change what is drawn on the canvas. It only needs to run once to completely draw to the canvas. However it would need to run multiple times for animations, or to change the display based on some interaction.

What is a function?

A function is a block of code. It starts with the word function followed by the name of the function (the name is actually optional in some cases, but required for the setup and draw functions), followed by open and close parentheses (parameters can go here, but we'll discuss those later), followed by curly braces. Inside the curly braces is our code which will run.

function name() 
{
}

But [what can p5.js really do](p5.js examples)?