p5.js

23. Jan. 2024

P5js is a JavaScript library for creative programming, with a focus on making programming accessible to artists, designers, educators, beginners and everyone else. P5js is free and open-source. To embed it on this website, the iframe-tag is used and the code is hosted on a separate p5js server. The sorting example "Quicksort" can be embedded as follows:

Here, the main server (where this website is hosted) communicates with an auxiliary server (the subdomain p5js.gerfficient.com) that only provides p5js websites. The files are then embedded in an iframe as follows:

<iframe src="https://p5js.gerfficient.com/20240124-quicksort.html" width="100%" height="320px" frameborder="no"></iframe>

The width of the iframe is set to 100% by CSS and the height should correspond to the canvas contained in the iframe. But even if the latter is not the case, the dimensions of the canvas are limited to 100vw and 100vh of the web page (and thus of the iframe) thanks to the CSS defined by the help server.