---
title: p5.js
url: 'https://gerfficient.com/de/home/p5js'
markdown: 'https://gerfficient.com/de/home/p5js.md'
lang: de
date: '2024-01-23'
description: '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 u…'
---

# 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:

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

```html
<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.

---

## Navigation

- Parent: [Home](https://gerfficient.com/de/index.md)
- Previous: [Python Entwicklung](https://gerfficient.com/de/home/python-developing.md)
- Next: [IPMI - Hardwareverwaltung aus der Ferne](https://gerfficient.com/de/home/ipmi.md)