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.

function setup(){
var container = createCanvas(800,400); // Canvas erstellen
container.parent('p5container'); // an DIV-Container anhängen
mic = new p5.AudioIn(); // Mikrofoneingang anlegen
mic.start(); // Mikrofon starten
fft = new p5.FFT(); // Fouriertransformation des Signals ermöglichen
fft.setInput(mic); // Mikrofoneingang mit der FFT-Analye verbinden
}

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

function draw() {
background(255,255,255); //zeichne weißen Hintergrund

var waveform = fft.waveform(); // hole aus dem Klang alle Pegelwerte und schreibe sie
// ins Array waveform

//Oszillogramm zeichnen
noFill(); // keine Formen farblich ausfüllen (keine Füllfarbe)
stroke(225, 225, 225); // Strichfarbe auf ein helles grau 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-100); // 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.

//Spektrale Hüllkurve zeichnen
var spectrum = fft.analyze(); // mache eine Spektralanalyse in der Länge des aktuellen
// Frames und schreibe sie ins Array spectrum

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 (i = 0; i < spectrum.length; i++) { // hole in einer Schleife in der Länge
// des Arrays spectrum jeden einzelnen Wert i aus dem Array (= jede Frequenz)
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(spectrum[i], 0, 255, height, 0); // skaliere jeden Wert
// aus dem Array spectrum, 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,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 des Spektrums pro
// Frame dargestellt.

//Spektrum zeichnen
noFill(); // keine Formen farblich ausfüllen (keine Füllfarbe)
stroke(225, 225, 225); // Strichfarbe auf ein helles grau setzen
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 (= jede Frequenz)
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 h = -height + map(spectrum[i], 0, 255, height, 0); // skaliere jeden Wert
// aus dem Array spectrum, der zwischen 0 und 255 liegt, so, dass er zwischen der Höhe des Canvas
// und 0 dargestellt wird, und ziehe ihn von der Höhe des Canvas ab (damit die Amplitudenwerte für
// die einzelnen Frequenzen nicht auf dem Kopf dargestellt werden). Weise ihn dann dem Wert y zu
// (Amplituden der einzelnen Frequenzen auf der Y-Achse)
rect(x, height, width / spectrum.length, h ); // zeichne pro Frequenz ein Rechteck
// mit den Ausgangskoordinaten x und der Höhe des Canvas (= an der untere Kante), einer Breite, die
// unabhängig von der Größe des spektralen Arrays (spectrum) immer die richtige ist, um insgesamt
// den Canvas in der Breite zu füllen, und einer Höhe h.
}

}

<script>
function setup() {
var container = createCanvas(800,400);
container.parent('p5container');
mic = new p5.AudioIn();
mic.start();
fft = new p5.FFT();
fft.setInput(mic);
}

function draw() {
background(255,255,255);

//Oszillogramm zeichnen
var waveform = fft.waveform();

noFill();
stroke(225, 225, 225);
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-100);
}
endShape();

//Spektrale Hüllkurve zeichnen
var spectrum = fft.analyze();

noFill();
stroke(188, 48, 47);
beginShape();
for (i = 0; i < spectrum.length; i++) {
var x = map(i, 0, spectrum.length, 0, width*4);
var y = map(spectrum[i], 0, 255, height, 0);
vertex(x,y);
}
endShape();

//Spektrum zeichnen
noFill();
stroke(225, 225, 225);
for (var i = 0; i< spectrum.length; i++){
var x = map(i, 0, spectrum.length, 0, width*4);
var h = -height + map(spectrum[i], 0, 255, height, 0);
rect(x, height, width / spectrum.length, h );
}

}
</script>