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.