Creative Coding/Scripting animation in P5js

P5js

P5js is a library of JavaScript designed for artists and creatives working with graphics, animation, and interaction on the web.

JavaScript is a scripting language for interactive design on the web. Together with HTML and CSS, it makes 98% of the web content. Javascript has different libraries, the same way a language like English comes with different dialects and accents. Three.js is the 3D library of the web, Node.js is the library for multi-user live interaction, P5.js is the creative dialect of JavaScript.

It was initiated by the Processing foundation, the group behind Java-based coding software Processing. Processing was built in 2001 for artists who wanted to dive into code as a creative medium, without having the expertise of a computer scientist.

Since then, the community around Processing grew and built an online-friendly version, p5js, including a browser-based code editor and a small cloud to store your codes and files.

You can find the code editor at editor.p5js.org.

Interface

Screenshot of editor.p5js.org

The main interface has an editor on the left and a preview on the right.

Play your sketch

You can display the result of your code in the preview by pressing the play button on top-left. You can also enable the Auto-refresh button to update your preview whenever you make changes. However, this will run continuously and, sometimes, not when you need. You can use shortcut cmd+ENTER(or ctrl+ENTER on Windows) to run the code only when you want.

Save your sketch

Remember to save your sketch by pressing cmd+S or file > save. You can also enable the Autosave option in the settings to make saving automatic.

You need to be logged in to save your file, so make sure you register an account.

Fix your sketch

The console is the grey area at the bottom of the code editor. If the code does not work, its errors and warnings are displayed here.

You can also make use of the console with a function like print(mouseX,mouseY), which displays the live coordinates of your mouse.

Share your sketch

If you are logged in and you have saved your file, you can share it by copying the link from the URL bar.

It looks like this: https://editor.p5js.org/(your username)/sketches/(random ID)

If you prefer to share it without the code, you can use the view-only option in file > share. This option uses the link https://editor.p5js.org/(your username)/full/(random ID), it displays the website full-screen version of your sketch.

Alternatively, you can also use the <iframe> option to embed your sketch in an HTML page.

Functions

Functions are instructions written in natural language that translate into a specific browser operation. It is the way you, the coder, direct or communicate with your computer!

P5js knows all the JavaScript functions. But, on top of that, it contains dozens of extra P5 functions that specialise in animating graphics and interaction.

Functions require arguments, which are input values. For example, createCanvas(400, 400) has two arguments: width (400) and height (400). To find out what arguments a function needs, you can use the documentation page at help > reference. This is a dictionary of all the functions with descriptions, common use examples and argument definitions.

Variables