P5 tutorial

P5.js is a javascript library that is based on Processing. It is used to create interactive webpages. It is very similar to Processing but has some differences. In contrast to drawing to a plain HTML5 canvas you can use the Processing functions to draw shapes and images. You can also use the Processing functions to handle mouse and keyboard input.

To illustrate the difference between plain HTML5 canvas and P5.js, here is a simple example of drawing a line in plain HTML5 canvas:

// Provided a canvas element named 'myCanvas' is in the HTML
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

And here is the same example in P5.js:

// provided the P5.js library in loaded in the HTML
function setup() {
    createCanvas(200, 100);
}

function draw() {
    background(220);
    line(0, 0, 200, 100);
}
  • The setup() function is called once when the program starts.
  • The draw() function is called 60 times per second.
  • The background() function clears the canvas with a color.
  • The line() function draws a line from (0,0) to (200,100).

Separating your program in setup() and draw() functions is a good practice. It makes your code more readable and easier to debug. It also makes it easier to add interactivity to your program.

P5.js and HTML

P5.js is a javascript library. To use it in a webpage you need to include the P5.js library in the HTML. You can do this by adding the following line to the <head> of your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

You can also download the P5.js library and include it locally in your HTML. You can download the P5.js library here. You can then include the library in your HTML like this:

<script src="p5.js"></script>

To make a specific sketch run in your HTML you need to add a <script> element to your HTML. You can do this by adding the following line to the <body> of your HTML:

<script src="sketch.js"></script>

You can spread your code across multiple files. You can then include these files in your HTML by adding multiple <script> elements to your HTML. The order in which you include the files is important. The files are executed in the order in which they are included in the HTML. You can use this to make sure that the setup() function is called before the draw() function.

P5.js editors

There are several online editors that you can use to write P5.js programs. The most popular ones are:

P5 is well supported in visual studio code. You can install the P5 extension in visual studio code to get syntax highlighting and code completion. The P5 live canvas extension allows you to see the result of your code in the editor.

Add P5 sketches to your markdown pages

You can add P5 sketches to your page by following these steps:

  1. Add a reference to the P5 library in your HTML template files or in your configuration of your chosen static site generator.:
    • in mkdocs this is done in the extra_javascript section of the mkdocs.yml file.
    • in jekyll this is done in the _includes/head.html file.
    • in hugo this is done in the layouts/partials/head.html file.
  2. Add a <div> element with an id to your markdown page. This is where the P5 sketch will be rendered.
  3. Add a <script> element to your markdown page. This is where you write your P5 code. You can use the setup() and draw() functions to write your code. You can use the createCanvas() function to create a canvas and set the parent element to the id of the <div> element you added in step 2.

Example:

<div id="myCanvas"></div>
<script>
    function setup() {
        createCanvas(200, 100).parent('myCanvas');
    }

    function draw() {
        background(220);
        line(0, 0, 200, 100);
    }
</script>