Modifier des éléments avec le micro

1/2/2019 ☼ interaction ☼ son ☼ p5js

Niveau : ★★★☆☆

Voici l’exemple à étudier sur Codepen. Les commentaires dans le code permettent de suivre les différentes étapes.

1 - Le résultat dans la page :

2 - Le code :

var mic;
var img;

function preload() {
  img = loadImage('https://map.viamichelin.com/map/carte?map=viamichelin&z=10&lat=47.9014&lon=1.90392&width=550&height=382&format=png&version=latest&layer=background&debug_pattern=.*');
}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);

  // Create an Audio input
  mic = new p5.AudioIn();

  // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

function draw() {
  background(255);
  
  // Get the overall volume (between 0 and 1.0)
  var vol = mic.getLevel();
    
  
  //la taille de l'image en fonction du micro
  var a = map(vol, 0, 1, height/2, 0);
    image(img, 0, 0, a, a);

  
    //la taille du texte en fonction du micro
    var e = map(vol, -0.2, 1, height, 0);
    strokeWeight(0);
    textSize(e);
    fill(0);
    text('Hello', -10, height);

}