P5.js Sampler

P5.js

«p5.js ist eine JavaScript-Library für kreatives Coding, mit dem Fokus darauf, Coding für Künstler, Designer, Pädagogen, Anfänger und alle anderen zugänglich zu machen! p5.js ist kostenlos und open-source, weil wir glauben, dass Software und die Werkzeuge, um sie zu erlernen, für jeden zugänglich sein sollten. […] Du kannst dir deine gesamte Browserseite als Skizze vorstellen, einschließlich HTML5-Objekten für Text, Eingabe, Video, Webcam und Sound.»

So stellen die Macher von p5.js die Library auf der eigenen Website vor. Die Library ermöglicht es dir, über ihren Web-Editor interaktive, Browser-basierte Applikationen erschaffen kannst. Ihre Vorteile sind die Zugänglichkeit, die öffentliche, detaillierte Dokumentation und die lebendige, hilfsbereite Community.

Du kannst p5.js beispielsweise nutzen in dem du direkt auf die p5.js-Website gehst, dich dort anmeldest und ein Projekt erstellst. In diesem Recipe werden wir aber einen anderen Weg einschlagen.

Falls du noch keine Programmier-Erfahrung hast, findest du auf der Website eine Serie von Tutorials, welche dir die Grundlagen von p5.js erklären.

Glitch.com

Glitch.com ist eine kollaborative Webentwicklungsplattform, die es Benutzern ermöglicht, Webanwendungen in Echtzeit zu erstellen und zu teilen. Das heisst, du kannst beispielsweisse p5.js-Projekte dort hosten und auch für andere zugänglich machen.

Um den Dienst zu nutzen, musst du zuerst bei Glitch.com einen Account erstellen und dich dann anmelden.

Das Erstellen eines Kontos ist kostenlos und erlaubt dir, Projekte, mit bis zu 200 MB Grösse zu erstellen. Dabei kannst du auf 512 MB RAM zurückgreifen. Zudem erhältst du 1000 Stunden pro Monat, in denen du an deinen Scripts arbeiten kannst. Falls du mehr Zeit, Speicherplatz oder Leistung benötigst, gibt es die Möglichkeit, auf ein bezahltes Pro-Model umzusteigen.

Ausserdem kannst du auch mit einem kostenlosen durch die Remix-Funktion deine eigenen Scripts teilen und bestehende Arbeiten aus der ganzen Community nutzen. Konkret bedeutet «Remix» in diesem Fall, dass eine Kopie eines bereits bestehenden Scripts in deinem Arbeitsbereich erstellt wird. Auf dieses hast du im Anschluss Zugriff und kannst es nach Belieben anpassen.

Sampler

Sobald du dich bei Glitch.com angemeldet hast, kannst du unser Sampler-File aufrufen und es remixen. Klicke dafür auf den Remix-Button am rechten, oberen Rand des Projektes. Danach wird deine eigene Version des Scripts erstellt und geöffnet. Diese kannst du nun bearbeiten und anschliessend von deinem Dash-Board darauf zugreifen.

Als erstes solltest du deinem Projekt unter Settings > Edit project details einen neuen Namen und eine Beschreibung geben. Danach kannst du anfangen, die einzelnen Scripts des Samplers zu bearbeiten. Denke daran, dass alle Änderungen auf Glitch.com automatisch gespeichert werden. Sichere dein Projekt vor Umstrukturierungen also gut ab, in dem du es beispielsweise duplizierst.

HTML

Das erste File, aus dem dein Projekt besteht, ist index.html. HTML (Hypertext Markup Language) wird dazu genutzt, Inhalte auf einer Webseite zu strukturieren. Hier implementieren wir also Dinge wie Text-Blöcke, Bilder, oder Buttons.

Da wir in diesem Projekt aber alle unsere interaktiven Elemente im p5.js-File erstellen, bleibt das Index-File in diesem Fall recht kurz. Wir linken nur die das style.css- und sketch.js-Script mit unserem HTML-File und fügen die p5.js-Sound-Library hinzu.

JavaScript (p5.js)

Hier passiert die Magie. JavaScript (oder in unserem Fall, die JavaScript-Erweiterung, p5.js) wird genutzt, um das Verhalten deiner Website zu steuern und Interaktivität zu implementieren.

Damit dein Sampler funktioniert, musst du als erstes eine Änderung am Pfad vornehmen. Der ändert sich nämlich, sobald du das Projekt remixt und damit deine eigenen Files mit eigenen Pfaden erstellst. Öffne darum deinen Assets-Folder, in dem du im Menü auf der linken Seite Assets auswählst. Klicke danach auf eines deiner Files. Kopiere danach den Teil des URLs vor dem File-Namen, bis und mit zum letzten Forward-Slash (/).

