This is an example of the map fuction from the p5.js library showin 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 deixemun espai a la memòria per definir les variables, si no donem cap valor, el valor és 0.
let micVariable2=10; //Això és javascript, concretament un derivat de js anomenat p5.js que fa més fàcil i molt més curtes totes les instruccions.
let micVariable=40;
//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 aquest codi js amb el codi html, amb un codi perquè sino no entendrà que significa p5.AudioIn.
function setup(){ //S'executa només una vegada i és la configuració
mic=new p5.AudioIn(); //Aqui estem utilitzan javascript 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, dins d'aquesta classe 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 en la sintaxi del punt, de forma que mic se li està
aplicant el mètode start que arrancarà l'objecte d'entrada de audio anomenat mic, és a dir, que arrencarà el micròfon*/
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() o en processing la funcio void draw()
let vol=mic.getLevel();
/* Guardo en una variable vol el resultat d'aplicar el mètode getlevel a l'objecte mic i, si miro la documentació d'aquest level, veuré que és un mètode d'entrada
d'audio que mesura la intensitat de l'entrada d'audio, i per això l'anomeno vol (volum). El volum va entre 0 i 1 en tots els ordinadors i he de mapejar-lo*/
//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 l'alçada de la boca. Quan escrivim micVariable=map(vol,0,1,0,80000); , guardem en una variable
un valor que hem transformat, de 0-1 a 0-400, de forma que 0,5 és 200 i 0,1 és 40, etc.*/
let eyeHeight=70;
micVariable=map(vol,0,1,0,400);
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);
}