ml5.js getting started

Step 1

First thing is to open your Chrome or Safari browser. Type in editor.p5js.org into your web browser.

Then…

You will get a page like the one below

Step 2

Delete all the code that is already there by default. Then type in the code you see below, press return to start a new line of code. When you have done that you can press the ‘play’ button (the triangle in the circle), this runs the code and to stop it running you press the ‘stop’ button (the square in the circle).

The two functions ‘setup()’ and ‘draw()’ are very important and part of the core elements of p5.js. Everything in the setup() function just happens the once. In here we have are using createCanvas() command to draw the canvas we are going to work on. Inside the brackets (400, 400) are the dimensions of the canvas, in this case it is 400 pixels wide by 400 pixels high. You can use whatever combination you so desire but the default is (400, 400).

Within the draw() function everything is in a continuous loop. Here we place (for now) the background() command. In the brackets we give it a number between 0-255. Where 0 is a black background and 255 is a white background, and everything in between are shades of grey. You can add colour and transparency but we will cover that later on. You don’t see the background being drawn over and over again because it is happening so fast.

Step 3

Let’s draw a circle. Press return after background(220) and copy the code circle(100, 100, 100) shown below, press the ‘play’ button to run the sketch. You will notice that it draws the circle in the top left hand corner of the canvas. This is because it has drawn the circle 100 pixels from the left hand edge, 100 pixels down from the top and given it a diameter of 100 pixels.

Step 4

We can have a look at the button on the far right, which has a wiggly circle in it. Click on that and you get another window open for you to customise your editor. You can see what difference the settings make, I prefer the high contrast theme, text size is a preference but the default is pretty good. Autosave is a useful feature whereby any changes made while you are coding are automatically saved, you can also save manually under the File tab. Autoclose Brackets and Quotes is a useful one to have on but not essential and in the beginning might be better if you switch it off. Autocomplete Hinter is useful but is very annoying, so I always have it turned off.

Step 5

The buttons. In between the main three (circular) buttons you have another radio (selectable) button called Auto-refresh, it can be a useful feature whereby any changes made while running the code change automatically, this can also be a bit annoying as it can start doing it before you have finished typing the line of code, so beware. I tend to leave it off (unchecked). You will notice that every time you open a new sketch you get a different random name for it, in the example below i it called Casual Ian. These can be changed to something more meaningful but you cannot save anything until you sign up and log in. Although you don’t have to sign up, you really should so you can save your work as you go along. All you need is an email and create a password. It is very simple, there are other options to do it automatically with google etc.

Step 6

Organising your monitor or screen. This will depend on what you are using, so this is just a suggestion. You will be downloading PDFs of the tutorial which you can either print off or have it on your screen alongside the web editor. My suggestion is that have two thirds for the web editor and one third for the pdf. Alternatively you could use another device for the pdf, like a tablet or even a smartphone.

Unfamiliar with p5.js

If you have never coded before or just unfamiliar with p5.js (or JavaScript in general) then I have a simple few tutorials for you to follow that will get you up to speed very quickly. You simply download the PDFs either use them on screen or print them off.