Christoph Reuter: p5 und p5.sound

P5 ist eine Javascript-Library mit dessen Hilfe man sehr schnell und sehr einfach komplexe Programmieraufgaben lösen kann. Durch die Erweiterung P5.sound ist sie für die Musikwissenschaft besonders interessant.

Grundlage für die Arbeit mit P5 ist das mit HTML5 eingeführte "Canvas-Prinzip", in dessen Rahmen ein Bereich auf der Webseite quasi als Leinwand gilt, auf der beliebig programmierbare Aktionen möglich sind.

Die mit P5 erstellten Scripte benötigen häufig eine Server-Umgebung, um lauffähig zu sein, d.h. das Ergebnis kann man erst sehen, wenn man alles auf einen Server geladen hat. Unter https://editor.p5js.org/ gibt es eine online-Umgebung, um Scripte direkt auszuprobieren. Für die Wiener Musikwissenschaft wurde deswegen unter https://muwiserver.synology.me:444 eine Testumgebung eingerichtet, in der Studierende jeweils einen Ordner mit ihrem Namen anlegen können und eigene Scripte ausprobieren können. Über das ftp-Programm FileZilla können die Daten hochgeladen werden, der Zugang ist:

Server: muwiserver.synology.me
Benutzername: Student
Passwort: [wird im Unterricht verraten]
Port: 22

Im folgenden Beispiel befinden sich die beide Dateien (p5.js und p5.sound.js) in dem Ordner "header", der sich am gleichen Ort wie die index.htm-Datei befindet. Das Grundgerüst der index.htm-Datei sieht dann folgendermaßen aus:

Eine typische P5-Anwendung hat meist 3 Abschnitte, die durch Funktionen gekennzeichnet sind:

function preload(){ ... }
// für Dateien wie Bilder, Video, Audio etc., die vorab geladen werden
function setup (){ ... }
// für die Festlegung des Canvas und verschiedener Grundeinstellungen
function draw () { ... }
// für alle Aktionen die während des Programms im Canvas passieren

Das typische Grundgerüst für eine komplette index.htm-Datei für die Arbeit mit P5 sieht dann wie folgt aus:

function setup(){
var container = createCanvas(800,400); // Canvas erstellen
container.parent('p5canvas'); // Canvas an Container auf der Seite anhängen
fft = new p5.FFT(); //evtl. FFT-Funktion für Arbeit mit Klang starten
sound.amp(0.5); // evtl. grundlegende Einstellung für Verstärkung des Klangs
}

function draw(){
background(255, 255, 255);
// [ ... ]hier verschiedenste Befehle/Aktionen
}

</script>

// hier via DIV-Tags einen Container erstellen, an den der von P5 erzeugte Canvas angehängt werden
// kann, dieser kann beliebig via style gestaltet werden):
<DIV id="p5canvas" style="width:800;border: 1px solid #333;box-shadow: 8px 8px 5px #444;padding: 8px 12px;background-color:ffffff"></DIV>

</body>
</html>

Mit Hilfe der P5.sound Erweiterung lassen sich Klänge sowohl analysieren/visualisieren als auch erzeugen, wie z.B.

P5 und ML5 für Bewegungs- und Objekterkennung
ML5 ist eine Machine Learning Library, die auf sehr einfache Weise mit Javascript und/oder P5 verknüpft werden kann und die Erkennung von Personen, Bewegungen, Objekten etc. erlaubt sowie auch künstlerisch spannende Dinge wie Style-Transfer von Bildern o.ä. ML5 lässt sich erstaunlich vielseitig einsetzen, und relativ einfach in P5 einbinden: