P5.js-Widget: Einen P5.js-Editor in die eigene Website einbauen

Bei der gestrigen Vorstellung des interaktiven Buches »Synchrony« von Nick McIntyre habe ich mich gefragt, wie der Autor es nur geschafft hat, einen kompletten, voll funktionsfähigen P5.js-Editor in seine Seiten einzubinden. Ich habe nur eine kurze Recherche benötigt, um dies herauszubekommen. Und das Tollste an dieser Lösung ist: Nicht nur Nick McIntyre kann es, sondern auch der »Happy Coder« Kevin Workman kann es, der Schockwellenreiter kann es und Ihr da draußen könnt es auch. Kurzum: Jeder kann es!

Die Lösung heißt »P5.js-Widget« und ist – einmal in Eure Webseite eingebunden – ein voll funktionsfähiger Editor für P5.js-Sketche. Ihr könnt den Quellcode verändern und sofort und gleich online die Auswirkungen Eurer Änderungen kontrollieren. Es ist schon ein cooles Teil.

Um es zu nutzen, müßt Ihr bloß dieses Teil JavaScript mit

<script src="//toolness.github.io/p5.js-widget/p5-widget.js"></script>

in Euren Seitenquelltext einbinden. (Bisher habe ich leider noch nicht herausbekommen, wie man das Teil selber hostet, was aber sicher möglich ist. Bis Ihr oder ich das herausgefunden habt, müßt Ihr den Machern von toolness vertrauen). Solltet Ihr die Seite offline aufrufen, findet Ihr hier einen Screenshot.

Das Widget im Banner habe ich dann mit diesem Stück JavaScript eingebaut:

<script type="text/p5" data-autoplay data-preview-width="400" data-height="400">
let x
let r = 60

function setup() {
  createCanvas(400, 320);
  x = -r;
}

function draw() {
  background(45, 45, 45);
  fill(255, 212, 121)
  ellipse(x, height/2, r, r);
  x += 1;
  
  if (x >= width + r) {
    x = -r;
  }
}
</script>

Bei der data-height mußte ich 80 Pixel für die Ränder des Widgets oben und unten abziehen. Die data-preview-width gibt dagegen die exakte Weite des Canvas an. Bei data-preview-width="400" und data-height="400" ist also der Canvas 400x320 Pixel groß. Und mit data-autoplay startet Euer Sketch sofort nach dem Laden.

Die Weite des Widgets richtet sich nach der Weite des einschließenden Containers. Und alles, was Ihr sonst noch wissen müßt, findet Ihr auf der Webseite des Projekts dokumentiert.

Was gibt es sonst noch dazu zu sagen? Das Teil ist Open Source (LGPL-2.1) und den Quellcode gibt es auf GitHub. Habt also Spaß damit – ich werde ihn bestimmt haben.

(Kommentieren)