P5

Dieses Element ermöglicht es Ihnen, p5.js Skizzen in Ihrem Buch zu erstellen und auszuführen. Die p5.js-Bibliothek ist eine JavaScript-Bibliothek, die es Ihnen ermöglicht, Grafiken und Animationen im Browser zu erstellen.

Schreiben Sie die Skizze als js-Codeblock oder laden Sie sie mit ::file{path="sketch.js" src="…"} aus einer Datei Ihres Buchs. Weitere JavaScript-Dateien bekommen mit file="…" einen Namen; sie werden vor der Skizze in der angegebenen Reihenfolge geladen und erscheinen im Editor als Tabs.

Mit mode="editor" wird neben der Skizze ein Editor angezeigt. Die Höhe legen Sie mit height fest.

:::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);
}
```
 
:::

Mehrere Dateien

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

Dateien, die Leserinnen und Leser ändern dürfen

Mit files bekommen Leserinnen und Leser Knöpfe für eigene Dateien: + legt eine Datei an, ⤒ lädt eine hoch, und jeder Tab bekommt ✎ zum Umbenennen und × zum Löschen. rename und delete erlauben das auch für die Dateien der Seite; die Hauptdatei sowie readonly-, hidden- und Testdateien bleiben immer, wie sie geschrieben sind. Selbst angelegte oder hochgeladene Dateien dürfen Leserinnen und Leser immer umbenennen und löschen. Ein Klick auf den Tab einer Binärdatei zeigt eine Vorschau: Bilder, Audio und Video, PDFs, Schriftarten (TTF, OTF, WOFF) und 3D-Modelle (STL, OBJ), die sich drehen und zoomen lassen.

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

Mit einer Lösung vergleichen

Wie bei CSSBattle können Leserinnen und Leser versuchen, ein vorgegebenes Bild möglichst genau nachzuzeichnen. Fügen Sie compare und eine Datei mit role="solution" hinzu: Jedes Update bewertet, wie viel der eigenen Skizze mit der Lösung übereinstimmt. Das vorgegebene Bild liegt in gleicher Größe und an gleicher Stelle über der eigenen Ausgabe und verdeckt sie zunächst. Eine Linie teilt beide: links die eigene Zeichnung („Deins“), rechts das Ziel („Ziel“). Nach der ersten Änderung rückt die Linie in die Mitte; man zieht sie an ihrem Griff oder mit dem Schieberegler darunter. Der Bereich darunter zeigt die Übereinstimmung und die Farben des Ziels (ein Klick kopiert den Farbwert). Überlagert zeigt das Ziel halb durchsichtig über der ganzen Zeichnung, Unterschiede markiert, was nicht passt, und gedrückt gehaltenes Ziel zeigt das ganze Ziel. Ist die Aufgabe gelöst, wird das Bild grün umrandet.

Die Bewertung hat drei Teile. Farbe (die Hälfte) vergleicht jedes Pixel, auch den Hintergrund; ähnliche Farben zählen teilweise. Umriss (30 %) prüft, ob die Kanten der Formen dort liegen, wo sie im Ziel liegen. Fläche (20 %) prüft, ob sich die gezeichneten Flächen decken, gleich in welcher Farbe. Umriss und Fläche betrachten nur die Zeichnung: Eine leere Zeichenfläche bekommt dafür nichts und höchstens die Hälfte der Punkte. Was ein Pixel daneben liegt, passt trotzdem ganz. Gelöst ist die Aufgabe, wenn die Bewertung und jeder ihrer Teile pass erreichen; eine Form in falscher Farbe besteht also nicht allein durch ihren Umriss. Fährt man über die Bewertung, zeigt sie die drei Teile.

random() und noise() werden für beide gleich initialisiert, sodass auch Skizzen mit Zufall genau passen können.

Das Ziel wird gezeichnet, sobald die Aufgabe ins Bild scrollt. In der PyIDE lädt dafür Python, und der Reiter „Canvas“ ist zuerst geöffnet.

:::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);
}
```
 
:::

Statt einer Lösung kann ::file{path="target.png" src="…" role="target"} das Bild vorgeben. Ein anderswo erstelltes Bild hat andere Schriften und Kanten, eine Lösung ergibt daher meist fairere Werte. Die Lösung ist Teil der Seite; wer in den Quelltext der Seite schaut, findet sie.

Umstieg von der alten Schreibweise

Ältere Bücher laden Skizzen mit src="…" direkt am Element und zeigen den Editor mit editor=true an. Führen Sie in Ihrem Buch npx hyperbook migrate aus, um diese Seiten umzustellen; gespeicherter Code der Leserinnen und Leser bleibt dabei erhalten.