P5
This element allows you to create and run p5.js sketches in your book. The p5.js library is a JavaScript library that allows you to create graphics and animations in the browser.
You can either load a p5.js sketch from a file or write it directly in the book.
Attributes
| Attribute | Description | Default |
|---|---|---|
src |
Path to a p5.js sketch file | - |
height |
Height of the preview or editor container | calc(100dvh - 80px) |
editor |
Show the interactive editor | false |
::p5{src="p5test.js"}
:::p5{height=400 editor=true}
```js
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(200, 200, 100, 100);
}
```
:::
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
ellipse(200, 200, 100, 100);
}