Christoph Reuter: p5 und p5.sound

Zunächst werden im <head> der Seite die beiden Scripte für P5 und P5.sound eingebunden:

Dann wird im <body> der Seite ein Container mit einer eindeutigen id mithilfe von DIV-Tags angelegt, in dem alles angezeigt werden soll. Dies geschieht via

über Style-Eigenschaften kann man diesen noch weiter im Aussehen verändern, z.B.

Das dazugehörende Script ist wie fast alle P5 Scripte aufgebaut:
Erst werden über ide Funktion preload() größere Dateien vorausgeladen:

function setup(){
var container = createCanvas(800,400); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
container.mouseClicked(togglePlay); // auf Klick auf Canvas reagieren
fft = new p5.FFT(); // Fouriertransformation des Signals ermöglichen
sound.amp(1); // Amplitude des vorausgeladenen Klangs "sound" aufs Maximum stellen
}

Möchte man anstelle des Audiobeispiels "sound" den Mikrofoneingang verwenden, so schreibt man unter fft = new p5.FFT(); anstelle von sound.amp(1);

mic = new p5.AudioIn(); // Audio-Input der Variablen mic zuweisen
mic.start(); // den Audio-Input starten
fft.setInput(mic); // den Audio-Imput zur FFT-Analyse leiten

Daraufhin wird in der Funktion draw() beschrieben, was im Canvas dargestellt werden soll:

function draw(){
background(255, 255, 255); //zeichne weißen Hintergrund
cursor(HAND); // zeige den Cursor als Hand
var waveform = fft.waveform(); // hole aus dem Klang alle Pegelwerte und schreibe sie
// ins Array waveform
noFill(); // keine Formen farblich ausfüllen (keine Füllfarbe)
stroke(188, 48, 47); // Strichfarbe auf ein dunkles rot setzen
beginShape(); // das Zeichnen einer Form beginnen
for (var i = 0; i < waveform.length; i++){ // hole in einer Schleife in der Länge
// des Arrays waveform jeden einzelnen Wert i aus dem Array
var x = map( i, 0, waveform.length, 0, width); // skaliere die aufsteigend
// gezählten Zahlen i (von 0 bis Ende des waveform Arrays) so, dass sie von 0 bis zur Weite des
// Canvas dargestellt werden und weise sie der Variablen x zu (Zeit auf der X-Achse).
var y = map( waveform[i], -1, 1, 0, height);// skaliere jeden Wert aus dem
// Array waveform, der zwischen -1 und 1 liegt, so, dass er zwischen 0 und der Höhe des Canvas
// dargestellt wird, und weise ihn dem Wert y zu (Amplitude auf der Y-Achse)
vertex(x,y); // weise x und y als Koordinaten eines Punkts zu, der einen Eckpunkt der
// dazustellenden Gesamtform (via beginshape(); s.o.) beschreibt.
}
endShape(); // Schließe die Gesamtform ab, in ihr ist dann ein Ausschnitt der Wellenform pro
// Frame dargestellt.
}

Schließlich wird mit der Funktion togglePlay() beschrieben, was passieren soll, wenn auf den Canvas geklickt wird

function togglePlay() {
if (sound.isPlaying()) { // wenn der Klang "sound" gespielt wird
sound.pause(); // stoppe ihn
} else { // in allen anderen Fällen
sound.play(); // spiele ihn ab.
}
}

function setup(){
var container = createCanvas(800,400);
container.parent('p5container');
container.mouseClicked(togglePlay);
fft = new p5.FFT();
sound.amp(1);
}

function draw(){
background(255, 255, 255);
cursor(HAND);
var waveform = fft.waveform();
noFill();
stroke(188, 48, 47);
beginShape();
for (var i = 0; i < waveform.length; i++){
var x = map(i, 0, waveform.length, 0, width);
var y = map( waveform[i], -1, 1, 0, height);
vertex(x,y);
}
endShape();
}

function togglePlay() {
if (sound.isPlaying()) {
sound.pause();
} else {
sound.play();
}
}
</script>