This is an example of the map function from the p5.js library showing a face where the mouth height is proportional to the microphone volume. The volume in a computer goes from 0 to 1 and we need to scale or map the values to a different scale because 0 to 1 pixels is not visible
let mic; // Primer deixem un espai a la memòria per definir les variables, si no donem cap valor el valor és 0.
let micVariable2=10; // Això és javascript, conctretament un derivat de js anomenat p5.js que fa més facil i molt més curtes totes les instruccions.
// En js no tenim variables int, float, char, string, double, sino let que antigament i encara s'accepta s'anomenava var i acceptava qualsevol variable
// Hem de lligar aquest codi js amb el codi html, amb un codi perquè sino no entendra que significa p5.AudioIn .
let micVariable=40;
function setup(){ // S'executa 1 sola vegada i és la configuració
mic=new p5.AudioIn(); // Estem utilitzant js com un llenguatge orientat a objectes que crea objectes d'una determinada classe
// Per exemple quan j dic new p5.AudioIn() el que estic fent és crear un nou objecte anomenat mic que és de la classe p5.AudioIn dintre de la classe p5.Audio hi ha mètodes que han creat els creadors de p5.js i que puc trobar si obro p5.js.
// El primer mètode és start i l'aplico amb la sintaxi del punt, de forma que mic se li està aplicant el mètode start, que arrancarà l'objecta d'entrada d'audio anomenat mic és a dir arrancarà el microfon
mic.start();
createCanvas (800,600);//creem un canvas que es un espai per a dibuixar de 800 pixels d'ample que és el primer argument i 600 pixels és l'alçada de la zona de dubuix i és el segon argument de la funció createCanvas
//setup significa la configuració de la meva pantalla i del meu dibuix i és una funció que té dintre instruccions com createCanvas i dintre de cada instrucció hi ha els arguments o pràmetres que en aquest cas són l'amplada i l'alçada de la pantalla on dibuixaré*/
}
function draw(){ // S'executa sense para, com en Arduino, la funció void loop o en processing la funció void draw
// Guardo en una variable vol el resultat d'aplicar el mètode getlevel a l'objecte mic i si miro la documentació de getlevel veuré que és un mètode d'entrada d'audio que mesura la intensitat de la entrada d'audio i per això l'anomeno vol de volum.
// El volum va entre 0 i 1 en tots els ordenadors i he de mapejarlos.
// Jo vull per exemple un sensor de distància i que en funció de la distància s'encengui més o menys el llum, per després substituir el LED per un motor de vibració.
// En aquest exemple de volum volem que el volum sigui proporcional de la alçada de la boca. Quan escrivim micVariable=map(vol,0,1,0,400) guardem en una variable un valor que hem transformat de 0 - 1, a 0 - 400, de forma que 0,5 són 200, i 0,1 són 40, etc.
let vol=mic.getLevel();
let eyeHeight=70;
micVariable=map(vol,0,1,0,400); // ledVariable=map(distance,2,400,0,250);
// digitalwritte (13, ledVariable)
micVariable2=map(vol,0,1,0,50);
eyeHeight++;
//És una funció per dibuixar dintre té instruccions com fill que significa omplir de color, el primer paràmetre o argument és un número que correspon al color vermell, el segon paràmetre és un número que correspon al color verd i el tercerparàmetre és un número que correspon al blau. Els números van desde zero que no hi ha color fins al 255 que és el màxim . Així el color vermell pur seria fill(255,0,0); el color verd pur seria fill(0,255,0); i el blau pur seri fill(0,0,255); en el nostre cas és fill(154,0,245); té el màxim de blau, molt vermell i una mica menys de verd i això dona un color lila.Sempre es una barreja dels color bàsics que son vermell verd i blau i donen 255 per 255 per 255, igual a 16.000.000 colors diferents. El color també es pot fer d'una altra menera amb números no decimals els números decimals són del 0 al 9 i els números que utilitzrem es diuen hexadecimals(base 16): 0 al 9, A,B,C,D,F. El color FF0000
//cara
background ('white');
fill(0,0,micVariable);// L'elipse té quatre pràmetres o arguments el primer número és la posició X del centre, el segon númer és la posició Y del centre, del tercer número és l'amplada i el quart número és l'alçada. Les diferents elipses estan en diferents posicions per exemple l'ull esquerre té una alçada i amplada molt més petita que la cara i la posició del centre de l'ull que són els primers dos números han d'estar més a l'esquerre sumo 70 pixels a la X i més amunt que el centre de la cara menys 50 pixels.
ellipse (mouseX+micVariable2,mouseY,300,410);
//ull esquerre
//Per moure's amb el ratolí hem de substituir el valor del centre de la el.lipse per mouseX i mouseY. En aquest cas mouseX=400 i mouseY=300
fill(147, 0, 243);
ellipse (mouseX+70,mouseY-90+micVariable2,70,45);
console.log("micVariable=" +micVariable);
console.log("micVariable2= "+micVariable2);
//ull dret
fill(147, 0, 243);
ellipse (mouseX-70,mouseY-90+micVariable2,eyeHeight,45);
//boca
fill(147, 0, 243);
arc(mouseX,mouseY+100,110,micVariable,0,PI);
}