Benvinguts a la pàgina de Sara!

Soc estudiant de tercer d'ESO de l'asignatura de robòtica i programació, em dic Sara i el que trobareu en aquesta web us agradarà molt:

Primer de tot, trobareu una cara molt maca que es mou amb la veu i canvia de color.
Segon, trobareu un robot que pot moure la boca segons l'intensitat del soroll. Els ulls es mouen amb la funció cosinus, i els braços i les cames amb la funció sinus. Alguns colors són aleatoris. També, el color canvia amb la veu. Si apretem algunes tecles (m,n i b) es fan linies.
Tercer, l'Arcimboldo és un pintor que al 1563 va pintar un quadre amb 30 fruites i el que hem fet es crear un mapa d'imatge amb GIMP i adaptar el codi del GIMP amb mapper.js
Quart, hem creat un codi i un dibuix electrònic a tinkercad que fa que quan aproximo la mà o disminueixo la llum arribada a un LDR, canvia la freqüència del so d'un altaveu, és a dir, hem fet un Theremin.
Cinquè, hem posat un codi d'intel·ligència artificial basat en tensorflow.js, que es capaç de generar-nos un model per identificar amb la webcam tres clases d'objectes (gat, gos i esquirol).

Explicarem els projectes començant pel més fàcil:

Crear aquesta pàgina web amb plantilla boostrap5.

Descarreguem la plantilla de la pàgina web del professor.
Creem un compte de neocities amb el compte de iespompeufabra.cat i pujem tots els arxius que em descomprimit de la pàgina del profesor.
Creem carpetes (new folders) amb els noms face, imagemap, robot, project, machinelearning i dintre de cada carpeta creem un arxiu (new file) anomenat index.html perquè tots els navegadors sempre el busquen primer i mai es mostra la paraula index.html en la direcció.

Projecte de mapa d'imatge amb fruites del quadre "Estiu" (Arcimboldo 1563).

Baixem l'imatge anterior de la web del professor, concretament aquí.
Obrim el programa GIIMP, primer obrim l'imatge amb Arxiu > Obrir, i un cop obert cliquem Filtres > Web mapa d'imatge i apareix un editor de mapa d'imatges
Dibuixem polígons en totes les fruites i afegim les adreçes de viquipèdia.

Guardem el mapa d'imatge que serà un arxiu amb un nom molt llarg i amb parèntesis amb l'extensió d'un map i s'obre amb el visual code studio.

Afegim la biblioteca mapper.js com un script i afegim a cada area shape un class = "mapper" per dir-li que cada àrea anterior no es un àrea normal sinó d'una classe especifica mapper que està definida a la biblioteca mapper i que té una propietat que es diu icolor, que és un un nombre hexadecimal. I podem veure com queda el codi a continuació. On hem canviat target per title amb el visual code buscar i reemplazar todo.

Cara que es mou amb el micròfon.

Anem a la web de p5.js al cconccretament seu editor p5.js.

En l'editor posem el següent codi:

 
    let mic;          //guarga un espai a la memòria per una variable anomenada micròfon
    let micVariable=100;     //guarda un espai a la memòria per una variable anomenada micVariable amb un valor inicial de 100. Aquestes variables són globals i afecten a tot el codi.Si estiguessin dintre d'una funció, no es podrín utilitzar fora d'aquesta perquè son variables locals si estan dintre d'una funció.
function setup() {         //setup és una funció obligatoria de p5.js de configuració o setup.
  createCanvas(800,600);     //crea un espai de dibuix o canva de 800píxels d'amplada i 600píxels d'alçada.
  mic= new p5.AudioIn();     //la variable mic és un objecte d'una classe anomenada p5.AudioIn que és una entrada d'audio i tindrà tots els mètodes d'aquesta classe, que les cridarem amb un punt: mic.Start per activar el micròfon, micGetLevel per agafar el nivell del micròfon.
  mic.start();
}
 
