Christoph Reuter: p5 und p5.sound - FFT 3D Waterfall

P5 und P5.sound - 3D Waterfall Display (kontinuierlich)

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

<script src="header/p5.js"></script>
<script src="header/p5.sound.js"></script>

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

<DIV id="p5container"></DIV>

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

<DIV id="p5container" style="width:800;border: 1px solid #333;box-shadow: 8px 8px 5px #444;padding: 8px 12px;background-color:ffffff"></DIV>

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

function preload(){
sound = loadSound('klang/fagott_toene.mp3');
}

Dann werden in der Funktion setup() die Grundkomponenten festgelegt:

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(0.5); // Amplitude des vorausgeladenen Klangs "sound" auf die Hälfte reduzieren
}

Außerhalb der setup()-Funktion und vor der darauffolgenden draw()-Funktion wird ein Array definiert, in das die Spektren pro Frame hineingeschrieben werden:

var alle_spektren_array=[];

Dazu wird ein Schalter definiert, um sicherzugehen, dass nur dann das Spektrum gezeichnet wird, wenn auch der Klang abgespielt wird:

var schalter=0;

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 spectrum = fft.analyze(); // mache eine Spektralanalyse in der Länge des aktuellen
// Frames und schreibe sie ins Array spectrum
noFill(); // Flächen sollen nicht ausgefüllt werden (keine Füllfarbe)
if (schalter==1){ // sobald der Klang abgespielt wird (s.u.), mache folgendes:
alle_spektren_array.unshift(spectrum); //füge das aktuell analysierte Spektrum (spectrum) dem Array alle_spektren_array vorne als jeweils erstes Spektrum hinzu
if (alle_spektren_array.length>40){ // sobald das Array alle_spektren_array mehr als
// 40 Spektren hat:
alle_spektren_array.pop(); // entferne das letzte Spektrum aus dem Array
}
for (j =0; j<alle_spektren_array.length; j++){ // für alle Spektren im Array
// alle_spektren_array, die über den Zähler j angesprochen werden, mache folgendes:
aktuelles_spektrum=alle_spektren_array[j]; // nimm das jeweilige Array und übergebe
// es der Variablen aktuelles_spektrum
beginShape(); // das Zeichnen einer Form beginnen
for (var i = 0; i < spectrum.length; i++){ // hole in einer Schleife in der Länge
// des Arrays spectrum jeden einzelnen Wert i aus dem Array (= jeden Frequenzbereich)
if (j==0) { // wenn das erste Spektrum aus dem Array alle_spektren_array gewählt wird:
stroke(0,0,0); // Strichfarbe ist schwarz
strokeWeight(2); // Strichdicke ist 2
} else { // in allen anderen Fällen
stroke(188,48,48); // Strichfarbe ist dunkelrot
strokeWeight(0.5); // Strichdicke ist 0,5
}
var x = map(i, 0, spectrum.length, 0, width*4); // skaliere die aufsteigend
// gezählten Zahlen i (von 0 bis Ende des spectrum Arrays) so, dass sie von 0 bis zur vierfachen
// Weite des Canvas dargestellt werden (da in den höheren Frequenzanteilen so gut wie keine
// Amplituden sind) und weise sie der Variablen x zu (Frequenz auf der X-Achse).
var y = map(aktuelles_spektrum[i], 0, 255, height, 0); // skaliere jeden Wert
// aus dem Array aktuelles_spektrum, der zwischen 0 und 255 liegt, so, dass er zwischen der Höhe
// des Canvas und 0 dargestellt wird. Weise ihn dann dem Wert y zu (Amplituden der einzelnen
// Frequenzen auf der Y-Achse)
vertex(x+5*j,y-5*j);// weise x und y als Koordinaten eines Punkts zu, der einen
// Eckpunkt der dazustellenden Gesamtform (via beginshape(); s.o.) beschreibt. Durch die Addition
// bzw. Subtraktion mit den ansteigenden Zahlen aus dem Zähler y wird der Beginn Punkts (und damit
// die ganze Hüllkurve) mit jedem Schritt etwas weiter nach rechts und nach oben verschoben.
}
endShape(); // Schließe die Gesamtform ab, in ihr ist dann ein Ausschnitt des Spektrums pro
// Frame dargestellt, der dann immer weiter nach rechts oben verschoben wird.
}
}
if (sound.isPlaying()) { // wenn der Klang "sound" gespielt wird
schalter=1; // setze die Variable schalter auf 1
} else { // in allen anderen Fällen
schalter=0; // Setze die Variable schalter auf 0
}
}

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
alle_spektren_array=[]; // leere das Array für alle Spektren
sound.play(); // spiele ihn ab.
}
}

Insgesamt sieht das Script dann folgendermaßen aus:

<script src="header/p5.js"></script>
<script src="header/p5.sound.js"></script>

<script>
function preload(){
sound = loadSound('klang/fagott_toene.mp3');
}

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

var alle_spektren_array=[];
var schalter=0;

function draw(){
background(255, 255, 255);
cursor(HAND);
var spectrum = fft.analyze();
noFill();
if (schalter==1){
alle_spektren_array.unshift(spectrum);
if (alle_spektren_array.length>40){
alle_spektren_array.pop();
}
for (j =0; j<alle_spektren_array.length; j++){
aktuelles_spektrum=alle_spektren_array[j];
beginShape();
for (var i = 0; i< spectrum.length; i++){
if (j==0) {
stroke(0,0,0);
strokeWeight(2);
} else {
stroke(188,48,48);
strokeWeight(0.5);
}
var x = map(i, 0, spectrum.length, 0, width*4);
var y = map(aktuelles_spektrum[i], 0, 255, height, 0);
vertex(x+5*j,y-5*j);
}
endShape();
}
}
if (sound.isPlaying()) {
schalter=1;
} else {
schalter=0;
}
}

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

<DIV id="p5container" style="width:800;border: 1px solid #333;box-shadow: 8px 8px 5px #444;padding: 8px 12px;background-color:ffffff"></DIV>