This is an example of the map function from p5js library Showinga 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 diferent 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 és 0.
let micVariable2=10;//Això és JavaScript, concretament 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'anomena var i acceptava qualsevol variable.
//Hem de lligar el codi js amb el codi html amb un codi "" perquè sino no entendrà que significa p5.AudioIn
let micVariable=40;
function setup(){ // La funció setup s'executa una sola vegada
mic=new p5.AudioIn();// Estem utilitzant js com un llenguatge orientat a objectes que crea objectes d'una determinada classe
// Per exemple quan jo dic new p5.AudioIn() el que estic fent és crear un nou objecte anomenat mic 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 a mic se li està aplicant el mètode start, que arrancarà l'objecte d'entrada de audio anomenat mic.
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 la funció void loop en Arduino o void draw en Processing
// Guardo en una variable vol el resultat d'aplicar el mètode get level a l'bjecta mic i si miro la documentacióde get level veuré que és un mètode 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 ordinadors 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 a l'alçada de la boca
let vol=mic.getLevel();
let eyeHeight=70;
micVariable=map(vol,0,1,0,4000);// Quan escribim "micVariable=map(vol,0,1,0,4000" guardem en una variable un valor que hem trasformat de 0-1 a 0-400 de forma que 0,5 són 200 i 0,1 són 40...
micVariable2=map(vol,0,1,0,50);// Per el meu Led hauria de posar ledVariable=map(distance,2,400,0,255);
//DigitalWrite (13, ledvariables)
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);
}