function draw() { 
    let vol= mic.getLevel();
    let mouth=100;
    console.log ("volume is" + micVariable) //veure la consola del desenvolupador que es troba en el navegador, els números de volum que va entre 0 i 1 i que van canviant.
    micVariable= map(vol,0,1,500) // la funció map fa que els números de volum que van de l'escala 0 a 1 canvii a escala de 0 a 500, per poder notar el canvi en l'imatge. Els números queden guardats en micVariable, i els veig amb console.log
  let mouthH= map(vol,0,1,0,800);
    fill(micVariable-50micVariable+225,micVariable);   //fill és omplir de color amb 3 números. Primer vermell, segon verd, tercer blau. Si en comptes de números poso variables de micròfon, és mourà amb la veu. El valor màxim de color és 255, és a dir, hi ha 255 colors vermells, 255 colors blaus i 255 colors verds, i quan els multiplico em dona 255x255x255 = 16.000.000 colors diferents. Si poses només un número, és l'escala de grisos (fill(n)). Si poses dos números, seria escala de gris i transparència. Si poso quatre números seria red, green and blue i transparència.
  ellipse(400,micVariable+50,400,300);
  
    
    //cara
   strokeWeight(1);
  background(255,255,255);
  fill("#F0E5A9");
  ellipse(400,300,215,280);
 
  
  // ull dret
   strokeWeight(1);
  fill("white");
  ellipse(440,250,25,40); 
    fill("cyan");
  ellipse(440,255,15,18); 
  
  // ull esquerra
   strokeWeight(1);
  fill("white");
  ellipse(360,250,25,40);
  fill("cyan");
  ellipse(360,255,15,18); //Els dos primers paràmetres són el centre de l'el·lipse, el primer és el centre de la "x" i el segon és el centre de la "y". El penúltim número és l'amplada de l'el·lipse i l'últim número és l'alçada de l'el·lipse, tot en píxels. Si posem micVariable al penúltim paràmetre, en aquest casa, al ser una variable (mic), l'amplada de l'el·lipse canviaria gràcies a la veu.
  
  //boca
   strokeWeight(1); //És el gruix del contorn de l'el·lipse
  fill("#F0A9CE") //En aquest cas, és rosa, està posat en hexadecimal (rgb).
  arc (400,350,90,mouthH,0,PI); //L'arc de la boca té sis paràmetres: el primer és la posició "x" del centre de la boca, el segon és la posició "y" del centre de la boca. El tercer és l'amplada del arc i el quart és l'alçada de l'arc. I el cinqué i sisé de l'arc son com es veu l'arc, de 0 a Pi, és una semicircumferència (la part de dalt, en aquest cas) i Pi 0 és al contrari.
  
  //ceja derecha
  fill (micVariable-127, micVariable+127, micVariable); //El color variarà amb el micròfon quan pujo la veu la Variable "mic" disminueix la intensitat del color vermell perquè li he restat 127 i augmenta la intensitat del verd perquè li ha sumat 127 i el color blau no varia. No puc posar micVariable en  tots els colors perquè sortirà sempre la mateixa tonalitat de color.
  strokeWeight(6);
  line(420,220,436,205) 
  line(436,205,455,220) 
  
    //ceja izquierda
  strokeWeight(6);
  line(345,220,361,205) //Això és un línea i els dos primers núm són els vértexs inicials i finals.
  line(361,205,380,220) 
  
  //nariz
     strokeWeight(1);
  fill("#F0E5A9");
  ellipse(400,298,28,20); 
  
   //gorra
  //strokeWeight(1);
   //fill("#F0A9CE")
  //arc (400,150,250,100,300,PI);
  //square(265,50,150,200,300,0,200)

}

Robot amb p5.js


    let mic,h,x,rand;
function setup(){
createCanvas(1000,1525);
mic= new p5.AudioIn();
mic.start(); 
}

