p5.js

23. Jan. 2024

P5js ist eine JavaScript-Bibliothek für kreatives Programmieren, mit dem Schwerpunkt, das Programmieren für Künstler, Designer, Pädagogen, Anfänger und alle anderen zugänglich zu machen. P5js ist kostenlos und open-source. Um es auf dieser Webseite einzubetten eingebettet, wird das iframe genutzt und der Code auf einem gesonderten p5js-Server gehostet. So kann das Sortierbeispiel "Quicksort" wie folgt eingebettet werden:

Hierbei kommuniziert der Hauptserver (wo diese Webseite gehostet wird) mit einem Hilfsserver (der Unterdomäne p5js.gerfficient.com) der ausschließlich p5js Webseiten bereitstellt. Die Dateien werden dann in einem iframe wie folgt eingebettet:

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

Die Breite des iframes wird durch CSS auf 100% gesetzt und die Höhe sollte dem im iframe enthaltenen Canvas entsprechen. Aber auch wenn letzteres nicht der Fall sein sollte, werden dank des vom Hilfsserver definierten CSS die Dimensionen des Canvas auf 100vw und 100vh der Webseite (und somit des iframe) beschränkt.