p5.js is a JavScript library that provides a framework for the creation of interactive graphical web applications.
As an example, we will create the following simulation using p5.js
the first thing you will have to do is to provide a link to the p5.js library in your html document
Alternatively, you can download the library as a file from p5js.org and provide a reference to the local file.
There are two important functions provided by the library: setup() and draw(). setup() is called once upon page initialization. draw() is called repetetively and is used as the main simulation/animation loop. To create some content, we have to override these functions in a custum script.
Everything that is to appear on the screen is drawn in a p5 canvas. We initialize it in the setup() function.
Drawing things onto the canvas is really easy:
You can find a full list of drawing methods in the p5 reference.
So far, nothing is moving on the screen. To see that draw() is continuously updated, we change our method to:
Similar to our previous project, we would like to embed the canvas into the structure of our html page. This can be done with the canvas.parent() function: