P5.js und Glitch: Die Wiederentdeckung (m)eines Spielplatzes

Da hatte ich mir doch vor über zwei Jahren mit relativ großem Tam-Tam einen Spielplatz auf Glitch 🎏 zugelegt, dem freundlichen (und in der Grundversion kostenlosen) Community-Webhoster – und ihn dann relativ schnell wieder vergessen. Doch während meiner Recherchen zu P5.js-Online-Editoren rückte der Dienst wieder in meinen Fokus.

Ich stolperte nämlich über das Einführungsvideo zur Playlist »Data as Material«, in dem David Bouchard erläutert, warum er für diesen/seinen P5.js-Kurs Glitch gegenüber dem P5.js-Webeditor den Vorzug gibt. Mich überzeugten drei Gründe:

1. Glitch zeigt den Code und den Canvas nicht unbedingt in einem Browserfenster an (wie im Screenshot im Bannerbild oben), sondern man kann das Ergebis (die fertige Website) auch in einem separaten Browserfenster anzeigen lassen.
2. Die umgebende index.html kann aus einer beliebig komplexen Website bestehen. Daher kann man zum Beispiel auch Experimente mit der DOM-Bibliothek durchführen oder mehrere Sketche auf einer Website implementieren.
3. Und das gab bei David Bouchard wohl den Ausschlag: Glitch bietet von Haus aus einen Zugriff auf einen Node.js-Server an. Damit kann man, wie er in seiner oben verlinkten Playlist zeigt, auf diverse APIs zugreifen und mit diversen Webservices kommunizieren, ohne einen eigenen Node.js-Server betreiben zu müssen.

Allerdings bekommt man den Komfort nicht völlig geschenkt: Glitch kennt von Hause aus P5.js nicht und zeigt daher im Editor viele hässliche Warnungen an. Um diese abzuschalten, bietet David Bouchard auf Glitch in seinem Blanko-P5.js-Template eine .eslintrc.json an. Mir ist selber nicht ganz klar, was diese bewerkstelligt, aber es funktioniert – die Warnungen sind weg.

Ich habe für Euch und für mich eine eigene P5.js-Blanko-Template-Version inklusive der .eslintrc.json auf Glitch erstellt, die Ihr (und die ich) für Eure/meine P5.js-Projekte nur remixen müßt und dann könnt Ihr loslegen. Meine Version ist fast genau so schlank wie die von David Bouchard (ich habe aus seinem Video gelernt, was man alles von dem Default-Website-Template von Glitch nicht braucht und wegwerfen kann), aber ich wollte, daß die Webseite auch nach einem Download auf Euren/meinen Rechnern ohne Internetverbindung lauffähig ist. Daher habe ich eine p5.min.js in das Template hochgeladen und sie nicht via eines CDN eingebunden. Habt viel Spaß damit, ich denke, ich werde das auch haben.

Für die Zukunft plane ich noch je ein Template mit P5.play (wahlweise mit P5.js oder Q5.js als darunterliegender Engine) und eventuell – je nachdem wie Q5.js sich bewährt – auch noch ein Template mit Q5.js pur. Aber erst einmal habe ich zu tun!