This is an example ofthe map function from the p5.js libreryshowing a face where the mouth height is proporcional to the microphone volume. The volume in a computer goes from 0 to 1 and we need o scale o map the values to a different scale because 0 to 1 pixel is not visible (400pxl)
let mic;
//Primer deixem un espai en la memòria per definir les variables, si no dome cap valor és 0.
let micVariable2=10;
//Això és javascript, concretament un derivat anomenat p5.js que fa més fàcil i més curtes tptes les instruccions.
//En javascript no tenim variables int, float, cahr, string, double, sino let que antigament i encara s'acccepta s'anomenava var i acceptava qualsevol variable.
//Hem de lligar aquest codi javascript amb el codi html, amb un codi , perquè sino no entendrà que significa per exemple " p5.AudioIn".
let micVariable=40;
function setup(){
//S'executa només una vegada.
mic=new p5.AudioIn();
//Este utilitzan javascript com a un llenguatge orientat a objectes que crea objectes de una determianda classe
//Per exemple quan jo 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.AudioIn hi han mètodes que han creat els creadors de p5.js i que puc trobar si obro p5.js.
//El primer mètode és strat i la aplico amb la sintaxi del punt de forma que a mic se li esta aplican el mètode strat, que arrancarà el objecte d'entrada de Audio anomenat mic, és a dir arrancarà el Microfoon.
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 funció void draw.
let vol=mic.getLevel();
//Guardo en una variable vol el resultat d'applicar el mètode getlvel a l'objecte mic i si miro la documentació de getlevel veuré que ès un mètode que mesura la intensitat de l'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 sesnor de distància i que em funcioni la distància s'encengui més o menys la llum, per després substituir el LED per un motor de vibració.
//En aquet exemple de volum, volem que el volum sigui proporcional a l'alçada de la boca. Quan escribim "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 40, etc.
let eyeHeight=70;
micVariable=map(vol,0,1,0,400);
//ledVariable=map(distance,2,400,0,250);
//digitalwritte (analogwritte)(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);
}
>