let eyeHeight=10;
function setup() {
  createCanvas(600,400);
}
function preload(){
  noapropis=loadSound("https://od.lk/s/NjZfMzg2MDQ5MjJf/apropat.mp3");
 apropat=loadSound("https://od.lk/s/NjZfMzg2MDQ5MzJf/noapropis.mp3");
}
function draw() {
  letdistance=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(222,49,99);
  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(247,169,152);
  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 explica quin tipus de document: html, significa hipertext
  markup language en catala llenguatge de marques de hipertext
  vol dir que va mes enlla el 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 rpincipi

  
a la linea 5 i la 6 hi ha codis meta, que significa metamorformacio, que vol dir
  informaciosobre la informacio 
  
 A la linea 5 ens dona metainformació de charset, significa conjunt de caràcers
  llatí, greg
  
 A la linea 6 hi ha un codi meta que fa el disseny adaptable (responsive desing), es a dir 
  que es pogui veure bé en altres dispositius (mòbil, tablet, pc, televisioó, pantalla de cinema).
  Això és degut a que posa en el codi width= device-width
  
 A la linea 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 en el navegador.
  
 De la linea 8 a la 13 nhi 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 merge interior i exterior sigui nul, es a dir que 
  no hi hagi. 

  
 De la linea 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 troben en un altre lloc de neocities o en un altre lloc web. Scr significa source, 
  que vol dir el lloc on es troba allotjat. 
  
 A la linea 32 hi ha un exemple de com s'ha de posar una imatge, necesites la etiquta ing que vol dir
  imatge. Desprs dela etiqueta hi ha unes paraules que son uns parametres o propietats. la primera propietat
  que apareix es diu sr, que vol dir sorce, és a dir, el nom de la imatge i on la pot trobar. Una altra
  propietat que apareix es el width, que vol dir amplada, que es mesura amb pixels i la alcada es esura també
  amb pixels amb la paraula clau height
  
Hi ha una propietat dintre de img que es diu alt, que significa text alternatiu, que serveix si no es pot
  veure la imatge perque la persona és cega o la imatge és defectuosa o la imatge te un altre nom o l'hun 
  esborrat.
  
A l'examen us donaré el tamany d'una imatge, per exemple feta amb el mobil, que tingui 4000 pixels per 
  3000 pixels, pixels, és massa gran. I la hem de reduir per veurela en la nostra