Computer-Microfon für Animation nutzen
![](https://scripte.matthias-edler-golla.de/content/3-wise18/2-interaction/8-p5-3/10-Sound-Abspielen-aufwaendiger/sound_animation.jpg)
Animation, die abhängig von der Lautstärke ist
Demo
Schaut Euch die Demo an…
P5
var mic;
var amp;
var scale = 1.0;
var x = -1;
function setup(){
// https://github.com/processing/p5.js/wiki/Beyond-the-canvas
// erweitert den Canvas auf die gesamte zur Verfügung stehenden Fläche
maxBreiteHoehe();
background(0);
frameRate(60);
// audio-input erzeugen und starten
mic = new p5.AudioIn();
mic.start();
// Amplitude erzeugen und mit Micro verbinden
amp = new p5.Amplitude();
amp.setInput(mic);
fill(255,0,0,40);
}
function draw(){
// Hintergrund, der langsam faded
fadeHG(0);
var lautstaerke = amp.getLevel();
scale = map(lautstaerke, 0, 1.0, 10, width);
fill(random(255),random(255),random(255),random(200));
ellipse(x, height/2 + random(-200,200), scale, scale);
// Ellipse bewegen
if ( x < width){
x = x + 5;
} else {
x = -1;
}
}
// ermittelt die zur Verfügung stehende Breite und Höhe
function maxBreiteHoehe() {
Breite = window.innerWidth;
Hoehe = window.innerHeight;
console.log(Breite + ', ' + Hoehe);
var meinCanvas = createCanvas(Breite, Hoehe);
meinCanvas.parent('meinContainer');
}
// Kreise faden langsam aus
function fadeHG(wert){
noStroke();
fill(wert,3);
rect(0, 0, width, height);
}