let mic;
let eyeHeight=10;
function setup() {
  mic=new p5.AudioIn();
  mic.start();
  createCanvas(600,400);
}
function preload(){
apropat=loadsound("https://od.lk/s/NjVfNTg5ODk5MDVf/apropat.mp3");
apropat=loadsound("https://od.lk/s/NjVfNTg5ODk5MDNf/noapropis.mp3");
}
function draw() {
  let vol=mic.getLevel
  mouthHeight=map(vol0,1,0,400);
  let distance=dist(mouseX,mouseY,300,200);
  if(distance<100){text("NO TE ACERQUES",20,20);}
  else{text("acercate",20,40)}
  if(mouseIsPressed){
  eyeHeight++;
  if(eyeHeight>70){eyeHeight=10}
  //background(220);
fill(224, 238, 10);
  ellipse(300,200,250,300);// cara
fill(0,0,0);
  ellipse(250,150,40,70);// ojo izquierdo
  ellipse(350,150,40,eyeHeight);// ojo derecho
  fill(0,0,0) ;
arc(width/2,height/2+50,100,35,PI,0);// boca 
  }else{
 // background(220);
fill(238, 10, 210);
  ellipse(300,200,250,300);// cara
fill(6, 247, 193);
  ellipse(250,150,40,70);// ojo izquierdo
  ellipse(350,150,40,eyeHeight);// ojo derecho
  fill(238, 21, 10) ;
arc(width/2,height/2+50,100,35,0,PI);// boca 
 }
}

a la linia 1 i 2 explicaquin tipus de documentes: html, significa Hipertext markup language,en catala llenguatge de marques (<>) de hipertext vol dir que va mes enlla del text, imatges, videos, microfon ,camera, teclat, ratoli

la linea 4 hi a head, que vol dir encapçalament, que es la part del codi que es obligatori de posar al principi

a la linea 5 i la 6 hi ha codis meta, que significa metainformacio, que vol dir informacio sobre la informacio

la linia 5 ens dona metainformacio de caracters, significa conjunt de caracters es a dir, les lletres i els numeros que acepta el codi, per exemple: alfabet llati i grec

A la linia 6 hi ha un codi meta que fa el disseny adaptable (responsive desing) es a dir, que es pugui veure be en altres dispositius (mobil, tablet, pc, televisio, pantalla de cinema). Aixo es degut a que posa en el codi width= devicewidth que significa que la amplada de que estem fent es igual a l'amplada del aparell

A la linia 7 hi ha una etiqueta o tag en angles, que posa title. Serveix per posar titol al nom de la pestanya. Una pestanya es una pagina web que apareix en el navegador

De la linia 8 a la linia 13 hi ha una etiqueta de estil que dintre del body o cos, posa que el margin i el padding ha de ser 0 i aixo vol dir que el marge interior i exterior sigui nul es a dir que no hi hagi

De la linia 14 a la 18 tenen en comu les etuiquetes script y src. Script significa un tipus de llenguatge diferent concretamen javascript que permet conectar amb uns arxius del mateix tipus javascript que es troben en un altre lloc d eneocities o en un altre lloc web. src significa source, que vol dir el lloc on es troba allotjat. a la linea 32 hi ha un exemple de com sa de posar una imatge, necesites la etiqueta ing que vol dir imatge Despres la etiqueta hi ha unes paraules o propietats La primera propietat que apareix es diu src que vol dir source ,es a dir el nom de la imatge