Coding with p5.js: Getting Started

For more information visit www.elegantAI.org

This is to get you started in using the software. The beauty of this is that there is no software to download, it is web based and you use it straight from the internet as if it was a website.

Another good thing is that it is totally free. You can save your work and share what you have done with your friends, parents or grandchildren. This is a code designed by artists to be easy to use and create wonderful visual graphics whether for art, games, to explore web design or artificial intelligence.

Step 1: First thing is to open your Chrome browser. Others work but Chrome works best.

Step 2: Type in editor.p5js.org into your web browser and you should get a default page like the one below:

Step 3: Delete all the code that is already there by default. Then type in the code you see in the unit.

Step 4: Copy the code in the boxes in this book. Press the play button to see it come up on the canvas. If you get an error message in the console (at the bottom under the code) check that you have not made a mistake

Step 5: Try the challenges or just play to get a feel for it, see what happens when you change something, learn by doing

Step 6: Delete all the code you have typed in and do the next one

Step 7: Work your way through each sketch and unit, you don’t need to complete everything or fully understand everything because most of your learning will come through regular and repeated practice. Have a go at the challenges and read the notes, I have kept them as brief as possible.

The p5.js code

The code you type into the editor will appear in a box like the one underneath. All you do is copy and type in the code as it appears in the white section. Anything with // in front of the text is just a comment or note it isn’t code or if it is then the computer ignores it.

function setup() 
{
  // this happens once
}

function draw() 
{
  // this happens in a continuous loop
}

Having a look at the buttons

Everything is quite intuitive and really the best way to learn is to play with them. The ‘run’ and ‘stop’ buttons are the ones you will use the most. In settings you can change the theme, the size of the font etc. If you are not sure then leave everything to the default settings.

“When you work through this book it is good for you to practise writing the code over and over again, think of it as developing memory muscle. So for each sketch delete the previous one even if it seems very similar.”

The following articles are tutorials featuring 3D art or a physics engine or whatever I decide to do. If you want to learn how to code then I have a series of eBooks called ‘The Joy of Coding” on Amazon. Just download the app and split your screen to view the code and use the editor.