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.

Write the sketch as a js code block, or load it from a file of your book with ::file{path="sketch.js" src="…"}. Further JavaScript files get a name with file="…"; they are loaded before the sketch, in the order they are written, and show up as tabs in the editor.

Attributes

:::p5{height=200}
::file{path="sketch.js" src="p5test.js"}
:::
 
 
:::p5{height=400 mode="editor"}
 
```js
function setup() {
    createCanvas(400, 400);
}
 
function draw() {
    background(220);
    ellipse(200, 200, 100, 100);
}
```
 
:::
 

Several files

:::p5{mode="editor" height=300}
 
```js
function setup() {
  createCanvas(200, 200);
  background(skyColor());
}
```
 
```js file="colors.js"
function skyColor() {
  return color(135, 206, 235);
}
```
 
:::

Files readers may change

With files, readers get buttons for their own files: + creates a file, ⤒ uploads one, and each tab gets ✎ to rename and × to delete it. rename and delete allow it for the files of the page too; the main file and readonly, hidden and test files always stay as written. Files readers created or uploaded they can always rename and delete. Clicking the tab of a binary file shows a preview: images, audio and video, PDFs, fonts (TTF, OTF, WOFF) and 3D models (STL, OBJ), which you can turn and zoom.

:::p5{files="create,upload,rename,delete"}
...
:::

Compare with a solution

Like on CSSBattle, readers can try to draw a given picture as exactly as possible. Add compare and a file with role="solution": every Update scores how much of the reader's sketch matches the solution. The picture to draw lies over the reader's own output, at the same size and place, and covers it at first. A line divides them: the reader's drawing on the left ("Yours"), the target on the right ("Target"). After the first change the line moves to the middle; readers drag it by its handle, or with the slider below. The panel below shows the match and the target's colours (click one to copy its hex value). Overlay shows the target half see-through over the whole drawing, Differences marks what did not match, and holding Target shows all of the target. Once solved, the picture is outlined in green.

The score has three parts. Colour (half of it) compares every pixel, the background too, with partial credit for colours that are close. Outline (30 %) checks that the edges of shapes are where the target has them. Area (20 %) checks that the drawn areas cover each other, whatever their colour. Outline and area look only at the drawing, so an empty canvas gets nothing for them and scores at most half. Anything one pixel off still matches fully. A task is solved when the score and each of its parts reach pass, so a shape in the wrong colour does not pass on its outline alone. Hovering the score shows the three parts.

random() and noise() are seeded the same for both, so a sketch that uses them can match exactly.

The target is drawn as soon as the task scrolls into view. In PyIDE that loads Python, and the canvas tab opens first.

:::p5{mode="editor" compare pass=95}
 
```js
function setup() {
  createCanvas(200, 200);
}
```
 
```js file="solution.js" role="solution"
function setup() {
  createCanvas(200, 200);
  background(240);
  noStroke();
  fill(220, 60, 60);
  circle(100, 100, 100);
}
```
 
:::

Instead of a solution, ::file{path="target.png" src="…" role="target"} can give the picture to draw. A picture made elsewhere is drawn with other fonts and edges, so a solution usually gives fairer scores. The solution is part of the page, so readers who look into the page's source can find it.

Upgrading from the old syntax

Older books loaded sketches with src="…" on the directive and showed the editor with editor=true. Run npx hyperbook migrate in your book to convert these pages; it also keeps the code readers saved.