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);
}