let eyeHeight = 10;
let mouthHeight=35;
let mic;
function setup() {
  createCanvas(600,400);
  mic = new p5.AudioIn();
   // start the Audio Input.
  // By default, it does not .connect() (to the computer speakers)
  mic.start();
}

//function preload(){
//apropat=loadsound("https://od.lk/s/NjVfNTg5ODk5MDVf/apropat.mp3");
//apropat=loadsound("https://od.lk/s/NjVfNTg5ODk5MDNf/noapropis.mp3");
//}
function draw() {
  // Get the overall volume (between 0 and 1.0)
  let vol = mic.getLevel();
  let mouthHeight= map(vol, 0, 1, 0, 800);
  
  let distance=dist(mouseX,mouseY,300,200);
  if(distance<100){
    text("No t'apropis",20,20);
    speechSynthesis.speak(new SpeechSynthesisUtterance("No t'apropis"));
 
  }else{text("Apropa't",20,40);
  audio=new Audio("https://od.lk/s/NjVfNTg5ODk5MDVf/apropat.mp3");
  audio.play();
    
    }
  if(mouseIsPressed){
  eyeHeight++;
  if(eyeHeight>70){eyeHeight=10}
  //background(220);
fill(224, 238, 10);
  ellipse(width/2,height/2,250,300);// cara
fill(0,0,0);
  ellipse(width/2-50,height/2-50,40,70);// ojo izquierdo
  ellipse(width/2+50,height/2-50,40,eyeHeight);// ojo derecho
  fill(255,0,0) ;
arc(width/2,height/2+50,100,mouthHeight,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,mouthHeight,0,PI);// boca
  }
}


A la línea 1 i 2 explica quin tipus de document és: HTML, significa HiperText Markup Language, en català llenguatge de marques de HiperText, HiperText vol dir que va més enllà del text, imatges, videos, mcrófon, sàmera, teclat, ratolí

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

a la línea 5 i a la 6 hi ha codis meta, que significa metainformació, que vol dir informació sobre la informació

la línea 5 ens dona metainformació de charset, significa conjunt de caracters es a dir, les lletres i els números que accepta el codi, per exemple: alfabet llatí, grec

A la línea 6 hi ha codi meta que fa el disseny adaptable(responsive design)és a dir que es pogui veure bé en altres dispositius (mòbil, tablet, pc, televisió, pantalla de cinema). Aisò és degut a que posa en el codi width=device-width, que significa que l'amplada(width) del que estem fent és igual a l'amplada de l'aparell.

A la línea 7 hi ha una etiqueta o tag en anglès, que posa title. Serveix per posar el títol al nom d'una pestanya. Una pestanya és una pàgina web que apareix sobretot en el navegador.

De la línea 8 a la 13 hi ha una etiqueta d'estil que dintre del body o cos, posa que el margin i el padding han de ser 0 i això vol dir que el marge interior i exterior sigui nul, es a dir que no hi hagi.

De la línea 14 a la 18 tenen en comú les etiquetes script i src. Script significa un tipus de llenguatge diferent, concretament javascript que permet connectar amb uns arxius del mateix tipus javascript que es troba en un altre lloc de neocities o en un altre lloc web. Src significa source, que vol dir el lloc on es troba allojat.

A la línea 32 hi ha un exemple de com s'ha de posar una imatge, necessitem la etiqueta img que vol dir imatge. Després de la etiqueta hi ha unes paraules que són uns paràmetres o propietats. La primera propietat que apareix es diu src, que vol dir source, és a dir, el nom de la imatge i on la pot trobar. Una altra propietat que apareix és el width, que vol dir amplada, que es mesura amb pixels i la alçada es mesura també amb pixels amb la paraula clau heigth

Hi ha una propietat dintre del ing que es diu alt, que significa text alternatiu, que serveix si no es pot veure la imatge perquè la persona és cega o la imatge és defectuosa o la imatge té un altre nom o l'han esborrat.

Al exàmen us donaré el tamany d'una imatge per exeple feta per el mòbil, que yingui 4.000 pixels per 3.000 pixels, és massa gran. Y la hem de reduir per veurela en la nostre web, pero no s'ha de deformar, és a dir he de fer una escala de reducció, dividint per un número que no sabes. Si volem un màxim de 900 pixels d'amplada, 4.000 dividit entre 900, que dona 4,44, vol dir que està reduït 4,44 vegades. Ara hem de dividir el 3.000 entre el 4,44. foto de línea 32 del meu codi