Danach gehst du zurück sketch.js. Hier ersetzt du nun die Variable Path mit deinem eigenen Pfad. Behalte die Anführungszeichen vor und nach dem URL bei.

Sobald du dies angepasst hast, kannst du den Sampler nutzen, in dem du auf Preview > Open preview pane klickst und eine Vorschau des Projekts öffnen.

Dort kannst du den Sampler ausprobieren. Vergiss nicht, jedes Mal den Update-Button (die zwei Pfeile am rechten, oberen Rand des Vorschau-Fensters) zu drücken, wenn du Änderungen am Projekt vornimmst und diese Testen willst.

Du wirst sehen, dass der Sampler aus einem Record-Button, 9 Play-Buttons und 9 Slidern besteht. Die Play-Buttons spielen ein Sound-File ab, wenn du sie anklickst oder die entsprechende Taste (1-9) auf deinem Keyboard drückst. Die Zahl innerhalb der Buttons zeigt die Wiedergabe Geschwindigkeit des Samples in Prozent. Die Default-Einstellung ist 100%, was der regulären Geschwindigkeit des Files entspricht. Mit den Slidern neben den jeweiligen Buttons kannst du die Geschwindigkeit anpassen. Zuoberst im Projekt kannst du den Record-Button finden. Seine Funktion kannst du nutzen, um eigene Sounds für den Sampler aufzunehmen. Drücke den Knopf einmal, um eine Aufnahme zu starten, und ein zweites Mal, um sie zu beenden. Das so entstandene Sound-File wird in deinem Download-Folder gespeichert, wo du es umbenennen kannst. Zurück im Projekt kannst du nun die Assets aufrufen und deine Datei dort hochladen. Gehe danach zum sketch.js. und ersetze in der Liste soundNames (in den globalen Variablen) den Namen des Sound-Files, das du ersetzen willst, mit dem Namen deines eigenen WAV oder MP3.

Lass uns nun den Code selbst etwas genauer anschauen. Das Script besteht aus 4 Haupteilen:

• Globale Variablen – Noch bevor irgendeine Funktion Als erstes benennen und definieren wir die Variablen, mit denen wir arbeiten werden.
• preload() – Hier werden alle Funktionen untergebracht, die noch vor Beginn des Scripts ausgeführt werden müssen. Dazu gehört das Laden von Assests – in unserem konkreten Fall, Sound-Files.
• setup() – Ins Setup gehört der Code, der nur einmal ausgeführt wird. Beim Sampler ist es die Erstellung von Audio-Input- und Recorder-Objekten sowie die Implementierung von Buttons und Slidern. Des Weiteren bestimmen wir hier die Position unserer visuellen Elemente, basierend auf den Variablen, die wir bereits festgelegt haben.
• draw() – Die Draw-Funktion ist ein Loop, der permanent wiederholt wird. Hierhin kommt der Code, der ständig upgedated werden muss – wie Interaktivität und sich verändernde Werte. Das sind in unserem Script vor allem die Funktionalität von Slidern und Buttons. So werden beispielsweisse die Werte jedes Sliders permanent neu abgegriffen und an die entsprechenden Buttons weitergeleited.

CSS

CSS steht für Cascading Style Sheets. Es ist eine Sprache, mit der man das Aussehen und Layout von Web-Projekten steuern kann. CSS diktiert dem Browser, wie dieser Inhalt dargestellen soll.

In Falle des Sampler siehst du also zum Beispiel, das Farb-Styling des Hintergrundes, der Buttons und der Sliders. Wie du im p5.js-Script schon gesehen hast, ist es auch möglich, von dort aus Styling-Optionen anzuwenden. Wir bestimmen also in unserem CSS-Code, wie etwas grundlegen aussehen wird. Sollen sich Style-Variablen aber bei Interaktion anpassen, macht es Sinn, dies im p5.js-Code unterzubringen.

Wie weiter

All diese Dokumente arbeiten nun zusammen, um den Sampler zu bilden. Du kannst alle dieser Elemente nach Belieben anpassen. Natürlich kannst du unsere Files auch als Vorlage für ganz andere p5.js-Projekte auf Glitch nutzen.

Sobald du zufrieden mit allem bist, kannst du dein Projekt auf deiner Ziel-Maschine aufrufen. Gehe dazu in die Vorschau des Samplers (Preview > Open preview pane). Dort findest du den URL deines Projektes durch einen Klick auf die drei Punkte am rechten Bildrand.

Sobald du ihn gespeichert hast, kannst du von allen PCs mit Internetanschluss auf den Sampler zugreifen. Kopiere dazu nur den Link zum Projekt in die Adress-Zeile des gewünschten Browsers.