JavaScript for Interactive Web Applications

Fabian Schubert

SoSe 2018

Institute for Theoretical Physics
Goethe University Frankfurt/Main

p5.js : a JavaScript drawing library

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

Getting started with 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 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:

Crowd Dynamics