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 volum. The volum 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 es 0.
let micVariable2=10; //aixo es javascript, concretamen un derivat de javascript anomenat p5.js que fa mes facil i molt mes curtes totes les instruccions
//en javascript 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 el codig javascript amb el cofig html, amb un codig perque sino no entendra que s'ignifica p5.AudioIn
let micVariable=40;
function setup(){ //s'executa una sola vegada i es la configuració
mic=new p5.AudioIn(); //estem utilitzan javascrinpt com un llenguatge orientat a objectes que crea objectes d'una determinada classe.
//per exemple quan j dic new p5.ArduinoIn() el que estic fent és crear un nou objecte anomenat mic que es de la classe p5.ArduinoIn dintre de la classe p5.AudionIn hi ha mètodes que han creat els creadors
de p5.js i que puc trobar si obro p5.js
//el primer mètode es start i l'aplico amb la sintaxi del punt, de forma que a 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 parar com en Arduino, la funcio 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 veure que el un mètode d'entrada d'audio que mesura la intensitat de l'entrada
de audio i per això l'anomeno vol de volum. el volum va netre 0 i 1 en tots els ordinadors i he de mapejarlos.
//jo vull per exemple un sensor de distancia i que en funcio de la distancia se m'encengui mes o menys el llum, per despres sustituir el LED amb un motor de vibració. En aquest exemple de volum volem que
l volum sigui proporcional a l'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,255);
//digitalWrite(13"pin",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);
}