This is an exemple of the map function from the p5.js library showing a face where the mouth height is proporcional to the microphone volume. The volume in a computergoes from 0 to 1 and we need to scale or map the values different scale became 0 to 1 pixels is et variable
let mic; //Deixem un espai a la memoria per definir les variables, si no donem cap valor, el valor es 0
let micVariable2=10; //Això es JavaScript anomenat p5.js que fa més facil i mes curtes totes les instruccions
//En js no tenim int, float, char, stinin, double, sino let que anigament i encara s'accepta s'anomenava var i acceptava quelsevol variable.
//Hem de lligar el codi js amb el codi html, amb un codi perqué sono 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 utilitzan js com un llenguatge orientat a objectes que crea objectes d'una determinada classe
//Quan jo dic new.p5.AudioIn() el que estic fent és crear un nou objecte anomenat mic que es de la classe p5.AudioIn dintre de la classe p5.AudioIn hi ha mètodes que han creat els creadors de ps.js i que puc trobar si obro p5.js
// El primer mètode es start i l'aplica amb la sintaxis del punt, de forma que mic se li està aplicant el mètode start, que arrancarà l'objecte 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 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 gelevel veuré que és un métode d'entrada d'audio que mesura la intensitat de la entrada d'audio i per això l'anomenem
//El volum va entre 0 i 1 en tots els ordinadors i he de mapeejarlos
//Jo vull per exemple un sensor de distancia i que en funció de la distancia s'ensengui 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(ledintensity,0,1,400) guardem en una variable un valor que hem transformat de 0 - 1 - 400, de forma que 0,5 son 200 i 0,1 son 40, son 40, etc
let vol=mic.getLevel();
let eyeHeight=70;
micVariable=map(vol,0,1,0,80000); //ledVariable=map(distance 2,400,0,250)
//digitalwrite (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);
}