function draw (){
x=sin(frameCount*0.1)*20 //repetit de -20 a +20, guardo en la variable "x",que s'ha creat anteriorment, i la converteixo en una variable sinus, que varia entre -1 i +1 de orma continua: -1, -0.99, -0.98,... -0.01,0,0.01,0.2...1, 0.99,0.98...0.01,0,... Multiplico per 20 el sinus perquè vagi des de -20 píxels fins a +20 píxels. FrameCount serveix per contar fotogràmes i al contar fotogàmes, 50 per seg. perquè funciom draw es resfreca 50 vegades per seg.
  z=cos(frameCount*0.1)*20
  z=cos(frameCount*0.1)*20
 z=cos(frameCount*0.1)*20 //
rand=random(255);// de 0 a 255 aleatori. Rand és una variable aleatoria i dona lloc a núm. sencers (int=integer) entre 0 i 255 gràcies a la funció predefinida random.
let vol= mic.getLevel();
let h= map(vol,0,1,0,800); //volumen de 0 a 800

fill(rand,34,218)
  background(255,255,255);
  fill("white");

beginShape(); //antena izquierda vertex(amarillo) comença una forma
fill (229, 173,11)
vertex(359+x,100+x);vertex(360+x,180+x);vertex(407+x,180+x);vertex(404+x,103+x);vertex(378+x,100+x);endShape(CLOSE);
beginShape(); //antena derecha vertex(amarillo)
fill (229, 173,11)
vertex(574+x,94+x);vertex(576+x,180+x);vertex(621+x,180+x);vertex(621+x,98+x);vertex(600+x,103+x);vertex(578+x,98+x);vertex(575+x,98+x);endShape(CLOSE); //termina una forma
beginShape(); //base de la cara (rojo)
fill (260-h/3, 41, 3)
vertex(290+x,179+x);vertex(690+x,174+x);vertex(690+x,471+x);vertex(290+x,467+x);vertex(290+x,179+x);endShape(CLOSE);
  beginShape(); //boca (verde)
  fill (14, 198, 2+h)
vertex(378+x,380+x);vertex(605+x,380+x);vertex(606+x,420+x+h/6);vertex(378+x,420+x+h/6);endShape(CLOSE);
beginShape(); //cuello (amarillo)
fill (0, 0, rand)
vertex(350+x,466+x);vertex(350+x,516+x);vertex(632+x,515+x);vertex(630+x,471+x);endShape(CLOSE);
beginShape(); //mano izquierda vertex(azul)
   fill ("#02AFDE")
vertex(13,272+x);vertex(58,278+x);vertex(56,306+x);vertex(66,322+x);vertex(75,331+x);vertex(90,337+x);vertex(105,337+x);vertex(120,327+x);vertex(131,317+x);vertex(137,305+x);vertex(140,297+x);vertex(140,287+x);vertex(140,274+x);vertex(179,271+x);vertex(183,292+x);vertex(183,313+x);vertex(174,337+x);vertex(155,355+x);vertex(135,370+x);vertex(111,382+x);vertex(82,382+x);vertex(59,376+x);vertex(44,365+x);vertex(27,350+x);vertex(19,334+x);vertex(11,313+x);vertex(12,279+x);vertex(15,273+x);endShape(CLOSE);
beginShape(); //muñeca izquierda vertex(lila)
  fill ("#9C02C6")
vertex(24,346+x);vertex(26,368+x);vertex(41,391+x);vertex(57,406+x);vertex(79,415+x);vertex(106,416+x);vertex(132,410+x);vertex(148,391+x);vertex(168,355+x);vertex(165,348+x);vertex(121,378+x);vertex(72,381+x);vertex(34,355+x);endShape(CLOSE);
beginShape(); //brazo izquierdo vertex(amarillo)
fill (229, 173,11)
vertex(69,411+x);vertex(67,599+x);vertex(121,602+x);vertex(118,415+x);vertex(95,419+x);endShape(CLOSE);
beginShape(); //mano derecha vertex(azul)
   fill ("#02AFDE")
vertex(935,1030-x);vertex(982,1036-x);vertex(982,1007-x);vertex(978,982-x);vertex(965,961-x);vertex(943,940-x);vertex(925,931-x);vertex(896,929-x);vertex(862,933-x);vertex(840,947-x);vertex(824,965-x);vertex(815,987-x);vertex(810,1016-x);vertex(810,1037-x);vertex(855,1028-x);vertex(855,1004-x);vertex(866,980-x);vertex(887,971-x);vertex(907,968-x);vertex(927,977-x);endShape(CLOSE);
beginShape(); //bíceps izquierdo vertex(rojo)
  fill (260-h/3, 41, 3)
vertex(39,601+x);vertex(185,602+x);vertex(187,703+x);vertex(39,702+x);endShape(CLOSE);
beginShape(); //muñeca derecha vertex(lila)
  fill ("#9C02C6")
vertex(827,960-x);vertex(830,932-x);vertex(858,904-x);vertex(887,890-x);vertex(922,893-x);vertex(954,918-x);vertex(971,962-x);vertex(968,965-x);vertex(941,941-x);vertex(913,931-x);vertex(869,934-x);vertex(845,948-x);endShape(CLOSE);
beginShape(); //brazo derecho vertex(amarillo)
fill (229, 173,11)
vertex(875,897-x);vertex(873,706-x);vertex(925,707-x);vertex(924,893-x);vertex(894,888-x);endShape(CLOSE);
beginShape(); //bíceps derecho vertex(rojo)
  fill (260-h/3, 41, 3)
vertex(805,606-x);vertex(954,603-x);vertex(956,708-x);vertex(803,705-x);endShape(CLOSE);
beginShape(); //aguante brazo izquierdo vertex(amarillo)
  fill (0, 0, rand)
vertex(145,543+x);vertex(210,543+x);vertex(209,771+x);vertex(146,770+x);vertex(148,700+x);vertex(187,700+x);vertex(183,610+x);vertex(147,608+x);endShape(CLOSE);
beginShape(); //aguante brazo derecho vertex(amarillo)
  fill (0, 0, rand)
vertex(780,535-x);vertex(779,764-x);vertex(847,765-x);vertex(847,705-x);vertex(805,705-x);vertex(806,609-x);vertex(849,608-x);vertex(848,534-x);endShape(CLOSE);
beginShape(); //pie izquierdo vertex(rojo)
  fill (260-h/3, 41, 3)
vertex(196-x,1511);vertex(200-x,1456);vertex(227-x,1411);vertex(262-x,1388);vertex(302-x,1369);vertex(349-x,1366);vertex(393-x,1373);vertex(430-x,1392);vertex(462-x,1422);vertex(481-x,1471);vertex(484-x,1511);vertex (196-x,1511);endShape(CLOSE);
beginShape(); //pie derecho vertex(rojo)
  fill (260-h/3, 41, 3)
vertex(509-x,1508);vertex(508-x,1459);vertex(519-x,1428);vertex(543-x,1402);vertex(585-x,1378);vertex(627-x,1365);vertex(669-x,1367);vertex(714-x,1376);vertex(755-x,1401);vertex(777-x,1437);vertex(790-x,1474);vertex(791-x,1507);vertex(509-x,1508);endShape(CLOSE);
beginShape(); //pierna izquierda vertex(lila)
  fill ("#9C02C6")
vertex(304-x,1153);vertex(310-x,1366);vertex(375-x,1371);vertex(371-x,1153);vertex(343-x,1161);vertex(304-x,1153);endShape(CLOSE);
beginShape(); //pierna derecha vertex(lila)
  fill ("#9C02C6")
vertex(616-x,1152);vertex(617-x,1367);vertex(651-x,1362);vertex(686-x,1370);vertex(682-x,1149);vertex(650-x,1160);vertex(616-x,1152);endShape(CLOSE);
beginShape(); //base cuerpo vertex(rojo)
  fill (260-h/3, 41, 3)
vertex(208,517+x);vertex(208,991);vertex(779,993);vertex(781,513+x);endShape(CLOSE);
beginShape(); //fémur izquierdo vertex(lila)
 fill ("#9C02C6") 
vertex(235-x,991);vertex(442-x,991);vertex(443-x,1031);vertex(402-x,1035);vertex(349-x,1007);vertex(277-x,1032);vertex(236-x,1031);vertex(235-x,991);endShape(CLOSE);
beginShape(); //fémur derecho vertex(lila)
  fill ("#9C02C6")
vertex(544-x,994);vertex(546-x,1031);vertex(593-x,1030);vertex(640-x,1004);vertex(704-x,1029);vertex(753-x,1029);vertex(753-x,994);endShape(CLOSE);
beginShape(); //corazón exterior vertex(lila)
  fill ("#9C02C6")
vertex(273+x,576+x);vertex(515-x,573+x);vertex(514-x,711-x);vertex(273+x,711-x);endShape(CLOSE);
beginShape(); //corazón interior vertex(azul)
  fill ("#02AFDE")
vertex(318+x,602+x);vertex(318+x,680-x);vertex(471-x,685-x);vertex(470-x,598+x);endShape(CLOSE);
beginShape(); //llave inglesa vertex(verde)
  fill ("#0EC602")
vertex(624,726+x);vertex(587,705+x);vertex(568,671+x);vertex(567,632+x);vertex(580,599+x);vertex(604,581+x);vertex(632,574+x);vertex(668,572+x);vertex(695,588+x);vertex(718,621+x);vertex(723,654+x);vertex(714,690+x);vertex(666,724+x);vertex(666,808+x);vertex(684,823+x);vertex(705,853+x);vertex(707,889+x);vertex(693,912+x);vertex(655,936+x);vertex(622,932+x);vertex(598,916+x);vertex(585,894+x);vertex(580,867+x);vertex(583,849+x);vertex(604,821+x);vertex(626,808+x);endShape(CLOSE);
beginShape(); //parte redonda derecha de la antena vertex(lila)
  fill ("#9C02C6")
ellipse(598+x,88+x,50,50);endShape(CLOSE);
beginShape(); //parte izquierda de la antena vertex(lila)
  fill ("#9C02C6")
ellipse(382+x,88+x,50,50);endShape(CLOSE);
beginShape(); //parte de fuera del ojo izquierdo vertex(amarilla)
fill (229, 173,11)
ellipse(407,283,73+x,73+x);endShape(CLOSE);
beginShape(); //parte de fuera del ojo derecho vertex(amarillo)
 fill (229, 173,11)
ellipse(578,284,73+x,73+x);endShape(CLOSE);
beginShape(); //parte del medio del ojo izquierdo vertex(verde)
  fill (14+rand, 198-rand, 2+rand);
ellipse(406+x,284+x,48,48);endShape(CLOSE);
beginShape(); //parte del medio del ojo derecho vertex(verde)
  fill (14+rand, 198-rand, 2+rand)
ellipse(578+x,287+x,47,47);endShape(CLOSE); 
beginShape(); //rodilla izquierda vertex(azul marino)
    fill (2-rand, 75+rand, 222+rand);
ellipse(338-x,1084,142,142);endShape(CLOSE);
beginShape(); //rodilla derecha vertex(azul marino)
    fill (2-rand, 75+rand, 222+rand);
ellipse(647-x,1083,142,142);endShape(CLOSE);
beginShape(); //botón arriba exterior vertex(amarillo)
  fill (229, 173,11)
ellipse(313+x*2,753,33,33);endShape(CLOSE);
beginShape(); //botón medio exterior vertex(amarillo)
 fill (229, 173,11)
ellipse(314+x*2,830,32,32);endShape(CLOSE);
beginShape(); //botón abajo exterior vertex(amarillo)
  fill (229, 173,11)
ellipse(314+x*2,903,32,32);endShape(CLOSE);
beginShape(); //botón arriba interior vertex(verde)
  fill ("#0EC602")
ellipse(311+x*2,755,18,18);endShape(CLOSE);
beginShape(); //botón medio interior vertex(verde)
  fill ("#0EC602")
ellipse(315+x*2,830,16,16);endShape(CLOSE);
beginShape(); //botón abajo interior vertex(verde)
  fill ("#0EC602")
ellipse(313+x*2,905,15,15);endShape(CLOSE);
   if(keyIsPressed){
    if ((key == 'n')||(key=='N')){
      line (250,790,400,790);
    }
   if ((key == 'm')||(key=='M')){
     line (250,865,400,865);
   } if ((key == 'b')||(key=='B')){
     line (400,740,400,930);
   }
  }

}

Projecte theremin, tinkercard i arduino

El projecte theremin consisteix en conectar un sensor de llum LDR a un arduino i, depenent de la quantitat de llum rebuda per aquell sensor, s'activa un altaveu de forma que la freqüència del so, és diferent depenent de la llum rebuda.