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

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

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

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

---

## Navigation

- Parent: [Home](https://gerfficient.com/en/index.md)
- Previous: [Python Developing](https://gerfficient.com/en/home/python-developing.md)
- Next: [IPMI - Managing Hardware Remotely](https://gerfficient.com/en/home/ipmi.md)