Getting Started with p5.js - Griffith-ICT/1701ICT-Creative-Coding GitHub Wiki

There are a few ways to use p5.js.

The way we are going to look at initially is the new Web Editor which is only in alpha at the moment (i.e. not officially released).

1. Visit the Web Editor page
2. Click the sign up button in the top right:

Whenever you create a new project it creates a new project name for you (e.g. "Damaged Sleep"):

You can click the project name to edit it.

Buttons across the top allow you to save the project. You can create a new one and also open previous ones.

Click the "Play" button at the top to run the project. The project will draw into the area on the right. By default it draws a grey square by setting the background colour of the 400x400 pixel canvas.

Try changing the number in background(220) to something else (note it needs to be in the range 0-255), for example background(100). Run the project again.

background() sets the background colour of the canvas to a greyscale value. 255 is white and 0 is black. You can also specify a red, green, and blue colour, by specifying three values in the range 0-255, for example background(220, 0, 0). Try it and other combinations.

You can also change the numbers in createCanvas(400,400). This command sets up the entire drawing canvas. By changing its size it will change the size of the background colour. For example you could change it to createCanvas(100,500).

Let's [understand p5.js](Understanding p5.js) further...