We now know how to call functions.

One of the features of p5.js is its library of functions which we can call.

A list of all of the p5.js library functions is available on the p5.js website (under the reference page).

Drawing Shapes

Let's have a look at how to draw a shape. In the library reference scroll down to the shapes section and find the ellipse function.

Click the ellipse function to see an example and a description. The example provided is:

ellipse(56, 46, 55, 55);

Insert this into your Web Editor project after setting the background colour, for example:

function draw() { 
     background(220);
     ellipse(56, 46, 55, 55);
}

What do those 4 numbers mean?

Going back to the reference for ellipse we can find a description of the parameters of the function:

x Number: x co-ordinate of the ellipse.

y Number: y co-ordinate of the ellipse.

w Number: width of the ellipse.

[h] Number: height of the ellipse.

The square brackets for the height indicate that it is optional. Leaving it out, it will default to the same size as the width, creating a perfect circle.